如何使用自定义复选框隐藏网格列

我想通过使用复选框列表来隐藏网格列。在代码片段中有一个组合框，允许用户选择复选框列表的类型。

Sample:-
[X]Agent Running Mode
[ ]Agent Version
[X]Master/Slave Mode

一旦用户选中，用户需要按刷新按钮重新加载网格。然后网格应该只隐藏代理版本不显示，因为没有选中。

var data;
var gridColumns;
var grid;
var showlist;
var viewModel;
var list = [];
var settings = [];
var probesetting = [];
viewModel = kendo.observable({
  showlist: false,
});
kendo.bind($(checklist), viewModel);
function loadpps(settings) {
  if (undefined !== settings && settings.length) {
    settings = settings.filter(function(item, index, inputArray) {
      return inputArray.indexOf(item) == index;
    });
    for (var i = 0; i < settings.length; i++) {
      $("input[name='checkedFiles[" + settings[i] + "]']").prop("checked", true);
    }
    console.log(settings);
  } else {
    settings = [];
  }
}
function removeA(settings) {
  var what, a = arguments,
    L = a.length,
    ax;
  while (L > 1 && settings.length) {
    what = a[--L];
    while ((ax = settings.indexOf(what)) !== -1) {
      settings.splice(ax, 1);
    }
  }
  return settings;
}
function onChange() {
    viewModel = kendo.observable({
      showlist: true,
    });
    filterinfo(cType.value());
    loadpps(settings);
    kendo.bind($(checklist), viewModel);
  }
  //change view
function filterinfo(value) {
  var treeView = $("#treeview").data("kendoTreeView");
  if (treeView) {
    treeView.destroy();
    $("#treeview").html("");
  }
  function onCheck() {
    var checkedNodes = [];
    checkedNodeIds(treeView.dataSource.view(), checkedNodes);
  }
  switch (value) {
    case "1":
      treeView = $("#treeview").kendoTreeView({
        checkboxes: {
          checkChildren: false,
          template: "# if(!item.hasChildren){# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox'  name='checkedFiles[#= item.id #]' value='true' />#}else{# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#"
        },
        check: onCheck,
        dataSource: PrimaryProbe,
        dataTextField: "value"
      }).data("kendoTreeView");
      function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
          if (nodes[i].checked) {
            settings.push(nodes[i].id);
          } else {
            removeA(settings, nodes[i].id);
          }
          if (nodes[i].hasChildren) {
            checkedNodeIds(nodes[i].children.view(), checkedNodes);
          }
        }
      }
      break;
  }
}
var clientType = [{
  "clientTypeID": 1,
  "clientTypeName": "PrimaryProbe"
}, ]
var cType = $("#clientType").kendoComboBox({
  filter: "contains",
  change: onChange,
  placeholder: "Filter by client type",
  dataTextField: "clientTypeName",
  dataValueField: "clientTypeID",
  dataSource: {
    data: clientType
  }
}).data("kendoComboBox");
var PrimaryProbe = new kendo.data.HierarchicalDataSource({
  data: [{
    id: 5,
    parent_id: 0,
    value: "General - Primary Probe",
    expanded: true,
    items: [{
      id: 51,
      parent_id: 5,
      value: "Agent Running Mode"
    }, {
      id: 52,
      parent_id: 5,
      value: "Agent Version"
    }, {
      id: 53,
      parent_id: 5,
      value: "Master/Slave Mode"
    }]
  }]
});
var defaultData = [{
  clientName: "Jupiter-RTU-0B40",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "28d",
  location: "3.08191833333333,101.58238",
  status: "InProcess",
  runningMode: "test1",
  agentVersion: "test2",
  Mode: "test3"
}, {
  clientName: "MPC00200C6C2ACE",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "82d",
  location: "63.7443,19.9584",
  status: "InProcess",
  runningMode: "test4",
  agentVersion: "test5",
  Mode: "test6"
}, {
  clientName: "RTU0010F33FDBD8",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "0d",
  location: "3.08191833333333,101.58238",
  status: "InProcess",
  runningMode: "test7",
  agentVersion: "test8",
  Mode: "test9"
}];
var defaultColumns = [{
  title: "Default",
  columns: [{
    field: "clientName",
    title: "Client Name",
    locked: true,
    width: 150
  }, {
    field: "clientType",
    title: "Client Type",
    width: 150
  }, {
    field: "lastUpdate",
    title: "Last Update",
    width: 150
  }, {
    field: "location",
    title: "Location",
    width: 150
  }, {
    field: "status",
    title: "Status",
    width: 150
  }, {
    field: "runningMode",
    title: "Agent Running Mode",
    width: 150
  }, {
    field: "agentVersion",
    title: "Agent Version",
    width: 150
  }, {
    field: "Mode",
    title: "Master/Slave Mode",
    width: 150
  }]
}]
grid = $("#grid").kendoGrid({
  columns: defaultColumns,
  dataSource: {
    data: defaultData
  },
  selectable: "multiple",
  scrollable: true,
  pageable: false,
  columnMenu: true,
  sortable: true
});
$("#reset").on("click", function() {
  //refresh grid
});

#fieldlist {
  margin: 0;
  padding: 0;
}
#fieldlist li {
  list-style: none;
  padding-bottom: 1.5em;
  text-align: left;
}
#fieldlist label {
  display: block;
  padding-bottom: .3em;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}
.searchClientText {
  width: 222px !important;
  height: 25px !important;
  border-radius: 3px;
}
.checkboxList {
  margin: 0 0 -1em;
  padding: 0;
}
.checkboxList li {
  list-style: none;
  padding-bottom: 1em;
}
td {
  width: 150px;
  vertical-align: top;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div class="demo-section k-content">
    <ul id="fieldlist">
      <li>
        <input id="clientType" style="width:auto" />
      </li>
    </ul>
  </div>
  </div>
  <div id="checklist" data-bind="visible: showlist">
    <table>
      <tr>
        <td>
          <div id="treeview"></div>
          <div id="result"></div>
        </td>
      </tr>
    </table>
  </div>
  <div id="grid"></div>
  <button class="k-button k-primary" id="refresh">Refresh</button>
</body>
</html>