I manage to make checkbox only can be checked at 1 time, but I need help to find the solution if checkbox is checked the node will be selected as well k-state-selected
. Appreciate your help!
Check this out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
checkboxes: true,
check: function(e){
var dataItem = this.dataItem(e.node);
var rootNodes = $("#treeview").getKendoTreeView().dataSource.data();
traverse(rootNodes, function(node) {
if (node != dataItem) {
node.set("checked", false);
//node.select($());
//node.select().find("span.k-state-selected")
}
});
},
select: function(e) {
var dataItem = this.dataItem(e.node);
dataItem.checked = true;
$(e.node).find('input').prop('checked', 'checked');
this.trigger('check', e);
},
dataSource: [ { id: 3, text: "about.html" },
{ id: 4, text: "index.html"},
{ id: 5, text: "logo.png"},
{ id: 7, text: "mockup.jpg" },
{ id: 8, text: "Research.pdf"},
{ id: 10, text: "February.pdf" },
{ id: 11, text: "March.pdf" },
{ id: 12, text: "April.pdf" }]
});
function traverse(nodes, callback) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var children = node.hasChildren && node.children.data();
callback(node);
if (children) {
traverse(children, callback);
}
}
}
$("#treeview").on('change', 'input', function() {
let $li = $(this).closest('li');
$("#treeview").data('kendoTreeView').select($li);
});
</script>
</body>
</html>
I've added the following code:
// To the grid options
select: function(e) {
var dataItem = this.dataItem(e.node);
dataItem.checked = true;
$(e.node).find('input').prop('checked', 'checked');
this.trigger('check', e);
},
// After grid initialization
$("#treeview").on('change', 'input', function() {
let $li = $(this).closest('li');
$("#treeview").data('kendoTreeView').select($li);
});
The first snippet makes sure that selecting an item by clicking it's label, the checkbox will be checked as well. That event also call check
event to uncheck other items.
The last one makes sure a checkbox changed will be trigger the select
event, doing the same as above.
I hope it helps.