CODEWITHSUNDEEP
asp.netjquerygridview
chris
chris

Reputation: 37460

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

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?

Upvotes: 1

Views: 4332

Answers (2)

Manoj
Manoj

Reputation: 11

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);

Upvotes: 1

Mouhannad
Mouhannad

Reputation: 2209

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!

Upvotes: 1

Related Questions