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.
- function bindGrid() {
- var filterContain = {
- cell: {
- showOperators: false,
- operator: "contains",
- suggestionOperator: "contains"
- }
- }
- var DataColumn =
- [
- { title: "<input id='chkAll' class='checkAllCls' type='checkbox'/>", width: "35px", template: "<input type='checkbox' class='check-box-inner' />", filterable: false },
- { field: "ID", title: "ID", width: "10%", filterable: filterContain },
- { field: "First_Name", title: "First Name", width: "10%", filterable: filterContain },
- { field: "Last_Name", title: "Last Name", width: "10%", filterable: filterContain },
- { field: "EmailID", title: "Email ID", width: "10%", filterable: filterContain },
- { field: "Mobile", title: "Mobile", width: "10%", filterable: filterContain },
- ];
-
-
- $("#grd").kendoGrid({
- selectable: "multiple",
- dataSource: {
- schema: {
- model: {
- fields: {
- ID: { type: "string" },
- First_Name: { type: "string" },
- Last_Name: { type: "string" },
- EmailID: { type: "string" },
- Mobile: { type: "string" },
- }
- }
- },
- pageSize: 100,
- },
- height: 800,
- filterable: {
- mode: "row"
- },
- groupable: false,
- scrollable: true,
- pageable: true,
- sortable: true,
- columns: DataColumn,
- });
-
- $("#grd tbody").on("click", "tr", function (e) {
- var rowElement = this;
- var row = $(rowElement);
- var grid = $("#grdC").getKendoGrid();
- if (row.hasClass("k-state-selected")) {
- row.removeClass('k-state-selected');
- row.find('[type=checkbox]').prop('checked', false);
- e.stopPropagation();
- } else {
- grid.select(row)
- row.find('[type=checkbox]').prop('checked', true);
- e.stopPropagation();
- }
- });
-
-
-
-
- $(".checkAllCls").on("click", function () {
- var ele = this;
- var state = $(ele).is(':checked');
- var grid = $('#grd').data('kendoGrid');
- if (state == true) {
- $('.check-box-inner').prop('checked', true).closest('tr').addClass('k-state-selected');
- }
- else {
- $('.check-box-inner').prop('checked', false).closest('tr').removeClass('k-state-selected');
- }
- });
- }
HTML code where you have to set the grid:
- <table>
- <tr>
- <td style="padding-right:18px">
- <div id="grd" class="k-content"></div>
- </td>
- </tr>
- </table>
Conclusion
In this blog, I have written about how to handle the click event of the inner checkboxes.