Example of this problem in Dojo
How to resolve?
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/treeview/checkboxes"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-bootstrap.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.bootstrap.min.css" /> <script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script></head><body><div id="example"> <div class="demo-section k-content"> <div> <h4>Check nodes</h4> <div id="treeview"></div> </div> <div style="padding-top: 2em;"> <h4>Status</h4> <p id="result">No nodes checked.</p> </div> </div> <script> $("#treeview").kendoTreeView({ checkboxes: { checkChildren: true }, check: onCheck }); $("#treeview").data("kendoTreeView").setDataSource([{ id: 9, text: "Reports", spriteCssClass: "folder", items: [ { id: 10, text: "February.pdf",checked:true, spriteCssClass: "pdf" }, { id: 11, text: "March.pdf", spriteCssClass: "pdf" }, { id: 12, text: "April.pdf", spriteCssClass: "pdf" } ] }]); // function that gathers IDs of checked nodes function checkedNodeIds(nodes, checkedNodes) { 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); } } } // show checked node IDs on datasource change function onCheck() { var checkedNodes = [], treeView = $("#treeview").data("kendoTreeView"), message; checkedNodeIds(treeView.dataSource.view(), checkedNodes); if (checkedNodes.length > 0) { message = "IDs of checked nodes: " + checkedNodes.join(","); } else { message = "No nodes checked."; } $("#result").html(message); } </script> <style> #treeview .k-sprite { background-image: url("../content/web/treeview/coloricons-sprite.png"); } .rootfolder { background-position: 0 0; } .folder { background-position: 0 -16px; } .pdf { background-position: 0 -32px; } .html { background-position: 0 -48px; } .image { background-position: 0 -64px; } </style></div></body></html>1 Answer, 1 is accepted
0
Hello Roberto,
Set loadOnDemand: false. This will instruct the TreeView that it should read the complete DataSource data, rather than only the first level, and it will infer the indeterminate state correctly. Here's the updated Dojo.
Regards,Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!