Skip to main content

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: "", width: "35px", template: "", 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.   
  2.   
  3. "padding-right:18px">  
  • "grd"
     class="k-content">
    •   
    •   
    •   
    •    
    Conclusion
    In this blog, I have written about how to handle the click event of the inner checkboxes.

    Comments

    Post a Comment

    Popular posts from this blog

    How to Impliment pagging in SQL queries using ROW_NUMBER

      Create  PROCEDURE dbo.GetPaggingOnProc (     @startRowIndex int,     @maximumRows int ) AS    select RowRank,Column1,Column2,Column3  FROM    (       select Column1,Column2,Column3  ,               ROW_NUMBER() OVER (ORDER BY SADShiftCtrl) AS RowRank        from tblTestABC     ) AS tblTestABCWithRowNumbers WHERE RowRank > @startRowIndex AND RowRank <= (@startRowIndex + @maximumRows)
    Post a Comment
    Read more

    Kendo UI DropDown With Multiple Check Boxes

    In this blog, I will demonstrate how to create a Multiple Selection DropDownList with the help of Kendo UI. This dropdown will allow you to select more than one item and will also show the number of checked items in a dropdown list. Ex. (2 items selected). There is an option to Select all checkboxes to check all items at a time and a  Search filter is also integrated with this dropdown. Background Well, first of all, I am using a hidden field where I can put all the checked value with comma separated. This hidden field is used for managing all checked and unchecked values and keeps the values checked when the user opens the dropdown again. Below is the bunch of code. function  bindddlMultiSkill()   {       $( "#ddlMultiSkill" ).kendoDropDownList({           name:  "skill" ,           dataTextField:...
    Post a Comment
    Read more

    (3).Prepare c# besics and advanced questions

    Question 1. What Is Attribute In C#? Answer : An attributes is a declarative tag that is used to convey information about the behaviors of various elements (classes, methods, assemblies, structures, enumerators, etc). it is access at compile time or run-time. Attributes are declare with a square brackets [] which is places above the elements. [Obsolete(“Don’t use Old method, please use New method”, true)] For example consider the bellow class. If we call the old method it will through error message. public class myClass {     [Obsolete("Don't use Old method, please use New method", true)]     public string Old() { return "Old"; }     public string New() { return "New"; } } myClass omyClass = new myClass(); omyClass.Old(); Question 2. Why Attributes Are Used? Answer : In a program the attributes are used for adding metadata, like compiler instruction or other information (comments, description, etc). C#. NET Inter...
    Post a Comment
    Read more