New to Kendo UI for jQueryStart a free 30-day trial

Make the Header Checkbox Indeterminate

Environment

Product Version2022.2.621
ProductProgress® Kendo UI® Grid for jQuery

Description

How can I make the master checkbox in the Grid header appear as indeterminate?

Solution

Utilize the change event of the Grid and find if the checked checkboxes are more than zero but less than all available checkboxes on the page. If so, use the jQuery.prop() method to change the status of the master checkbox.

The following example demonstrates how to implement indeterminate checkboxes.

      <div id="grid"></div>

      <script>
        function onChange(arg) {
          let grid = this,
              selectedRowsCount = grid.select().length,
              pageSize = grid.dataSource.pageSize(),
              headerCheckbox = grid.thead.find(".k-checkbox");

          if(selectedRowsCount > 0 && selectedRowsCount < pageSize){
            headerCheckbox.prop("indeterminate", true);
          } else{
            headerCheckbox.prop("indeterminate", false);
          }
        }

        $(document).ready(function () {
          $("#grid").kendoGrid({
            dataSource: {
              pageSize: 10,
              transport: {
                read:  {
                  url: "https://demos.telerik.com/service/v2/core/Products"
                }
              },
              schema: {
                model: {
                  id: "ProductID"
                }
              }
            },
            pageable: true,
            scrollable: false,
            persistSelection: true,
            sortable: true,
            change: onChange,
            columns: [
              { selectable: true, width: "50px" },
              { field:"ProductName", title: "Product Name" },
              { field: "UnitPrice", title:"Unit Price", format: "{0:c}"},
              { field: "UnitsInStock", title:"Units In Stock"},
              { field: "Discontinued"}]
          });
        });
      </script>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support