Sorting Gridview using Jquery with ASP.NET

Sailung Limbu

Rate me:

2.67/5 (3 votes)

20 Oct 2008CPOL1 min read

87.8K

2.1K

This article demonstrate flexible client-side table sorting

Download GridViewSorter - 46.08 KB

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.

License

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

Written By

Sailung Limbu

Software Developer

Nepal

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

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

Sorting Gridview using Jquery with ASP.NET

Introduction

Background

Using the Code

License

Comments and Discussions