Select Deselect GridView Rows using a Checkbox in JQuery

26. January 2012 00:04 by Shahid in JQuery, How To  //  Tags:   //   Comments (1)

Many websites require functionality for letting their site visitors to select and deselect all the rows in GridView using a single checkbox normally available in the header row. You may have seen the examples of such functionality in Yahoo Mail or Hotmail inbox where you can select all the emails by clicking the single Checkbox on top of the email's grid. In this tutorial, I will show you how you can provide this functionality in ASP.NET GridView control using few lines of JQuery code.

To get started, create an ASP.NET website and drag a GridView control on the page. For this tutorial, I am using ID, Name and Salary columns, so I added three bound fields and one TemplateField that will contain the checkboxes in the header as well as in the individual row. Following is the complete HTML source for the GridView control.

   1:  <asp:GridView ID="GridView1" runat="server" Font-Size="10pt" 
   2:     Font-Names="Verdana" CellPadding="4" Width="400px" GridLines="None" 
   3:     ForeColor="#333333" AutoGenerateColumns="false">
   4:     <RowStyle BackColor="#EFF3FB" />
   5:     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
   6:     <AlternatingRowStyle BackColor="White" />
   7:     <Columns>
   8:        <asp:TemplateField>
   9:           <HeaderTemplate>
  10:              <asp:CheckBox ID="chkHeader" runat="server" />
  11:           </HeaderTemplate>
  12:           <ItemTemplate>
  13:              <asp:CheckBox ID="chkRow" runat="server" />
  14:           </ItemTemplate>
  15:        </asp:TemplateField>
  16:        <asp:BoundField DataField="ID" HeaderText="ID" />
  17:        <asp:BoundField DataField="Name" HeaderText="Name" />
  18:        <asp:BoundField DataField="Salary" HeaderText="Salary" />
  19:     </Columns>
  20:  </asp:GridView>

To keep this tutorial simple, I am not connecting my GridView with the database and showing some sample data in the GridView. Add the following code in the Page Load event of the page to add few rows of data.

   1:  protected void Page_Load(object sender, EventArgs e)
   2:  {
   3:     if (!Page.IsPostBack)
   4:     {
   5:        LoadData();
   6:     }
   7:  }
   9:  private void LoadData()
  10:  {
  11:     DataTable table = new DataTable();
  12:     table.Columns.Add("ID", typeof(int));
  13:     table.Columns.Add("Name", typeof(string));
  14:     table.Columns.Add("Salary", typeof(decimal));
  16:     for (int i = 1; i < 8; i++)
  17:     {
  18:        DataRow row = table.NewRow();
  19:        row["ID"] = i;
  20:        row["Name"] = "Name " + i;
  21:        row["Salary"] = 10000 * i;
  22:        table.Rows.Add(row);
  23:     }
  25:     GridView1.DataSource = table;
  26:     GridView1.DataBind(); 
  27:  }

Now we need only few lines of JQuery code to provide the functionality of selecting or deselecting rows using the checkbox added in the header of the GridView. Add the JQuery script file reference in the head element of the page.

   1:  <script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>

Add the following JavaScript block inside the head element of the page.

   1:  <script type="text/javascript">
   2:     $(document).ready(function() {
   4:        var headerCheckbox = $('#GridView1 > tbody > tr > th > input:checkbox');
   6: {
   7:           var headerChecked = $(this).attr('checked');
   8:           var rowCheckboxes = $('#GridView1 > tbody > tr > td > input:checkbox');
   9:           rowCheckboxes.attr('checked', headerChecked);
  10:        }); 
  12:     }); 
  13:  </script>

The above code is using typical JQuery ready function to add some JQuery statements or code. The first line access the checkbox available in the header row of the GridView using JQuery selector.

var headerCheckbox = $('#GridView1 > tbody > tr > th > input:checkbox');

Once we have the reference of header checkbox, we are using the click event function handler that will allow us to run some code every time user will click the header checkbox. Inside click event function handler, the first line stores the current state of the header checkbox in a headerChecked variable. The second line gets the reference of all the checkboxes in all the rows in GridView and then set their state to the same state as the header checkbox using JQuery attr function.

   1: {
   2:     var headerChecked = $(this).attr('checked');
   3:     var rowCheckboxes = $('#GridView1 > tbody > tr > td > input:checkbox');
   4:     rowCheckboxes.attr('checked', headerChecked);
   5:  });

Build and test your web page and click the checkbox in the header row, and you will be able to select or deselect all checkboxes in GridView rows.


Share this post :

Comments (1) -

net grid
net grid
7/20/2012 10:07:15 PM #

How I can show data in the GridView without connecting GridView with the database.

Pingbacks and trackbacks (1)+

Add comment

  • Comment
  • Preview

About Me

Me name is Shahid Riaz Bhatti and I am from Lahore, Pakistan. I am Microsoft Certified Application developer and have been developing differnt kinds of Application, webs, Utilities, Custome Controls &APIs using Microsof Platerforms since 2004. 

My Skill set includes but not limited to

ASP.Net, C#, VB.Net, Javascript, JQuery, VB Script, AJAX, ADO.Net, HTML, DHTML, MOSS 2007/MOSS 2010, Sharepoint Object Model, Web Parts for Sharepoint and MOSS, Workflows, WCF, Collaborative Application Markup Language (CAML), XML, Win Forms, Web Forms, Web Services, Microsoft .Net Product Suits, SQL Server, MS Access, PHP, Visio, Infragistic Controls on both server and Client Side, Dev Express Controls on both server and Client Side, Development of Custom Controls Development of API's

Beside these, I have hands on experience of using different Web services exposed by Twitter, google, yahoo, LinkedIn, facebook etc

I can be reach on the following Email Address:



Comment RSS