articles

Home / DeveloperSection / Articles / Select All CheckBox from Header CheckBox

Select All CheckBox from Header CheckBox

Select All CheckBox from Header CheckBox

Anonymous User 17501 08-Sep-2012

Today, In this article, I have created a program that will allow you to Select/Deselect all the CheckBoxes of a GridView Row from the GridView Header CheckBox.

For performing this task, I have taken a GridView Control and bind it with the Data Source.

I have used ASP Template Field to Insert a CheckBox Control at the initial of every GridView row.

The following are the code that I have used to create a GridView with CheckBox in each of its rows and also in its Header.

Create the Following User Interface:

Select All CheckBox from Header CheckBox

Here is the JavaScript Code to which enables us to Check all CheckBoxes from GridView Header CheckBox.

<script type="text/javascript">

        function SelectheaderCheckboxes(headerchk)
        {  
            var gvcheck = document.getElementById('GridViewShowRecords');
            var i;
            //Condition to check header checkbox selected or not if that is true checked all checkboxes
            if (headerchk.checked) {
                for (i = 0; i < gvcheck.rows.length; i++)
                {
                    var inputs = gvcheck.rows[i].getElementsByTagName('input');
                    inputs[0].checked = true;
                }
            }
            //if condition fails uncheck all checkboxes in gridview
            else
            {
                for (i = 0; i < gvcheck.rows.length; i++)
                {
                    var inputs = gvcheck.rows[i].getElementsByTagName('input');
                    inputs[0].checked = false;
                }
            }
            Selectchildcheckboxes(headerchk);
        }
        //function to check header checkbox based on child checkboxes condition
        function Selectchildcheckboxes(header)
        {
            var ck = header;
            var count = 0;
            var gvcheck = document.getElementById('GridViewShowRecords');
            var headerchk = document.getElementById(header);
            var rowcount = gvcheck.rows.length;
            //By using this for loop we will count how many checkboxes has checked
            for (i = 1; i < gvcheck.rows.length; i++)
            {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
                if (inputs[0].checked)
                {
                    count++;
                }
            }
            //Condition to check all the checkboxes selected or not
            if (count == rowcount - 1) {
                headerchk.checked = true;
            }
            else
            {
                headerchk.checked = false;
            }
        }
</script>

 

Here is the final code of the .aspx page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowRecords.aspx.cs" Inherits="ShowRecords"

    Debug="true" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>List of All Records</title>
    <script type="text/javascript">
        function SelectheaderCheckboxes(headerchk)
        {  
            var gvcheck = document.getElementById('GridViewShowRecords');
            var i;
            //Condition to check header checkbox selected or not if that is true checked all checkboxes
            if (headerchk.checked) {
                for (i = 0; i < gvcheck.rows.length; i++)
                {
                    var inputs = gvcheck.rows[i].getElementsByTagName('input');
                    inputs[0].checked = true;
                }
            }
            //if condition fails uncheck all checkboxes in gridview
            else
            {
                for (i = 0; i < gvcheck.rows.length; i++)
                {
                    var inputs = gvcheck.rows[i].getElementsByTagName('input');
                    inputs[0].checked = false;
                }
            }
            Selectchildcheckboxes(headerchk);
        }
        //function to check header checkbox based on child checkboxes condition
        function Selectchildcheckboxes(header)
        {
            var ck = header;
            var count = 0;
            var gvcheck = document.getElementById('GridViewShowRecords');
            var headerchk = document.getElementById(header);
            var rowcount = gvcheck.rows.length;
            //By using this for loop we will count how many checkboxes has checked
            for (i = 1; i < gvcheck.rows.length; i++)
            {
                var inputs = gvcheck.rows[i].getElementsByTagName('input');
                if (inputs[0].checked)
                {
                    count++;
                }
            }
            //Condition to check all the checkboxes selected or not
            if (count == rowcount - 1) {
                headerchk.checked = true;
            }
            else
            {
                headerchk.checked = false;
            }
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin: 0 auto;" width="1100px">
        <table style="margin: 0 auto;" width="1100px">
            <tr>
                <td>
                    <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Georgia" Text="Check all CheckBoxes in GridView"></asp:Label>
                </td>
            </tr>
            <tr>
                <td bgcolor="#6699FF" align="center">
                    &nbsp;
                    <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Georgia" ForeColor="White"
                        Text="List of All Records"></asp:Label>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <asp:GridView ID="GridViewShowRecords" runat="server" BackColor="White" BorderColor="#DEDFDE"
                        BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableModelValidation="True"
                        ForeColor="Black" GridLines="Vertical" AutoGenerateColumns="false"
                        onrowdatabound="GridViewShowRecords_RowDataBound">
                        <AlternatingRowStyle BackColor="White" />
                        <FooterStyle BackColor="#CCCC99" />
                        <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                        <RowStyle BackColor="#F7F7DE" />
                        <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                        <Columns>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    <asp:CheckBox runat="server" ID="chkAll" onclick="SelectheaderCheckboxes(this)" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox runat="server" ID="chkMember" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    ID</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblUserID" runat="server" Text='<%#Bind("UserId") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtUserID" Text='<%#Bind("UserId") %>' runat="server" Width="20px"
                                        Enabled="False"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    FirstName</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblFirstName" runat="server" Text='<%#Bind("FName") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtFirstName" Text='<%#Bind("FName") %>' runat="server" Width="80px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    LastName</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblLastName" runat="server" Text='<%#Bind("LName") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtLastName" Text='<%#Bind("LName") %>' runat="server" Width="80px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    FatherName</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblFatherName" runat="server" Text='<%#Bind("FatherName") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtFatherName" Text='<%#Bind("FatherName") %>' runat="server" Width="100px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    Age</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblAge" runat="server" Text='<%#Bind("Age") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtAge" Text='<%#Bind("Age") %>' runat="server" Width="30px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    Address</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblAddress" runat="server" Text='<%#Bind("Address") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtAddress" Text='<%#Bind("Address") %>' runat="server" Width="150px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    Phone</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblPhone" runat="server" Text='<%#Bind("Phone") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtPhone" Text='<%#Bind("Phone") %>' runat="server" Width="80px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    Email</HeaderTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="lblEmail" runat="server" Text='<%#Bind("Email") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtEmail" Text='<%#Bind("Email") %>' runat="server" Width="120px"></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <hr style="border-color: #6699FF" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html> 

 Now, Code for .aspx.cs page: using System;


using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.IO;
public partial class ShowRecords : System.Web.UI.Page
 {
      protected void Page_Load(object sender, EventArgs e)
     {           if (!IsPostBack)
          {              //Binding the GridView
             BindGridViewShowRecords();
          }
     }
      private void BindGridViewShowRecords()
     {
          //Creating Connection and Binding the GridView
          connection.con = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString);
          connection.con.Open();
          string query = "select * from tblUserInfo";
          connection.da = new System.Data.SqlClient.SqlDataAdapter(query, connection.con);
          connection.bui = new SqlCommandBuilder(connection.da);
          connection.dt = new System.Data.DataTable();
          connection.da.Fill(connection.dt);
          GridViewShowRecords.DataSource = connection.dt;
          GridViewShowRecords.DataBind();      }
      protected void GridViewShowRecords_RowDataBound(object sender, GridViewRowEventArgs e)
     {
          if (e.Row.RowType == DataControlRowType.DataRow)
          {              CheckBox headerchk = (CheckBox)GridViewShowRecords.HeaderRow.FindControl("chkAll");
             CheckBox childchk = (CheckBox)e.Row.FindControl("chkMember");
             childchk.Attributes.Add("onclick", "javascript:Selectchildcheckboxes('" + headerchk.ClientID + "')");
          }
     }
 }

Don’t forget to Create SQLServer Connection. Here I have done this using web.config file. Simply add a tag <connectionStrings></connectionStrings> in your web.config file as follows:

<connectionStrings>

    <add name="MyConnectionString"connectionString="Data Source=.\mindstick;Initial Catalog=test_mindStick;User ID=sa;Password=mindstick;MultipleActiveResultSets=true"providerName="System.Data.SqlClient"/>
  </connectionStrings>

 

Select All CheckBox from Header CheckBox



Updated 02-Dec-2019
I am a content writter !

Leave Comment

Comments

Liked By