Post
Ask Question

Select All CheckBoxes Inside GridView Using JavaScript In ASP.NET

Introduction 

  • We will learn how to select all the checkboxes at one time inside the Gridview using JavaScript.
  • Follow the below steps to achieve our requirement.
Step 1

Add the below code to our .aspx page.
  1. <asp:GridView ID="gvData" runat="server" AutoGenerateColumns="false" AllowPaging="true"    
  2. PageSize="10″ OnPageIndexChanging="gvData_PageIndexChanging" AlternatingRowStyle-BackColor="#FFDAB9″    
  3. HeaderStyle-BackColor="#FF8C00″ Width="800px" OnRowDataBound="gvData_RowDataBound">    
  4. <Columns>    
  5. <asp:BoundField DataField="id" HeaderText="id" />    
  6. <asp:BoundField DataField="message" HeaderText="Message" />    
  7. <asp:TemplateField>    
  8. <HeaderTemplate>    
  9. <asp:CheckBox ID="cbSelectAll" runat="server" Text="Select All" />    
  10. </HeaderTemplate>    
  11. <ItemTemplate>    
  12. <asp:CheckBox ID="cbSelectAll" runat="server" Checked=’<%# Convert.ToBoolean(Eval(“isapproved")) %>’    
  13. Text=’<%# Eval(“isapproved").ToString().Equals(“True") ? " Approved " : " Not Approved " %>’ />    
  14. </ItemTemplate>    
  15. </asp:TemplateField>    
  16. </Columns>    
  17. </asp:GridView>    
  18. <asp:Button ID="btnSave" runat="server" Text="save" OnClick="btnSave_Click" />   

Step 2

Add the below code to our .cs page.

  1. protected void gvData_RowDataBound(object sender, GridViewRowEventArgs e)  
  2. {  
  3.    if (e.Row.RowType == DataControlRowType.Header)  
  4.    {  
  5.    ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", 
  6.    "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");  
  7.    }  
  8. }  
  9.   
  10. protected void gvData_PageIndexChanging(object sender, GridViewPageEventArgs e)  
  11. {  
  12.    gvData.PageIndex = e.NewPageIndex;  
  13.    FillData();  
  14. }  

Step 3

Inside the script write the below code. 
  1. <script type="text/javascript">  
  2. function SelectAll(id)   
  3. {  
  4.     var grid = document.getElementById(“<%= gvData.ClientID %>");  
  5.     var cell;  
  6.     if (grid.rows.length > 0)   
  7.     {  
  8.         for (i = 1; i < grid.rows.length – 1; i++)   
  9.         {  
  10.         cell = grid.rows[i].cells[3];  
  11.             for (j = 0; j < cell.childNodes.length; j++)   
  12.             {  
  13.                 if (cell.childNodes[j].type == “checkbox")   
  14.                 {  
  15.                     cell.childNodes[j].checked = document.getElementById(id).checked;  
  16.                 }  
  17.             }  
  18.         }  
  19.     }  
  20. }  
  21. </script>  
Step 4

Click the save button and write the below code. 
  1. protected void btnSave_Click(object sender, EventArgs e)  
  2. {  
  3.     try  
  4.     {  
  5.         foreach (GridViewRow row in gvData.Rows)  
  6.         {  
  7.             if (row.RowType == DataControlRowType.DataRow)  
  8.                 {  
  9.                     CheckBox c = (CheckBox)row.FindControl(“cbSelectAll“);  
  10.                     bool cbValue = c.Checked;  
  11.                     string cid = row.Cells[0].Text;  
  12.                     //update query or do ur requirements here.  
  13.                     FillData();  
  14.                 }  
  15.         }  
  16.     }  
  17.     catch { }  
  18. }  
  19.   
  20. protected void FillData()  
  21. {  
  22.     //Ur code to bind data to GridView.  
  23. }  
In the above code, to catch the checked values of each checkbox, the below code is used.
  1. foreach (GridViewRow row in gvData.Rows)  
  2. {  
  3.     if (row.RowType == DataControlRowType.DataRow)  
  4.     {  
  5.         CheckBox c = (CheckBox)row.FindControl(“cbSelectAll“);  
  6.         bool cbValue = c.Checked;  
  7.     }  
  8. }