Please Sign up or sign in to vote.

Introduction

This is my first article; I want to apologize in my English. In this example, I want to show how to sorting a gridview using a Jquery in ASP.NET, it is a flexible client-side table sorting. We have known that Jquery is a new kind of Javascript Library. You can find detail of Jquery in this site http://jquery.com/ there are lot of example with documentation and also allow free download a latest version.

Background

In this example, I used table sorter plug-in which has written by Christian Bach can found http://tablesorter.com/docs/ . It is really cool plug-in and user can allow to download and customization as their wish.

I test this example in Visual Studio 2005. Some of other requirement needed is download a latest version of Jquery from official website and table sorter plug-in which can found as I mention above website.

Here we go,

Using the Code

First, we need some image file which require for click in Gridview header. Then, we need to add a CSS file to make proper position and color.

In this example, I use ajax json serialize to load data into the Gridview

<%@ Page Language =" VB" AutoEventWireup =" false" CodeFile =" TableSorterBlue.aspx.vb" Inherits =" TableSorterBlue" %> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns =" http://www.w3.org/1999/xhtml" > < head runat =" server" > < title > Table Sorter Blue < /title > < link href =" App_Themes/bluestyle.css" rel =" stylesheet" type =" text/css" media =" print, projection, screen" / > < script language =" javascript" type =" text/javascript" src =" script/jquery-1.2.6.min.js" > < / script > < script language =" javascript" type =" text/javascript" src =" script/jquery.tablesorter.js" > < / script > < script language =" javascript" type =" text/javascript" src =" script/Sorter.js" > < / script > < /head > < body > < form id =" form1" runat =" server" > < div id =" btnInfo" > < button id =" btnBlueLoad" type =" button" > Load Data < /button > < /div > < div id =" result" > < /div > < /form > < script type =" text/javascript" > $( function (){ $( " #btnBlueLoad" ).click( function (){ LoadRecord(); }); }); function LoadRecord(){ $.ajax({ type: " POST" , url: " TableSorterBlue.aspx/GetOrderDetailTable" , contentType: " application/json; charset=utf-8" , data: " {}" , dataType: " json" , success: function (msg){ $( " #result" ).html(msg); formatSorterTable(); } }); } < / script > < /body > < /html >

In the code behind a Page of TableSorterBlue.aspx :

Partial Class TableSorterBlue Inherits System.Web.UI.Page <WebMethod(enablesession:=True)> _ Public Shared Function GetOrderDetailTable() As String Dim page As New Page() Dim userControl As UserControl = DirectCast (page.LoadControl( " ~/controls/GridViewControl.ascx" ), UserControl) userControl.EnableViewState = False Dim form As New HtmlForm() form.Controls.Add(userControl) page.Controls.Add(form) Dim textWriter As New StringWriter() HttpContext.Current.Server.Execute(page, textWriter, False ) Return Clean(textWriter.ToString()) End Function Private Shared Function Clean( ByVal html As String ) As String Return Regex.Replace(html, " <[/]?(form)[^>]*?>" , " " , RegexOptions.IgnoreCase) End Function End Class

And in a user control I create a Gridview but make sure you make accessible property to true as what I did in the code:

Partial Class controls_GridViewControl Inherits System.Web.UI.UserControl Protected Sub Page_Load( ByVal sender As Object , ByVal e As System.EventArgs) Handles Me .Load Me .MakeAccessible( Me .gvTSOrderDetail) End Sub Private Sub MakeAccessible( ByVal grd As GridView) If grd IsNot Nothing AndAlso grd.Rows.Count > 0 Then grd.UseAccessibleHeader = True grd.HeaderRow.TableSection = TableRowSection.TableHeader End If End Sub End Class

TableRowSection.TableHeader can help to create a <thead> and <tbody> which is synchronize with table sorter plug-in.

Now, you can click on arrow up and down it start sorting a row.