Thursday, December 2, 2010

Client Side Sortable Gridview with JQuery

It is fantastic to be able to sort the asp.net gridview on client side using jquery. I am going to make an example. Thanks to these guys for their awesome articles.
here are the links:
http://tablesorter.com
Make the gridview control accessible
first we need to make sure the table structure that asp.net makes for gridview is ok to work with tablesorter jquery plugin.
here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.4.4.js" type="text/javascript"></script>
    <script src="jquery.tablesorter.min.js" type="text/javascript"></script>
    <link href="tablesorter.css" rel="stylesheet" type="text/css" />
 
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
 
        $.tablesorter.defaults.sortList = [[3, 0],[1,1]]; 
 
        $("#grid").tablesorter({ 
            //The first column disbaled for sort
            headers: { 0: { sorter: false} }
             });          
  
});
</script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    <asp:GridView ID="grid" runat="server" CssClass="tablesorter" Width="500">
    <HeaderStyle BackColor="#e6EEEE"></HeaderStyle>
 
    </asp:GridView>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class tablesorter_test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            List<MyEntity> list = new List<MyEntity>();
            list.Add(new MyEntity() { ID = 1, Name = "test1", Date = new DateTime(1990, 1, 2), Num = 20 });
            list.Add(new MyEntity() { ID = 4, Name = "test2", Date = new DateTime(2010, 1, 2), Num = 30 });
            list.Add(new MyEntity() { ID = 5, Name = "name1", Date = new DateTime(2000, 1, 2), Num = 40 });
            list.Add(new MyEntity() { ID = 9, Name = "name2", Date = new DateTime(1999, 1, 2), Num = 50 });
 
            grid.DataSource = list;
            grid.DataBind();
        }
    }
 
    protected void Page_PreRender(object sender, EventArgs e)
    {
        FixGridViewTable(grid);
    }
 
    private void FixGridViewTable(GridView grid)
    {
        if (grid.Rows.Count > 0)
        {
            grid.UseAccessibleHeader = true;
            grid.HeaderRow.TableSection = TableRowSection.TableHeader;
            grid.FooterRow.TableSection = TableRowSection.TableFooter;
        }
    }
}
 
 
public class MyEntity
{
    public int ID { get; set; }
    public string Name { get; set; }
    public DateTime Date { get; set; }
    public decimal Num { get; set; }
}

tablesorter.css
--------------------------------------------------------
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}

3 comments:

Björn said...

does this work with framework 3.5? The CSS styles are not applied for me in 3.5... but in 4.0 it works.

Saeed said...

It should work in 3.5, because CSS styles has nothing to do with .Net framework version.

lauren said...

I never had an idea that it is possible to sort the asp.net gridview on client side.Moreover JQuery is a great tool and it provide amazing things.Thanks for updating on this
digital certificates

Post a Comment