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.
How to sort the gridview based on drop down list selected value like price & alpha numerics