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

Add Model-Bound and Batch-Editable Checkbox Columns to the Grid

Environment

Product Progress® Kendo UI® Grid for jQuery

Description 

How can I implement a checkbox in the Grid which is bound to the model and which works as expected with editing and the batch=true setting?

Solution

The Grid acquires two modes—read and edit. Its read mode displays the text of the dataItems. When in edit mode, the Grid renders the appropriate editor and binds to its dataItem property value. This means that even though the Grid renders an editor as a template, it will still create the respective editor when in edit mode. As a result, you have to configure some settings programmatically.

  1. Manage the configuration of the columns. The editable setting is added to prevent the template cell from entering edit mode and generating an editor of its own.

    columns:[
        { field: "Discontinued", template: '<input type="checkbox" #= Discontinued ? \'checked="checked"\' : "" # class="chkbx" />', width: 110, editable: function(e){ return false; } }
    ]
    
  2. Handle the change event of the template checkbox.

    $("#grid .k-grid-content").on("change", "input.chkbx", function(e) {
        var grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem($(e.target).closest("tr"));
        // add the dirty flag to the cell
        $(e.target).closest("td").prepend("<span class='k-dirty'></span>");
    
        // use equals, not the set() method because set will trigger the change event of the data source and the grid will rebind
        dataItem.Discontinued = this.checked;
    
        // mark the item as dirty so it will be added to the next update request
        dataItem.dirty = true;
     });
    

The following example demonstrates the full implementation of the approach.

    <div id="grid"></div>
    <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
          dataSource = new kendo.data.DataSource({
            transport: {
              read:  {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
              },
              update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
              },
              destroy: {
                url: crudServiceBaseUrl + "/Products/Destroy",
                dataType: "jsonp"
              },
              create: {
                url: crudServiceBaseUrl + "/Products/Create",
                dataType: "jsonp"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                  return {models: kendo.stringify(options.models)};
                }
              }
            },
            batch: true,
            pageSize: 20,
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { editable: false, nullable: true },
                  ProductName: { validation: { required: true } },
                  UnitPrice: { type: "number", validation: { required: true, min: 1} },
                  Discontinued: { type: "boolean" },
                  UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                }
              }
            }
          });

      $("#grid").kendoGrid({
        dataSource: dataSource,
        filterable:true,
        pageable: true,
        height: 430,
        toolbar: ["create", "save", "cancel"],
        columns: [
          "ProductName",
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
          { field: "UnitsInStock", title: "Units In Stock", width: 110 },
          { field: "Discontinued", template: '<input type="checkbox" #= Discontinued ? \'checked="checked"\' : "" # class="chkbx k-checkbox k-checkbox-md k-rounded-md" />', width: 110, editable: function(e){ return false; } },
          { command: "destroy", title: "&nbsp;", width: 100 }],
        editable: true
      });

      $("#grid .k-grid-content").on("change", "input.chkbx", function(e) {
        var grid = $("#grid").data("kendoGrid"),
            dataItem = grid.dataItem($(e.target).closest("tr"));
        $(e.target).closest("td").prepend("<span class='k-dirty'></span>");
        dataItem.Discontinued = this.checked;
        dataItem.dirty = true;
      });
    </script>
    <style> 
        .k-grid-content td 
        { 
          position:relative; 
        } 
    </style>
In this article