ASP.NET GridView: losing tablesorter on postback

[oripel]

(I apologize for the ASP.NET WebForms terminology)

I'm using ASP.NET's GridView to generate a table, and the jQuery
Tablesorter plugin to sort it (awesome plugin, BTW).

After the page loads sorting works great, but if I click on any
control that performs a postback the page reloads but tablesorter
doesn't affect it (no sorting, css styling, etc.)

When troubleshooting it I click a control that does a postback and the
table loses sorting. I load the table in Firebug's console -  it has
the 'tablesorter' method, and I call it, but nothing happens.

>>> $("#ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolder_GridView1").tablesorter()

Calling it with '$(...).tablesorter({debug:true})' doesn't print
anything to the console either.

Does anyone have any ideas?

Thanks!
orip

[wyldemann]

Did you ever find out the solution to this issue. I'm running into the
same problem. anyhelp would be appreciated.

Thanks,
Rob


On Mar 5, 12:44 pm, orip <ori...@...> wrote:

> (I apologize for the ASP.NET WebForms terminology)
>
> I'm using ASP.NET's GridView to generate a table, and the jQuery
> Tablesorter plugin to sort it (awesome plugin, BTW).
>
> After the page loads sorting works great, but if I click on any
> control that performs a postback the page reloads but tablesorter
> doesn't affect it (no sorting, css styling, etc.)
>
> When troubleshooting it I click a control that does a postback and the
> table loses sorting. I load the table in Firebug's console -  it has
> the 'tablesorter' method, and I call it, but nothing happens.
>
> >>> $("#ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolder_GridView1").t­ablesorter()
>
> Calling it with '$(...).tablesorter({debug:true})' doesn't print
> anything to the console either.
>
> Does anyone have any ideas?
>
> Thanks!
> orip

[oripel]

Hi Rob,
I finally found the cause and a solution :)

Cause: asp:GridView loses the '<thead>' section on postback and
reverts to the default (header row in '<tbody>'), and tablesorter
expects '<thead>'.

I tried different WebForms tricks to get it to keep '<thead>', but got
tired before I succeeded.

I ended up with this 'creative' solution - a 'fixGridView' jQuery
plugin that fixes GridView's markup.

jQuery.fn.fixGridView = function() {
    if (jQuery(this).is('table') && this.find('thead').length == 0) {
        // No 'thead' section
        this.prepend("<thead></thead>"); // add thead
        this.find('tbody
tr:first').remove().appendTo( this.find('thead') ); // remove first
row from tbody, add it to thead
    }
    return this;
};

You can use it like this:

$(selector).fixGridView().tablesorter(...);

Or, to be WebForms-specific:

$('#<%=MyGridView.ClientID=>').fixGridView().tablesorter();

On Mar 28, 5:42 pm, wyldemann <rob.rog...@...> wrote:

> Did you ever find out the solution to this issue. I'm running into the
> same problem. anyhelp would be appreciated.
>
> Thanks,
> Rob
>
> On Mar 5, 12:44 pm, orip <ori...@...> wrote:
>
> > (I apologize for the ASP.NET WebForms terminology)
>
> > I'm using ASP.NET's GridView to generate a table, and the jQuery
> > Tablesorter plugin to sort it (awesome plugin, BTW).
>
> > After the page loads sorting works great, but if I click on any
> > control that performs a postback the page reloads but tablesorter
> > doesn't affect it (no sorting, css styling, etc.)
>
> > When troubleshooting it I click a control that does a postback and the
> > table loses sorting. I load the table in Firebug's console -  it has
> > the 'tablesorter' method, and I call it, but nothing happens.
>
> > >>> $("#ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolder_GridView1").t­ablesorter()
>
> > Calling it with '$(...).tablesorter({debug:true})' doesn't print
> > anything to the console either.
>
> > Does anyone have any ideas?
>
> > Thanks!
> > orip

[oripel]

Hi Rob,
I finally found the cause and a solution :)

Cause: asp:GridView loses the '<thead>' section on postback and
reverts to the default (header row in '<tbody>'), and tablesorter
expects '<thead>'.

I tried different WebForms tricks to get it to keep '<thead>', but got
tired before I succeeded.

I ended up with this 'creative' solution - a 'fixGridView' jQuery
plugin that fixes GridView's markup.

jQuery.fn.fixGridView = function() {
    if (jQuery(this).is('table') && this.find('thead').length == 0) {
        // No 'thead' section
        this.prepend("<thead></thead>"); // add thead
        this.find('tbody
tr:first').remove().appendTo( this.find('thead') ); // remove first
row from tbody, add it to thead
    }
    return this;
};

You can use it like this:

$(selector).fixGridView().tablesorter(...);

Or, to be WebForms-specific:

$('#<%=MyGridView.ClientID=>').fixGridView().tablesorter();

On Mar 28, 5:42 pm, wyldemann <rob.rog...@...> wrote:

> Did you ever find out the solution to this issue. I'm running into the
> same problem. anyhelp would be appreciated.
>
> Thanks,
> Rob
>
> On Mar 5, 12:44 pm, orip <ori...@...> wrote:
>
> > (I apologize for the ASP.NET WebForms terminology)
>
> > I'm using ASP.NET's GridView to generate a table, and the jQuery
> > Tablesorter plugin to sort it (awesome plugin, BTW).
>
> > After the page loads sorting works great, but if I click on any
> > control that performs a postback the page reloads but tablesorter
> > doesn't affect it (no sorting, css styling, etc.)
>
> > When troubleshooting it I click a control that does a postback and the
> > table loses sorting. I load the table in Firebug's console -  it has
> > the 'tablesorter' method, and I call it, but nothing happens.
>
> > >>> $("#ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolder_GridView1").t­ablesorter()
>
> > Calling it with '$(...).tablesorter({debug:true})' doesn't print
> > anything to the console either.
>
> > Does anyone have any ideas?
>
> > Thanks!
> > orip