Edit this page

Implement Default Checkbox Selection in Grid as Initially Checked

Environment

Product Progress Kendo UI Grid
Operating System All
Browser All
Browser Version All

Description

How can I render everything as selected in the selectable column when the Grid loads?

Solution

Currently, the Grid does not support the setting of the checkbox default state to selected. However, you can still implement related scenarios.

  • To set the checked property to true, set it on the dataBound event.

    $("#grid tbody input:checkbox").prop("checked", true);
    
  • To select the checkboxes and the rows they belong to, trigger their click in the dataBound event.

    $("#grid tbody input:checkbox").trigger( "click" );
    

The following example demonstrates how to implement the suggested scenarios.

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

  <script>
    $(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,
        dataBound: onDataBound,
        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"}]
      });                  
    });

    function onDataBound(){                
      if (!$("#grid tbody input:checkbox").prop("checked")) {
       $("#grid tbody input:checkbox").trigger("click");
      }
    }
  </script>
</div>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy