Make the Header Checkbox Indeterminate

Environment

Product Version	2022.2.621
Product	Progress® 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/kendo-ui/service/Products",
                  dataType: "jsonp"
                }
              },
              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>