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.

Advertisements
Posted in Jquery. 1 Comment »

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

  1. Divya Says:

    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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: