Select Desect All Checkboxes from GridView Header Row Checkbox Using Javascript Asp.net C# VB.Net

By using client script selecting all check boxes in a GridView control is a most common task. Here i am trying to show an example for beginners how we can provide this functionality into our pages to enhance user experience. Here i am using a template column to add both header checkbox & rows checkbox in the GridView. When user click on the header checkbox then a javascript method will be invoked To select/deselect all checkboxes inside the gridview rows depends on header checkbox checked property. Like:

Select Deselect all checkboxes gridview javascript

First need to add a GridView control like below:

<b>List of suppliers:</b>

<asp:GridView runat="server" ID="gvEdit" DataKeyNames="ID" AutoGenerateColumns="false" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5">
    <Columns>

        <asp:TemplateField HeaderText="Select">
        <ItemTemplate><asp:CheckBox runat="server" ID="chk"/></ItemTemplate>
        <HeaderTemplate>
        <asp:CheckBox ID="chkboxSelectAll" runat="server" onclick="GridSelectAllColumn(this);" />
        </HeaderTemplate>
        </asp:TemplateField>

        <asp:BoundField DataField="Code" HeaderText="Code" ></asp:BoundField>
        <asp:BoundField DataField="Name" HeaderText="Name" ></asp:BoundField>
        <asp:BoundField DataField="Address" HeaderText="Address"></asp:BoundField>
        <asp:BoundField DataField="Contact" HeaderText="Contact no"></asp:BoundField>

    </Columns>
</asp:GridView>

Now need to add some sample Data under Page_load Event:
C# Code:

        if (!IsPostBack)
        {
            DataTable dtSupplier = new DataTable("Supplier");
            dtSupplier.Columns.Add(new DataColumn("ID", System.Type.GetType("System.UInt64")));
            dtSupplier.Columns.Add(new DataColumn("Code"));
            dtSupplier.Columns.Add(new DataColumn("Name"));
            dtSupplier.Columns.Add(new DataColumn("Address"));
            dtSupplier.Columns.Add(new DataColumn("Contact"));

            dtSupplier.Rows.Add(1,"st0001", "S.R. Steel","Uttara","0234657");
            dtSupplier.Rows.Add(2,"ir0039", "Shadesh builders","Khilkhet","348593");
            dtSupplier.Rows.Add(3,"cr0042", "Orchard confec.","Dhanmondi","90786");
            dtSupplier.Rows.Add(4,"er0078", "Windblow","Banani","23345");
            dtSupplier.Rows.Add(5,"bd0301", "Rahimkarim","Bashundhara","465566");
            gvEdit.DataSource = dtSupplier;
            gvEdit.DataBind();
        }

Note: Don’t forget to add “System.Data” namespace.

VB.Net Code:

        If Not IsPostBack Then
            Dim dtSupplier As DataTable = New DataTable("Supplier")
            dtSupplier.Columns.Add(New DataColumn("ID", System.Type.GetType("System.UInt64")))
            dtSupplier.Columns.Add(New DataColumn("Code"))
            dtSupplier.Columns.Add(New DataColumn("Name"))
            dtSupplier.Columns.Add(New DataColumn("Address"))
            dtSupplier.Columns.Add(New DataColumn("Contact"))

            dtSupplier.Rows.Add(1, "st0001", "S.R. Steel", "Uttara", "0234657")
            dtSupplier.Rows.Add(2, "ir0039", "Shadesh builders", "Khilkhet", "348593")
            dtSupplier.Rows.Add(3, "cr0042", "Orchard confec.", "Dhanmondi", "90786")
            dtSupplier.Rows.Add(4, "er0078", "Windblow", "Banani", "23345")
            dtSupplier.Rows.Add(5, "bd0301", "Rahimkarim", "Bashundhara", "465566")
            gvEdit.DataSource = dtSupplier
            gvEdit.DataBind()
        End If

Note: Don’t forget to add “System.Data” namespace.

Now add the Client Side Javascript Function to Select/Deselect all CHeckboxes:

<script type="text/javascript">
function GridSelectAllColumn(spanChk)
{
    var oItem = spanChk.children;
    var theBox = (spanChk.type == "checkbox") ? spanChk : spanChk.children.item[0]; xState = theBox.checked;
    elm = theBox.form.elements;

    for (i = 0; i < elm.length;i++) {
        if (elm[i].type === 'checkbox' && elm[i].checked != xState)
            elm[i].click();
    }
}
</script>

Hope now it will work perfectly. For further study you can try with JQuery 🙂

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, Gridview, Javascript, VB.Net
2 comments on “Select Desect All Checkboxes from GridView Header Row Checkbox Using Javascript Asp.net C# VB.Net
  1. Bahareh says:

    Thanks for sharing, it works like a charm!

  2. Anil says:

    Thanks for sharing..But I have two grids in page..by clicking on all check in DateGrid1 checkbox its also checking all for DataGrid2 also.

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*