GridView Sorting Using jQuery Plugin


This article describes how to use GridView in ASP.Net and jQuery. We can do it server-side but if you do it using jQuery then you are putting less load on the server. You can handle it client-side.


To create this application you need the jQuery plugins listed below.

  • jquery.tablesorter.min.js
  • jquery-1.4.3.min.js

You can download them from the source code attached in this page.


Add a GridView with AutogeneratedColumn=false and apply any design.

Now design your screen like the following screen:


Or you can copy the following source code:

<form id="form1" runat="server">
        <asp:GridView ID="gvDept" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow"
            BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
            <AlternatingRowStyle BackColor="PaleGoldenrod" />
                <asp:BoundField DataField="DEPTNO" HeaderText="Id">
                    <ItemStyle Width="50px" />
                <asp:BoundField DataField="DNAME" HeaderText="Dept Name" />
                <asp:BoundField DataField="LOC" HeaderText="Location" />
            <FooterStyle BackColor="Tan" />
            <HeaderStyle BackColor="Tan" Font-Bold="True" />
            <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
            <SortedAscendingCellStyle BackColor="#FAFAE7" />
            <SortedAscendingHeaderStyle BackColor="#DAC09E" />
            <SortedDescendingCellStyle BackColor="#E1DB9C" />
            <SortedDescendingHeaderStyle BackColor="#C2A47B" />

Next add the following JavaScript and CSS style code in the head tag (it's used for sorting):

<style type="text/css">
            cursor: pointer;
            background-color: #dadada;
            color: Black;
            font-weight: bold;
            text-align: left;
            background-image: url(images/asc.gif);
            background-position: right center;
            background-repeat: no-repeat;
            background-image: url(images/desc.gif);
            background-position: right center;
            background-repeat: no-repeat;
            border-bottom: solid 1px #dadada;
    <script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

Now go to the code view.

Write the BindGrid method using the database or you can use a static datatable.

After binding, write these two lines that are requeired for sorting:

gvDept.UseAccessibleHeader = true;

gvDept.HeaderRow.TableSection = TableRowSection.TableHeader;

And write the following code .cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
    private void BindGrid()
        SqlConnection con = new SqlConnection("Data Source=Sanjeeb;database=MYDB;user id=test;password=Test");
        SqlCommand cmd = new SqlCommand("select * from DEPT", con);
        SqlDataAdapter dr = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        gvDept.DataSource = ds;
        gvDept.UseAccessibleHeader = true;
        gvDept.HeaderRow.TableSection = TableRowSection.TableHeader;
    protected void Page_Load(object sender, EventArgs e)
        if (!Page.IsPostBack)

Now build your application. Click on every header; it will sort the corresponding grid column with ascending and descending image.


For any modifications or problems please comment.


Similar Articles