Listing Marked Boxes in the Kendo Web TreeView User Interface

Question

How do I get a list of checked flags in the Kendo web design user interface? I cannot find this functionality anywhere in the API, but I would have thought that it would be a fairly simple operation.

Answer 1

There is actually no API method, but you can easily get them using jQuery.

To get selected checkboxes, use

$('#treeviewName :checked'); 

To get elements of a marked li container, use:

 $('#treeviewName :checked').closest('li'); 

Once you have the li element, you can pass it to the dataItem TreeView method and get the base model and therefore its identifier or other properties.

Answer 2

In Kendo demos, they provide the following algorithm:

  // 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); } 

Answer 3

From the assembly of tested nodes from wood :

 var treeview = $("#treeview").data("kendoTreeView"); var checkedNodes = []; function gatherStates(nodes) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].checked) { checkedNodes.push(nodes[i].id); } if (nodes[i].hasChildren) { gatherStates(nodes[i].children.view()); } } } gatherStates(treeview.dataSource.view()); 

This does not seem to take into account unexpanded nodes that are cascaded: the checkChildren property.