0
チェックボックスのリストを使用してグリッド列を非表示にしたいとします。コードスニペットでは、ユーザーがチェックボックスリストのタイプを選択できるようにするコンボボックスがありました。カスタムチェックボックスでグリッド列を非表示にするにはどうすればいいですか？
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>
ですか？それ以外の場合は、 'hideColumn'関数を介してクライアントサイドの列を非表示にすることができます。 [参考]（http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-hideColumn） – Philipp
@Philippグリッドリロードは必要ありません。本当に役立つ提案に感謝します。 –
@Philipp私は列を隠すことができましたが、チェックボックスをオフにすると列を表示する際に別の問題があります。これは私のサンプル[コード]（http://jsbin.com/mufojaxilu/edit?html,js,output）です。 –