SIVANANDA REDDY GANGIREDDY: Gridview header checkbox select and deselect all rows using client side JavaScript and server side C#

Introduction

Adding checkbox in gridview header template and select/deselect all rows is a common requirement in most of the asp.net projects and frequently asked questions also. Here I will explain how to add checkbox in header template of gridview and select/deselect all rows using client side javascript and server side code.

Add Checkbox in Gridview header template

Create the asp.net project and drag the gridview control then format as likes below.

<asp:GridView ID="GridVwHeaderChckbox" runat="server" AutoGenerateColumns="False"
                Font-Names="Verdana" PageSize="5" Width="55%" BorderColor="#CCCCCC" BorderStyle="Solid"
                BorderWidth="1px">
                <AlternatingRowStyle BackColor="#BFE4FF" />
                <PagerStyle BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" />
                <HeaderStyle Height="30px" BackColor="#6DC2FF" Font-Size="15px" BorderColor="#CCCCCC"
                    BorderStyle="Solid" BorderWidth="1px" />
                <RowStyle Height="20px" Font-Size="13px" BorderColor="#CCCCCC" BorderStyle="Solid"
                    BorderWidth="1px" />
                <Columns>
                    <asp:BoundField DataField="Emp_Name" HeaderText="Employee Name" HeaderStyle-Width="150px" />
                    <asp:BoundField DataField="Emp_job" HeaderText="Job title" HeaderStyle-Width="150px" />
                    <asp:BoundField DataField="Emp_Dep" HeaderText="Department" HeaderStyle-Width="150px" />
                    <asp:TemplateField ItemStyle-Width="40px">
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkboxSelectAll" runat="server" onclick="CheckAllEmp(this);" />
                        </HeaderTemplate>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <ItemTemplate>
                            <asp:CheckBox ID="chkEmp" runat="server"></asp:CheckBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

Using HeaderTemplate of gridview I had added checkbox and also added in Itemtemplate of same column.

Select and deselect using Client side

I’m loading the few sample employee records in gridview to select/deselect all rows. Below javascript CheckAllEmp function will do select and deselect when check and uncheck in header checkbox. Call this function in gridview headertemplate, checkbox onclick event as shown above.

<script type="text/javascript" language="javascript">
        function CheckAllEmp(Checkbox) {
            var GridVwHeaderChckbox = document.getElementById("<%=GridVwHeaderChckbox.ClientID %>");
            for (i = 1; i < GridVwHeaderChckbox.rows.length; i++) {
                GridVwHeaderChckbox.rows[i].cells[3].getElementsByTagName("INPUT")[0].checked = Checkbox.checked;
            }
        }
    </script>

Above javascript code will get gridview client id and loop the each row and get the checkbox id which is available in itemTemplate and make it select/deselect rows. This is the one of the way using client side script.

Select and deselect using Server side

Same functionality we can able to do with server side also. To do this make the changes in HeaderTemplate as like below.

<asp:TemplateField ItemStyle-Width="40px">
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" OnCheckedChanged="chkboxSelectAll_CheckedChanged" />
                        </HeaderTemplate>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <ItemTemplate>
                            <asp:CheckBox ID="chkEmp" runat="server"></asp:CheckBox>
                        </ItemTemplate>
                    </asp:TemplateField>

Make it autopostback as true and create OnCheckedChanged event in checkbox and add the below code in chkboxSelectAll_CheckedChanged event in code behind part.

protected void chkboxSelectAll_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox ChkBoxHeader = (CheckBox)GridVwHeaderChckboxSrvr.HeaderRow.FindControl("chkboxSelectAll");
            foreach (GridViewRow row in GridVwHeaderChckboxSrvr.Rows)
            {
                CheckBox ChkBoxRows = (CheckBox)row.FindControl("chkEmp");
                if (ChkBoxHeader.Checked == true)
                {
                    ChkBoxRows.Checked = true;
                }
                else
                {
                    ChkBoxRows.Checked = false;
                }
            }
        }

Above checked changed event will get the header checkbox id and if header checkbox is checked then find all rows checkbox id and make it all select else deselect all rows

I have attached sample code for this. Thank you for reading this article and hope you enjoyed this article. Please provide your feedback and suggestions.