How to do sorting in gridview on client side using Jquery ?


TableSortExp

Hi

We can do sorting in asp.net gridview using tablesorter jquery plugin. It will do soring of data in client side only. It is very simple to use in asp.net

Step1: Write the aspx code like this


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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></title>
 <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 () {
            $("#GridView1").tablesorter();
        }); 
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" Width="312px" runat="server" CellPadding="4" 
            ForeColor="#333333" GridLines="Both"
            Font-Size="9pt" Font-Names="Arial" AutoGenerateColumns="False"
            BorderColor="#DADADA" BorderStyle="Solid" BorderWidth="1px" 
            DataKeyNames="EmpId" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="EmpId" HeaderText="EmpId" InsertVisible="False" 
                    ReadOnly="True" SortExpression="EmpId" />
                <asp:BoundField DataField="EmpName" HeaderText="EmpName" 
                    SortExpression="EmpName" />
                <asp:BoundField DataField="EmpSal" HeaderText="EmpSal" 
                    SortExpression="EmpSal" />
            </Columns>
        </asp:GridView>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:EmpDBConnectionString %>" 
            SelectCommand="SELECT * FROM [tblEmp]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>


Step 2: Write the code in page load like this


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

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GridView1.UseAccessibleHeader = true;
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; 
    }
}

Note: Please download the above plugin to test this code.

Advertisement

One thought on “How to do sorting in gridview on client side using Jquery ?

  1. Divya February 1, 2014 / 8:42 am

    How to sort the gridview based on drop down list selected value like price & alpha numerics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.