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

Make the Header Checkbox Indeterminate


Product Version 2022.2.621
Product Progress® Kendo UI® Grid for jQuery


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


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>

        function onChange(arg) {
          let grid = this,
              selectedRowsCount =,
              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 () {
            dataSource: {
              pageSize: 10,
              transport: {
                read:  {
                  url: "",
                  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"}]
In this article