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.

For download source Click Here

Thanks.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →