Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET

Sortable GridView using jQuery's TableSorter

Rate me:
Please Sign up or sign in to vote.
4.82/5 (12 votes)
8 Oct 2008CPOL3 min read 131.2K   5K   63   16
A client-side sortable GridView using jQuery's plugin table sorter.

Introduction

This article explains how to use jQuery's plug-in Tablesorter to implement client-side sorting in an ASP.NET GridView. This comes in handy especially when an ObjectDataSource is used with a GridView 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 the appropriate properties or by using a CSS friendly control adapter. We will do it by using the former method.

Sample

Client Side Sort in GridView using jQuery - Table Sorter

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

Using the code

We should get a table with THEAD tags for the GridView to implement the sorting. So, let's do that:

C#
protected void Page_Load(object sender, EventArgs e)
{ 
    if (this.gvEmployees.Rows.Count > 0)
    {
        gvEmployees.UseAccessibleHeader = true;
        gvEmployees.HeaderRow.TableSection = TableRowSection.TableHeader;
        gvEmployees.FooterRow.TableSection = TableRowSection.TableFooter;
    }
}

If you are using the GridView in an UpdatePanel and binding it in a callback, then it's better to put it in the GridView's DataBound event:

C#
protected void gvEmployees_DataBound(object sender, EventArgs e)
{ 
    if (this.gvEmployees.Rows.Count > 0)
    {
        gvEmployees.UseAccessibleHeader = true;
        gvEmployees.HeaderRow.TableSection = TableRowSection.TableHeader;
        gvEmployees.FooterRow.TableSection = TableRowSection.TableFooter;
    }
}

Now, download and include the jQuery and TableSorter JavaScript files as follows:

HTML
<script type="text/javascript" src="scripts/jquery-latest.js"></script>
<script type="text/javascript" src="scripts/jquery.tablesorter.js"></script>

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

JavaScript
$(document).ready(function() 
{ 
$("#gvEmployees").tablesorter(); 
}); 

If you are using an UpdatePanel, you need to consider using the PageLoad function (JavaScript):

JavaScript
$("#gvEmployees").tablesorter(); 

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

CSS
.headerSortUp
{
background-position:top;
background-repeat: no-repeat;
background-image: url(../images/icons/sort_up.gif);
background-color: #e9e7d7;
}
.headerSortDown
{
background-position:top;
background-repeat: no-repeat;
background-image: url(../images/icons/sort_down.gif);
background-color: #e9e7d7;
}

Or, you could use the styles that come with the Tablesorter as follows. Just set the GridView CSS class name to Tablesorter and include the stylesheet as follows:

C#
gvEmployees.CssClass = "tablesorter";

In the HTML:

HTML
<link rel="stylesheet" type="text/css" href="themes/green/style.css" />

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

  • sortList: [0, 1] -- This instructs to sort by the 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 options provides you information like how much time it took and how (what type) it considered the columns.
JavaScript
$("#gvEmployees").tablesorter(
{
debug: true, //provides debugging information
sortList: [[0, 1]], //sorts 0th column by descending order
dateFormat: "uk", //sets the date format to dd/MM/yyyy 
});

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

We should define a custom parser with an ID and then assign it to a column while initializing the Tablesorter.

JavaScript
//define a parser
$.tablesorter.addParser(
{
// set a unique id 
id: 'formattedNumbers',
is: function(s) 
{
// return false so this parser is not auto detected 
return false;
},
format: function(s) 
{
// format your data for normalization
return s.replace(/,/g, '');
//removes comma separator from formatted numbers
},
// set type, either numeric or text 
type: 'numeric'
});
//initialize table for sorting
$("#gvEmployees").tablesorter(
{
headers:
{
6: { sorter: 'formattedNumbers' }
}
});

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 text extraction. Text extraction is similar to custom parser, but this applies to the whole table and gets a node instead of a string for processing. Here is some code that will process templated text columns and checkbox bound columns:

JavaScript
//define a function for extracting text from node
function extractValue(node)
{ 
    var children = node.childNodes[0].childNodes.length
    if (children == 0) //boundTextField or a templateColumn
    {
        if (node.childNodes[0].nodeType == 3)//boundTextField
        {
            return node.childNodes[0].data;
        }
        else //template column
        {
            var type = node.childNodes[0].type
            switch (type) 
            {
                case "checkbox":
                    return node.childNodes[0].checked.toString()
                case "radio":
                    return node.childNodes[0].checked.toString()
                case "text":
                    return node.childNodes[0].value
                default: return ""
            }
        }
    }
    else //boundCheckboxColumn or a templateLabelColumn
    {
        if (node.childNodes[0].childNodes[0].nodeType == 3)
        {
            return node.childNodes[0].childNodes[0].data; 
        }
        else
        {
            return node.childNodes[0].childNodes[0].checked.toString();
        }
    }
}
$("#gvEmployees").tablesorter(
{ 
    textExtraction: extractValue
});

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

Lastly, I would like to thank John Resig and Christian Bach for providing such a wonderful framework.

Points of interest

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

It's very simple to create an extended GridView control built with these functionalities. I will leave that to the user.

Feedback

This is my first article in CodeProject and I would appreciate everyone's feedback.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer GMS Ltd.
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionLive Demo does not work Pin
Member 891123014-Nov-12 21:10
Member 891123014-Nov-12 21:10 
Questionupdatepanel Pin
ssanp19-Apr-12 11:10
ssanp19-Apr-12 11:10 
GeneralTemplate Columns with hyperlinks and they don't parse correctly in Firefox Pin
Member 223319511-Dec-09 8:29
Member 223319511-Dec-09 8:29 
GeneralRe: Template Columns with hyperlinks and they don't parse correctly in Firefox Pin
Member 223319511-Dec-09 8:52
Member 223319511-Dec-09 8:52 
GeneralJQuery Tablesorter does not seem to work with Master Pages Pin
svrevm13-Sep-09 16:34
svrevm13-Sep-09 16:34 
I tried this in an application that has Master Pages and it did not work. All the JQuery files are referenced in the section of the Master Page.

Then I tried referenceing the JQuery files directly in the content page and the tablesorter still did not work.

In one of the files, I directly referenced the JQuery files, removed reference to the Master Page and then the tablesorter worked.

Could you provide an example of how to make it work in an application with Master Pages?

Thanks much.
GeneralRe: JQuery Tablesorter does not seem to work with Master Pages Pin
Priyanka Kalra17-Sep-09 6:09
Priyanka Kalra17-Sep-09 6:09 
GeneralRe: JQuery Tablesorter does not seem to work with Master Pages Pin
Ponnurangam D17-Sep-09 6:11
Ponnurangam D17-Sep-09 6:11 
GeneralRe: JQuery Tablesorter does not seem to work with Master Pages Pin
Ponnurangam D18-Sep-09 0:34
Ponnurangam D18-Sep-09 0:34 
GeneralRe: JQuery Tablesorter does not seem to work with Master Pages Pin
svrevm17-Sep-09 15:09
svrevm17-Sep-09 15:09 
AnswerThousand Separator in GridView with IsNumeric function of C# Pin
Nitish.11274-Nov-08 22:17
Nitish.11274-Nov-08 22:17 
GeneralGreat and fast Pin
cwp4217-Oct-08 20:29
cwp4217-Oct-08 20:29 
GeneralRe: Great and fast Pin
Ponnurangam D18-Oct-08 1:27
Ponnurangam D18-Oct-08 1:27 
GeneralFast sorting but only one page at a time Pin
MR_SAM_PIPER14-Oct-08 14:52
MR_SAM_PIPER14-Oct-08 14:52 
GeneralRe: Fast sorting but only one page at a time Pin
GibbleCH17-Oct-08 6:34
GibbleCH17-Oct-08 6:34 
GeneralNice, and it works with suprisingly little code indeed but... Pin
tec-goblin14-Oct-08 3:18
tec-goblin14-Oct-08 3:18 
GeneralRe: Nice, and it works with suprisingly little code indeed but... Pin
Ponnurangam D14-Oct-08 3:40
Ponnurangam D14-Oct-08 3:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.