Select/Un-Select All checkbox in Gridview Header & Vice Versa

Introduction

This has become a common task to implement select/un-select all child check boxes via a parent check box(in Header) and vice versa. This post is basically describing these common tasks in a precise way along with other related sub tasks.

NOTE: This mini article have been published on CodeProject.com and it is here to share the knowledge.

Background

Yesterday, I was assigned a task to add check boxes in a column of Data Grid for selection of concerned records/rows and further requirement was as below.                                

•      All child checkboxes will be checked/un-checked using a Parent checkbox(in Header).
•           Automatically check “parent checkbox”, based on all child boxes checked/unchecked.

Further during the implementation I faced a validation requirement of “Select at least one checkbox” before proceeding. So I have combined all these three(3) tasks in this post to help other users in future.

First of all I will start with the HTML content(aspx page). Let’s have a look below.

Using the code

HTML Content (.ASPX Page)

 <asp:TemplateColumn>
    <HeaderTemplate>
         <input id="chkAll" class="cbAll" onclick="javascript:SelectAllCheckboxes1(this);"           runat="server" type="checkbox" />                                        
   </HeaderTemplate>
         <ItemTemplate>
             <asp:CheckBox ID="rptCB" runat="server" CssClass="cbChild" /><br />         </ItemTemplate>
 </asp:TemplateColumn>  

Above I have placed a Template column in Data Grid's content, which contains two templates inside.

Header Template: which contains the "Select All" checkbox and by clicking on that all the child check boxes will be checked or unchecked.
Item Template: which contains the child checkbox which will be shown repeatedly in the Data Grid's column and if all child boxes of Grid will be checked/un-checked, than it will result in Selection/un-selection of "Select All" checkbox , which will be present in Grid's header.

As you can see, there is a javascript function being called on the Parent checkbox in the header template, So my next paragraph will be describing it and it's functionality.

Select/un-Select All Child Check Boxes (JavaScript)

       function SelectAllCheckboxes1(chk) {
          
            $('#<%=MyGrid.ClientID%>').find("input:checkbox").each(function () {
                if (this != chk) {
                    this.checked = chk.checked; 
                 }
                        });

        } 

The above function will iterate the Data Grid using Jqeury .each method and will select/un-select all the child checkboxes. The above function will be placed inside the script tag at the end of form tag and just before the body tag's ending
For Task two i.e. selection of Parent check box(Select All), in case all child checkboxes have been checked one by one, following piece of code will be used.

Select/Un-Selected Parent Check Box(JavaScript)

 $(".cbChild").change(function () {             
                  var all = $('.cbChild');                 
                  if (all.length === all.find(':checked').length) {
                      $(".cbAll").attr("checked", true);
                  } else {
                      $(".cbAll").attr("checked", false);
                  }
              }); 

The above function will get all the childboxes using its class attribute and based on the scenario will selection or un-select the parent check box. This function will be placed inside the script tag at the end of form tag and just before the body tag's ending.

Further for the validation i.e Task three, we can use the following java script function

Please Select at least one check box (JavaScript)

Following function can be called on the button, on which we would be performing the further proecessing based on selected checkbox. So the following function will restrict the user to at least select one record.
HTML Content and function both are place below for better understanding.

 function checkSelected(btn) {
              
            var flg;

            var gridView = document.getElementById("<%=MyGrid.ClientID %>");
            var checkBoxes = gridView.getElementsByTagName("input");
            for (var i = 0; i < checkBoxes.length; i++) {
                if (checkBoxes[i].type == "checkbox" && checkBoxes[i].checked) {
                    flg = true;
                    return;
                }
            }
            flg = false;

            if (!flg) {
                alert("Please select Record(s).");
                return false
            }
          
            return true;
        } 
  

Button Content

    <asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="Submit_Click"    OnClientClick="return checkSelected(this);" />  

Points of Interest
Its a 3 in 1 solution, which contains three mini tricks to save the time. These piece of codes are client side and hence makes the solution more optimized than the other available server side solutions.
At the end, I would be waiting and will appreciate any more advise/critic for improvement.

Hope it will help you. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)