Check and Uncheck Checkbox in TreeView on Node Selection

Environment

Product	Progress® Kendo UI® TreeView for jQuery
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 Website", 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>