Post
Ask Question

Kendo UI Grid With Select All Checkbox In Header

In this example, I will create a Kendo UI grid with multiple checkboxes and one checkbox in the header to check all the checkboxes inside the grid.

Below is the Angular code to bind the grid.
  1. function bindGrid() {  
  2.     var filterContain = {  
  3.         cell: {  
  4.             showOperators: false,  
  5.             operator: "contains",  
  6.             suggestionOperator: "contains"  
  7.         }  
  8.     }  
  9.     var DataColumn =  
  10.     [  
  11.                 { title: "<input id='chkAll' class='checkAllCls' type='checkbox'/>", width: "35px", template: "<input type='checkbox' class='check-box-inner' />", filterable: false },  
  12.                 { field: "ID", title: "ID", width: "10%", filterable: filterContain },  
  13.                 { field: "First_Name", title: "First Name", width: "10%", filterable: filterContain },  
  14.                 { field: "Last_Name", title: "Last Name", width: "10%", filterable: filterContain },  
  15.                 { field: "EmailID", title: "Email ID", width: "10%", filterable: filterContain },  
  16.                 { field: "Mobile", title: "Mobile", width: "10%", filterable: filterContain },  
  17.     ];  
  18.   
  19.   
  20.     $("#grd").kendoGrid({  
  21.         selectable: "multiple",  
  22.         dataSource: {  
  23.             schema: {  
  24.                 model: {  
  25.                     fields: {  
  26.                         ID: { type: "string" },  
  27.                         First_Name: { type: "string" },  
  28.                         Last_Name: { type: "string" },  
  29.                         EmailID: { type: "string" },  
  30.                         Mobile: { type: "string" },  
  31.                     }  
  32.                 }  
  33.             },  
  34.             pageSize: 100,  
  35.         },  
  36.         height: 800,  
  37.         filterable: {  
  38.             mode: "row"  
  39.         },  
  40.         groupable: false,  
  41.         scrollable: true,  
  42.         pageable: true,  
  43.         sortable: true,  
  44.         columns: DataColumn,  
  45.     });  
  46.   
  47.     $("#grd tbody").on("click", "tr", function (e) {  
  48.         var rowElement = this;  
  49.         var row = $(rowElement);  
  50.         var grid = $("#grdC").getKendoGrid();  
  51.         if (row.hasClass("k-state-selected")) {  
  52.             row.removeClass('k-state-selected');  
  53.             row.find('[type=checkbox]').prop('checked', false);  
  54.             e.stopPropagation();  
  55.         } else {  
  56.             grid.select(row)  
  57.             row.find('[type=checkbox]').prop('checked', true);  
  58.             e.stopPropagation();  
  59.         }  
  60.     });  
  61.   
  62.   
  63.   
  64.   
  65.     $(".checkAllCls").on("click", function () {  
  66.         var ele = this;  
  67.         var state = $(ele).is(':checked');  
  68.         var grid = $('#grd').data('kendoGrid');  
  69.         if (state == true) {  
  70.             $('.check-box-inner').prop('checked', true).closest('tr').addClass('k-state-selected');  
  71.         }  
  72.         else {  
  73.             $('.check-box-inner').prop('checked', false).closest('tr').removeClass('k-state-selected');  
  74.         }  
  75.     });  
  76. }  
HTML code where you have to set the grid:
  1. <table>  
  2. <tr>  
  3. <td style="padding-right:18px">  
  4. <div id="grd" class="k-content"></div>  
  5. </td>  
  6. </tr>  
  7. </table>   
Conclusion

In this blog, I have written about how to handle the click event of the inner checkboxes.