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

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

    Thanks for sharing, it works like a charm!

Leave a Reply

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