Common Scenarios
This article provides common scenarios you might encounter when working with the Kendo UI TreeView component.
- Getting the data of the nodes
- Reloading child nodes when nodes expand
- Gathering checked nodes from the TreeView
- Projecting the state of the TreeView
Getting the Node Data
You can get the TreeView node data in the select
event handler.
function onSelect(e) {
// This refers to the TreeView object.
var dataItem = this.dataItem(e.node);
console.log("Selected node with id=" + dataItem.id);
}
$("#treeview").kendoTreeView({
dataSource: [
{ id: 1, text: "Item 1", items: [
{ id: 3, text: "Item 3" }
] },
{ id: 2, text: "Item 2" }
],
select: onSelect
});
Reloading Child Nodes When Nodes Expand
Since dataItem
is of the Node
type, you can use its loaded
flag to force the reloading of nodes from the server. The Node.loaded
method sets the loaded
flag of the node and indicates that it needs to be refreshed.
function onExpand(e) {
var dataItem = this.dataItem(e.node);
dataItem.loaded(false);
}
$("#treeview").kendoTreeView({
dataSource: remoteDataSource,
expand: onExpand
});
Gathering Checked Nodes from the TreeView
The following example demonstrates how to gather the checked nodes from a Kendo UI TreeView. You can also use this approach to gather expanded nodes.
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());
Projecting the TreeView State
The HierarchicalDataSource
does not support data projection. Therefore, you might need to remap the state fields by using the schema.parse
configuration option.
<div id="tree">
<script>
$("#tree").kendoTreeView({
dataSource: {
transport: {
read: function (options) {
setTimeout(function() {
options.success([
{ hasChildren: false, text: "Node 1", Downloaded: false },
{ hasChildren: true, text: "Node 2", Downloaded: true, items: [
{ hasChildren: false, text: "Node 2.1", Downloaded: false },
] }
]);
}, 1000);
}
},
schema: {
parse: function(response) {
return $.map(response, function(x) {
x.expanded = x.Downloaded;
return x;
});
},
model: {
id: "id",
hasChildren: "hasChildren",
children: "items"
}
}
}
});
</script>