How To Expand Parent Node If Child Is Checked
Environment
Product | Progress® Kendo UI® TreeView for jQuery |
Description
When the data in the TreeView is loaded I would like to expand parent node automatically only if at least one child is checked.
Solution
- You could subscribe to the dataBound event of the TreeView and find all checked items.
- Use the expand method to expand the TreeView to the checked node.
<div id="treeview-kendo"></div>
<script>
$("#treeview-kendo").kendoTreeView({
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html", checked:true },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "Reports", spriteCssClass: "folder", items: [
{ id: 7, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 8, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 9, text: "April.pdf", spriteCssClass: "pdf", }
]
}
]
}],
dragAndDrop: true,
dataBound: onDataBound,
checkboxes: {
checkChildren: true
},
loadOnDemand: false
});
function onDataBound (e){
// expands tree to the selected node
var root = e.node ? $(e.node) : this.element;
this.expand(root.find(".k-item input[type=checkbox]:checked").parents());
}
</script>