JQuery has become quite popular on the web due to its client side nature of doing anything and everything. In this article I would like to demonstrate implementation of client side sorting for ASP.NET Grid View using JQuery.
The plug-in supports only client side sorting based on JavaScript algorithm. Table Sorter is required to implement the scenario. The Table Sorter Plug-in can be found here . The Plug-in sorts HTML Table. We need to Download the latest version of the jQuery from here
Step1: Include necessary js Files
Include Table Sorter Plug-in and jQery Plug-in , jQuery Plugin is required for loading tablesorter. So we need to include jQuery 1.3.2.min.js before table sorter plugin inclusion.
<head runat="server">
<script src="../scripts/jquery-1.3.2.min.js" type="text/javascript">
</script> <script src="../Scripts/jquery.tablesorter.min.js" type="text/javascript">
</script>
</head>
It is imagined that you already have code for grid binding form Database or LINQ or XML or whatever it may be
In my case I am getting data from the Database .
if (dsParamValues.Tables.Count > 0 && dsParamValues.Tables[0].Rows.Count > 0)
{
grdResults.DataSource = dsParamValues; grdResults.DataBind();
}
Step2: Render Grid <Thead> and <Tbody> tags
Table Sorter needs the tags <Thead> and <Tbody> for the sorting . So we need to have the GridView control renders these tages. GridView will be converted as HTML table , but <thead> <tbody> are not rendered by defualt.
We can explicitly make this using the following code.
if (grdResults.Rows.Count > 0)
{
grdResults.UseAccessibleHeader = true;
grdResults.HeaderRow.TableSection = TableRowSection.TableHeader;
}
Step3: Calling Table Sorter Plug-in
$(document).ready(function ()
{$("#grdResults").tablesorter();});
We can either use the same code in the Code behind as
ScriptManager.RegisterStartupScript(this, GetType(), "SortGrid",string.Format("$(function(){{$('#{0}').tablesorter(); }});",grdResults.ClientID), true);
That’s it . Now run the page we will be able to sort the columns on clicking the header. And it’s much faster.
Tip: Use AJAX to remove post backs since if the buttons because post back, grid will return to initial state since the sorting was only done on the client side.
As this plug-in supports only client side sorting based on JavaScript algorithm, all the events which are bound to the grid are lost when fresh page is sent by web server. Unlike ASP.NET model, events will not persist in client side programming. So we need to re-bind the client side events after post back.
The code snippet for the rebinding can be as follows
<script type="text/javascript"> $(function() { initializer(); }); <
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function()
{ //rebinding events initializer();
});
function initializer() { $("table[id$='grdResults']").tablesorter(); }
</script>
Hope it is clear about client side sorting using jQuery. Let me know if you have any questions
Happy Beyondrelationaling