I'm new to kendo framework. i would like to ask that is there any way to check the checkbox by entering the id of the checkbox? For example check box id [51,52,53,54,56]. When enter the id of 52 then the check box of 52 would be checked.
var data;
var gridColumns;
var grid;
var showlist;
var viewModel;
var checklist = document.getElementById("checklist");
viewModel = kendo.observable({
showlist: false,
});
kendo.bind($(checklist), viewModel);
function onChange() {
viewModel = kendo.observable({
showlist: true,
});
kendo.bind($(checklist), viewModel);
}
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"
}, {
id: 54,
parent_id: 5,
value: "Manufacturer"
}, {
id: 55,
parent_id: 5,
value: "Model"
}, {
id: 56,
parent_id: 5,
value: "Software Version"
}]
}]
});
function onCheck() {
var message;
var checkedNodes = [];
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
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) {
//console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
$("#get").click(function() {
alert(checklist.value)
});
#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://ift.tt/2d5XRzf" />
<link rel="stylesheet" href="http://ift.tt/2dyIO3I" />
<script src="http://ift.tt/ZnjyAz"></script>
<script src="http://ift.tt/2dyGzxD"></script>
<script src="http://ift.tt/ZnjyAz"></script>
<script src="http://ift.tt/2d5VZqi"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="demo-section k-content">
<ul id="fieldlist">
<li>
<input id="checklist" class="k-input searchClientText" type="text" placeholder=51-56 style="height:auto;" />
<button class="k-button k-primary" id="get">check</button>
</li>
</ul>
<table>
<tr>
<td>
<div id="treeview"></div>
<div id="result"></div>
</td>
</tr>
</table>
</div>
<div id="checklist">
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire