Expand All TreeView Nodes upon Check
Environment
| Product | Progress® Kendo UI® TreeView for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I expand all child nodes when checking a root node in the Kendo UI for jQuery TreeView?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="tree"></div>
<script>
$("#tree").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: function(e) {
this.expandRoot = e.node;
this.expand($(this.expandRoot).find(".k-item").addBack());
},
dataBound: function(e) {
if (this.expandRoot) {
this.expand(e.node.find(".k-item"));
}
},
// mocked datasource for the example
dataSource: {
transport: {
read: function(options) {
if (!window.counter) window.counter = 1;
// stub server
setTimeout(function() {
if (counter < 20) {
options.success([
{ text: "item " + (counter++) },
{ text: "item " + (counter++) },
{ text: "item " + (counter++), hasChildren: false }
]);
} else {
options.success([]);
}
}, 500);
}
},
schema: {
model: {
id: "id",
hasChildren: "hasChildren"
}
}
}
});
</script>