Click here to Skip to main content
Click here to Skip to main content

Sorting Gridview using Jquery with ASP.NET

, 20 Oct 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
This article demonstrate flexible client-side table sorting

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)

Share

About the Author

Sailung Limbu
Software Developer
Nepal Nepal
No Biography provided

Comments and Discussions

 
Answerfor all types of options like sorting, searching, paging....printing... Pinmembervaraprasadreddy.bh18-Dec-12 9:01 
GeneralMy vote of 1 Pinmemberjayeshvpatel21-Jul-10 2:00 
GeneralNot working with linkbutton Pinmembercomputerhussain31-Oct-09 3:43 
GeneralIt doesn't work with Allow Paging = true PinmemberThiago Valente27-Feb-09 5:13 
GeneralExcellent Pinmemberweb5130213-Nov-08 11:58 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150129.1 | Last Updated 20 Oct 2008
Article Copyright 2008 by Sailung Limbu
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid