Please disable your adblock and script blockers to view this page
 

Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery

Introduction: In this article I have explained How to check uncheck or select deselect all checkboxes on click of Select All checkbox in header in Asp.Net GridView using jQuery.

Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery

Description: Basically I have implemented the following features in gridview using jQuery.
  1. When the parent Select All checkbox in Header is checked, all child checkboxes in the column will get checked automatically.
  2. When the Select All checkbox is unchecked, all checkboxes in the column will get unchecked automatically.
  3. When all the checkboxes in the column is checked, the Select All checkbox in header will get checked automatically.
  4. When any of the checkbox in the column is unchecked, the Select All checkbox will get unchecked automatically.
Implementation: Let’s create a sample page for demonstration purpose.

HTML Source

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var chkAll = $('.header').click(function () {
                //Check header and item's checboxes on click of header checkbox
                chkItem.prop('checked', $(this).is(':checked'));
            });
            var chkItem = $(".item").click(function () {
        //If any of the item's checkbox is unchecked then also uncheck header's checkbox
                chkAll.prop('checked', chkItem.filter(':not(:checked)').length == 0);
            });
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="grdEmp" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>                         
                            <input type="checkbox" id="chkHeader" class="header" />
  <%-- OR <asp:CheckBox ID="chkHeader" runat="server" Text="All" CssClass="header" />--%>
                        </HeaderTemplate>
                        <ItemTemplate>                           
                            <input type="checkbox" id="chkItems" class="item" />
   <%--OR <asp:CheckBox ID="chkItems" runat="server" CssClass="item" />--%>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" />
                    <asp:BoundField HeaderText="Code" DataField="EmployeeCode" />
                    <asp:BoundField HeaderText="Age" DataField="Age" />
                </Columns>
                <EditRowStyle BackColor="#2461BF" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#EFF3FB" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#F5F7FB" />
                <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                <SortedDescendingCellStyle BackColor="#E9EBEF" />
                <SortedDescendingHeaderStyle BackColor="#4870BE" />
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Asp.Net C# Code 

using System.Data;

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridview();
        }
    }
    protected void BindGridview()
    {
        DataTable dt = new DataTable();
        //Add Columns to datatable
        dt.Columns.Add("EmployeeId", typeof(Int32));
        dt.Columns.Add("EmployeeName", typeof(string));
        dt.Columns.Add("EmployeeCode", typeof(string));
        dt.Columns.Add("Age", typeof(Int32));
        //Adding rows and data
        dt.Rows.Add(1, "Ajay", "EMP0001",22);
        dt.Rows.Add(2, "Irfan", " EMP0002",21);
        dt.Rows.Add(3, "Hrithik", " EMP0003",24);
        dt.Rows.Add(4, "Ranbir", " EMP0004",26);
        dt.Rows.Add(5, "Salman", " EMP0005",25);       
        //Bind datatable to gridview
        grdEmp.DataSource = dt;
        grdEmp.DataBind();
    }

Asp.Net VB Code 

Imports System.Data

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindGridview()
        End If
    End Sub
    Protected Sub BindGridview()
        Dim dt As New DataTable()
        'Add Columns to datatable
        dt.Columns.Add("EmployeeId", GetType(Int32))
        dt.Columns.Add("EmployeeName", GetType(String))
        dt.Columns.Add("EmployeeCode", GetType(String))
        dt.Columns.Add("Age", GetType(Int32))
        'Adding rows and data
        dt.Rows.Add(1, "Ajay", "EMP0001", 22)
        dt.Rows.Add(2, "Irfan", " EMP0002", 21)
        dt.Rows.Add(3, "Hrithik", " EMP0003", 24)
        dt.Rows.Add(4, "Ranbir", " EMP0004", 26)
        dt.Rows.Add(5, "Salman", " EMP0005", 25)
        'Bind datatable to gridview
        grdEmp.DataSource = dt
        grdEmp.DataBind()
    End Sub

 Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.        
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon