How can I use jquery tablesorter with an asp.net gridview?

Question

I'm trying to add sorting of a gridview using the tablesorter plugin.

However, the gridview does not render the THEAD and TBODY tags. Is there a way to get it to add them?

Mouhannad · Accepted Answer · 2010-10-20 14:41:52Z

1

Source: http://justgeeks.blogspot.com/2008/09/add-tbody-and-thead-to-gridview.html

view

<asp:GridView ID="GridView1" runat="server" 
    OnPreRender="GridView1_PreRender">
</asp:GridView>

cs

protected void GridView1_PreRender(object sender, EventArgs e)
{

   // You only need the following 2 lines of code if you are not 
   // using an ObjectDataSource of SqlDataSource
   GridView1.DataSource = Sample.GetData();
   GridView1.DataBind();

   if (GridView1.Rows.Count > 0)
   {
      //This replaces <td> with <th> and adds the scope attribute
      GridView1.UseAccessibleHeader = true;

      //This will add the <thead> and <tbody> elements
      GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

      //This adds the <tfoot> element. 
      //Remove if you don't have a footer row
      GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
   }

}

I hope this help!

answered Oct 20, 2010 at 14:41

Mouhannad

2,2091 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chris Over a year ago

Didn't need to put this in to a pre_render method, setting those params during the page load worked as well.

Mouhannad Over a year ago

yeah i know, i just thought i'll share the same code; it would be easy to figure out what to do from it :)

Stephan · Accepted Answer · 2012-10-02 08:46:41Z

Try this :

protected void grdDtls_DataBound(object sender, EventArgs e)
{
    if (grdDtls.Rows.Count > 0)
    {
        //To render header in accessible format
        grdDtls.UseAccessibleHeader = true;

        //Add the <thead> element
        grdDtls.HeaderRow.TableSection = TableRowSection.TableHeader;

        //Add the <tfoot> element
        grdDtls.FooterRow.TableSection = TableRowSection.TableFooter;

        if (grdDtls.TopPagerRow != null)
        {
            grdDtls.TopPagerRow.TableSection = TableRowSection.TableHeader;
        }
        if (grdDtls.BottomPagerRow != null)
        {
            grdDtls.BottomPagerRow.TableSection = TableRowSection.TableFooter;
        }
    }
}

and use following code wherever you fill your grid.

ScriptManager.RegisterStartupScript(this, GetType(), "SortGrid",    string.Format("$(function(){{$('#{0}').tablesorter(); }});", grdDtls.ClientID), true);

Collectives™ on Stack Overflow

How can I use jquery tablesorter with an asp.net gridview?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related