Check and Uncheck Checkbox in TreeView on Node Selection

Environment

Product Progress Kendo UI TreeView
Operating System All
Browser All
Preferred Language JavaScript

Description

How to check and uncheck checkboxes in a TreeView on selecting a node?

Solution

In the handler of the TreeView select event, find the checkbox of the selected node and check or uncheck it accordingly by calling the jQuery prop() method.

    <div id="treeview"></div>
    <script>
        $("#treeview").kendoTreeView({
            checkboxes: true,
            select: onSelect,
            dataSource: [{
                id: 1, text: "My Documents", expanded: true, items: [
                    {
                        id: 2, text: "Kendo UI Project", expanded: true, items: [
                            { id: 3, text: "about.html" },
                            { id: 4, text: "index.html"},
                            { id: 5, text: "logo.png"}
                        ]
                    },
                    {
                        id: 6, text: "New Web Site", expanded: true, items: [
                            { id: 7, text: "mockup.jpg" },
                            { id: 8, text: "Research.pdf"},
                        ]
                    },
                    {
                        id: 9, text: "Reports", expanded: true, items: [
                            { id: 10, text: "February.pdf" },
                            { id: 11, text: "March.pdf" },
                            { id: 12, text: "April.pdf" }
                        ]
                    }
                ]
            }]
        });

        function onSelect(e) {
           e.preventDefault();                      
           var checkbox = $(e.node).find(":checkbox");
           var checked = checkbox.prop("checked");
           checkbox.prop("checked", !checked);                       
        }
    </script>
In this article
Not finding the help you need? Improve this article