New to Kendo UI for jQuery? Download free 30-day trial

How To Expand Parent Node If Child Is Checked

Environment

Product Progress Kendo UI TreeView

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

  1. You could subscribe to the dataBound event of the TreeView and find all checked items.
  2. 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>
In this article
Not finding the help you need? Improve this article