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

Select All CheckBox from Header CheckBox


ASP.Net ASP.Net 
Ratings:
0 Comment(s)
 11187  View(s)
Rate this:

Select all checkbox from header checkbox

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 initial of every GridView row.

Following are the code that I have used to create a GridView with CheckBox in every of its row and also in its Header.

Create Following User Interface:

Select All CheckBox from Header CheckBox

Here is the JavaScript Code to which enable 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


Don't want to miss updates? Please click the below button!

Follow MindStick