GridView Sorting Using jQuery Plugin

Introduction

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.

Description

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.

Design

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">
    <div>
        <asp:GridView ID="gvDept" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow"
            BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
            <AlternatingRowStyle BackColor="PaleGoldenrod" />
            <Columns>
                <asp:BoundField DataField="DEPTNO" HeaderText="Id">
                    <ItemStyle Width="50px" />
                </asp:BoundField>
                <asp:BoundField DataField="DNAME" HeaderText="Dept Name" />
                <asp:BoundField DataField="LOC" HeaderText="Location" />
            </Columns>
            <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" />
        </asp:GridView>
    </div>
    </form>

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

<style type="text/css">
        th
        {
            cursor: pointer;
            background-color: #dadada;
            color: Black;
            font-weight: bold;
            text-align: left;
        }
        th.headerSortUp
        {
            background-image: url(images/asc.gif);
            background-position: right center;
            background-repeat: no-repeat;
        }
        th.headerSortDown
        {
            background-image: url(images/desc.gif);
            background-position: right center;
            background-repeat: no-repeat;
        }
        td
        {
            border-bottom: solid 1px #dadada;
        }
    </style>
    <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 () {
            $("#gvDept").tablesorter();
        });
    </script>

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();
        dr.Fill(ds);
        gvDept.DataSource = ds;
        gvDept.DataBind();
        gvDept.UseAccessibleHeader = true;
        gvDept.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindGrid();
        }
    }
}

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.

Thanks.