Select Desect All Checkboxes from GridView Header Row Checkbox Using Javascript 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">

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

        <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>


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;

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
        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)

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

Download Code Example C#        Download Code Example VB.Net

2 thoughts on “Select Desect All Checkboxes from GridView Header Row Checkbox Using Javascript C# VB.Net

  • May 31, 2015 at 11:29 am

    Thanks for sharing, it works like a charm!

  • May 31, 2017 at 1:07 pm

    Thanks for sharing..But I have two grids in 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