Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy