Using jQuery with CheckBox and ASP.NET GridView

Posted by: Suprotim Agarwal , on 3/3/2011, in Category jQuery and ASP.NET
Views: 214263
Abstract: In this article, we will create an ASP.NET GridView which contains a Checkbox column. We will then access all the checked rows of the GridView and calculate the Sum of a column value and display it to the user.

It’s very common to use client script like jQuery to perform actions on the ASP.NET GridView. I have written articles in the past that shows how to use jQuery with controls like the Checkbox inside a GridView.

In this article, we will create an ASP.NET GridView which contains a Checkbox column. We will then access all the checked rows of the GridView and calculate the Sum of the values of a column and display it to the user. Sounds fun? Let’s get started!

Note: If you are using jQuery with ASP.NET Controls, check out my EBook called 51 Recipes with jQuery and ASP.NET Controls.

Open Visual Studio 2010 > Create an ASP.NET site. In the code behind of the Default.aspx page, add the following class which represents a hosting plan:

Now add a GridView control to the aspx page as shown below:

Let us now bind this GridView with the custom Hosting class we created above:

Your GridView should look similar to the following:

All set! It’s time for some jQuery magic now. What we will do is calculate the sum of the ‘AddOn Cost’ column for only those rows that are checked. Use the following jQuery code:

Let us understand this code step by step:

When a checkbox is clicked, we invoke a function called calculateSum() and pass in the column index 4. Note that column numbering starts at one, not at zero. Hence the 4th column index in our example is ‘AddOn Cost’

We then use a selector as shown below, to get only those rows which are checked and return a single column with the specified numeric index, in our case 4. Using the nth-child with the index lets me iterate through each cell using children(). You may also add the GridView ID or the cssclass to the selector if you have more than one GridView’s on the page.

$("tr:has(:checkbox:checked) td:nth-child(" + colidx + ")")

The entire calculateSum() function looks as shown below:

Once we have our selector, we use .each() to iterate over this jQuery object and add the column value to the ‘total’ variable. The parseFloat( ) parses strings into numbers.

The output is as shown below:

Note: If you are using the GridView with paging, then handling the sum of all checkboxes across all pages can be tricky. You will have to use ViewState and track all the rowID's and the column values in an array or something similar.

Alternatively, you can also use a hidden text field and every time you check a box, use jQuery to write the 'ID' of the row and 'AddOn Cost' to the hidden field (probably using a separator). Then every time you paginate, read and update these values to account for the newly selected items or deselected ones. Although it's not the same, I have written an article on how to Add TextBox values to a Hidden field using jQuery. This should give you a Head Start!

I hope you liked this article and I thank you for viewing it. See a Live Demo

The entire source code of this article can be downloaded over here

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Sandeep Kangude on Sunday, June 5, 2011 11:42 AM
Nice article. JQuery is an outstanding way to work with web applications. Keep posting such good articles.
Comment posted by Hamid on Friday, June 17, 2011 12:28 AM
Agrawal please explain what happened if content delivery network is down .? What is the impact on the application?
Comment posted by Suprotim Agarwal on Friday, June 17, 2011 3:06 AM
Hamid: Use a Fallback mechanism as shown below:

if (typeof jQuery == 'undefined'){    document.write(unescape("%3Cscript src='/Scripts/jquery-1.6.2.min.js' type='text/javascript'%3E%3C/script%3E"));}</script>
Comment posted by dhirendra on Thursday, September 1, 2011 11:45 PM
Very good and self explanatory article....
if i want xml file for database in gridview so what is the code for that?
Comment posted by Dorababu on Tuesday, September 20, 2011 5:40 AM
if i would like to display the sum in grid view footer then how can i change your code as per my requirement i would like to display the amount in grid view footer can you help me on this
Comment posted by Vinod on Wednesday, February 15, 2012 11:39 PM
Nice example....
Comment posted by Vinod on Thursday, February 16, 2012 5:50 AM
Nice example....
Comment posted by lithium6941 on Monday, March 19, 2012 6:17 PM
Nice article.  Thanks for posting that.
Comment posted by lithium6941 on Monday, March 19, 2012 6:17 PM
Nice article.  Thanks for posting that.
Comment posted by Asif Aslam on Saturday, November 24, 2012 9:36 AM
Hi, Mr.Suprotim Agarwal
i am very thankful to you for this post.... it guide me very well... thx...
Comment posted by Dave on Monday, January 28, 2013 6:36 AM
Nice article. Very well done! One question though, did you really mean to have the ID column titled "Employee ID"? It doesn't make sense given this example.
Comment posted by balu on Monday, August 12, 2013 8:24 AM
it is very useful article......
Comment posted by maziyar on Sunday, February 16, 2014 10:56 PM
thank you mr,suprotim from your article.
Comment posted by Vishal Kumar Saxena on Sunday, June 22, 2014 7:54 AM
How we Bind Checkbox inside gridview using JQuery.