Sortable GridView using jQuery’s TableSorter

Introduction

This blog post explains how to use jQuery’s plugin Tablesorter to implement client side sorting in ASP.Net Gridview. This comes in handy especially when object data source is used with grid view as gridview does not provide sorting out of the box

Implementation

To implement TableSorter, the rendered table should have THEAD in the markup. Gridview does not provide this by default but we could achieve it either by setting appropriate properties or by using a CSS friendly control adapter. We will do it by using the former method.

Sample

You could have a look at it online here http://ponnu.net/TableSorter

Using the code

We should get the table with THEAD tags for the gridview to implement the sorting. So, lets do that

1. protected void Page_Load(object sender, EventArgs e)
2.     {
3.         if (this.gvEmployees.Rows.Count > 0)
4.         {
5.             gvEmployees.UseAccessibleHeader = true;
6.             gvEmployees.HeaderRow.TableSection = TableRowSection.TableHeader;
7.             gvEmployees.FooterRow.TableSection = TableRowSection.TableFooter;
8.         }
9.     }

If you are using grid view in update panel and binding it in a call back, then it’s better to put it in gridview’s databound event,

1. protected void gvEmployees_DataBound(object sender, EventArgs e)
2.     {
3.         if (this.gvEmployees.Rows.Count > 0)
4.         {
5.             gvEmployees.UseAccessibleHeader = true;
6.             gvEmployees.HeaderRow.TableSection = TableRowSection.TableHeader;
7.             gvEmployees.FooterRow.TableSection = TableRowSection.TableFooter;
8.         }
9.     }

Now download and include the jQuery and TableSorter js files as follows

1. <script type=“text/javascript” src=“scripts/jquery-latest.js”></script>
2. <script type=“text/javascript” src=“scripts/jquery.tablesorter.js”></script>

Initialize the table for sorting when document is ready using the below code,

1. $(document).ready(function()
2. {
3.     $(“#gvEmployees”).tablesorter();
4. });

If you are using update panel, you need to consider using pageLoad function(javascript)

1. function pageLoad(sender, args)
2. {
3.     $(“#gvEmployees”).tablesorter();
4. }

At this point the sorting should work on client side, Now you would want to set ascending and descending icons for grid headers. You could easily do this by defining these styles in your style sheet.

1. .headerSortUp
2. {
3.     background-position:top;
4.     background-repeat: no-repeat;
5.     background-image: url(../images/icons/sort_up.gif);
6.     background-color: #e9e7d7;
7. }
8. .headerSortDown
9. {
10.     background-position:top;
11.     background-repeat: no-repeat;
12.     background-image: url(../images/icons/sort_down.gif);
13.     background-color: #e9e7d7;
14. }

Or you could use the styles that comes with Tablesorter as follows, just set the gridView cssclassname to tablesorter

gvEmployees.CssClass = “tablesorter”;

and include the stylesheet as follows

Tablesorter provides lots of config options, here are few important ones,

sortList: [0, 1] — This instructs to sort by index 0 column in descending order.

dateFormat: “uk” — if your format is dd/MM/yyyy, it does not seem to work by default for this format.

debug: true — this option provides you information like how much time it took and how(what type) it considered the columns.

1. $(“#gvEmployees”).tablesorter(
2. {
3.     debug: true, //provides debugging information
4.     sortList: [[0, 1]], //sorts 0th column by descending order
5.     dateFormat: “uk”, //sets the date format to dd/MM/yyyy
6. });

Now some interesting things, if you have columns that are formatted differently like having a thousand separator. We could use a customParser in this scenario, otherwise the data would be considered string and the sorting would not work as expected.

We should define a customParser with an id and then assign it to a column while initializing tablesorter.

1. //define a parser
2. $.tablesorter.addParser(
3. {
4.     // set a unique id
5.     id: ‘formattedNumbers’,
6.     is: function(s)
7.     {
8.         // return false so this parser is not auto detected
9.         return false;
10.     },
11.  
12.     format: function(s)
13.     {
14.         // format your data for normalization
15.         return s.replace(/,/g, ”); //removes comma separator from formatted numbers
16.     },
17.     // set type, either numeric or text
18.     type: ‘numeric’
19. });
20.  
21. //initialize table for sorting
22. $(“#gvEmployees”).tablesorter(
23. {
24.     headers:
25.     {
26.         6: { sorter: ‘formattedNumbers’ }
27.     }
28. }) 

There might be templated columns and checkbox bound fields in the gridview and if we need to do sorting for those columns, we could do so by using textExtraction. textExtraction is similar to customParser but this applies to the whole table and gets node instead of a string for processing. Here is some code that will process templated text columns and checkbox bound columns.

1. //define a function for extracting text from node
2. function extractValue(node)
3. {
4.     var children = node.childNodes[0].childNodes.length
5.    
6.     if (children == 0) //boundTextField or a templateColumn
7.     {
8.         if (node.childNodes[0].nodeType == 3)//boundTextField
9.         {
10.             return node.childNodes[0].data;
11.         }
12.         else //template column
13.         {
14.             var type = node.childNodes[0].type
15.             switch (type) {
16.                 case “checkbox”:
17.                     return node.childNodes[0].checked.toString();
18.  
19.                 case “radio”:
20.                     return node.childNodes[0].checked.toString();
21.  
22.                 case “text”:
23.                     return node.childNodes[0].value;
24.                    
25.                 default: return “”
26.             }
27.         }
28.     }
29.     else //boundCheckboxColumn or a templateLabelColumn
30.     {
31.         if (node.childNodes[0].childNodes[0].nodeType == 3)
32.         {
33.             return node.childNodes[0].childNodes[0].data;
34.         }
35.         else
36.         {
37.             return node.childNodes[0].childNodes[0].checked.toString();
38.         }
39.     }
40. }
41.  
42. $(“#gvEmployees”).tablesorter(
43. {
44.     textExtraction: extractValue
45. }); 

This covers most of things that one would do in gridview. The download contains all the above mentioned code.

Points of Interest

The Tablesorter is very good for the kind of functionality it provides with so much less code & effort. I am sure more and more people would be interested in this and would be using this as Microsoft recently announced it’s support to jQuery

It’s very simple to create an extended gridview control built with these functionalities.

You could download the sourcecode for sample from here Download 

Ponnu