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

Toggle CheckBox Selection for All TreeView Nodes

Environment

Product Progress® Kendo UI® TreeView for jQuery
Product Version 2018.2.620

Description

How can I check and uncheck all checkboxes for all nodes in a Kendo UI TreeView with an external button?

Solution

Use the jQuery library and trigger the change event.

//Uncheck All Nodes
$("#treeview .k-checkbox-wrapper input").prop("checked", false).trigger("change");

//Check All Nodes
$("#treeview .k-checkbox-wrapper input").prop("checked", true).trigger("change");

The following example demonstrates how to implement a Toggle button which, depending on the value of the button, will check or uncheck all checkboxes in the TreeView.

    <div>
      <input type="button" value="Uncheck" id="checkButton" onclick="toggleCheckAll()" class="k-button" />
      <h4>Check/Uncheck All Nodes</h4>
      <div id="treeview"></div>
    </div>

    <script>
      $("#treeview").kendoTreeView({
        checkboxes: {
          checkChildren: true
        },

        dataSource: [{
          id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", checked: true, items: [
            {
              id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                { id: 3, text: "about.html", spriteCssClass: "html" },
                { id: 4, text: "index.html", spriteCssClass: "html" },
                { id: 5, text: "logo.png", spriteCssClass: "image" }
              ]
            },
            {
              id: 6, text: "New Website", expanded: true, spriteCssClass: "folder", items: [
                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
              ]
            },
            {
              id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
              ]
            }
          ]
        }]
      });

      function toggleCheckAll(){
        var checkButtonValue = $("#checkButton").val();

        if(checkButtonValue == "Uncheck"){
          $("#treeview .k-checkbox-wrapper input").prop("checked", false).trigger("change");
          $("#checkButton").val("Check");
        } else {
          $("#treeview .k-checkbox-wrapper input").prop("checked", true).trigger("change");
          $("#checkButton").val("Uncheck");
        }
      }
    </script>

See Also

In this article