Am developing an ASP webform project and having some difficulties with JQuery tablesorter Plugin. I applied the plugin to an ASP Gridview control which is in an Ajax Accordion. Am not sure what the problem is but the table doesn't display fully on the first page Load. Your help and feedback ae highly appreciated
See Pic on first page Load: Table cannot load fully
But after every postback or after i adjust the browser (Minimize/maximize) then the table loads fully.
see pic: Full Table
//Js code for tablesorter
function BindTablesorter() {
$('#gv_MoeglicheEmailverteiler').tablesorter({
theme: 'jui',
showProcessing: true,
headerTemplate: '{content} {icon}',
stickyHeaders: "tablesorter-stickyHeader",
resizable: true,
widgets: ['uitheme','zebra', 'filter', 'scroller'],
widgetOptions: {
scroller_upAfterSort: true,
scroller_jumpToHeader: true,
scroller_height: 450,
scroller_fixedColumns: 2,
scroller_addFixedOverlay: false,
scroller_rowHighlight: 'hover',
scroller_barWidth: null
},
});
}
$(document).ready(function () {
BindTablesorter();
});
// Markup for Gridview
<ajaxToolkit:AccordionPane ID="AccPEmailverteiler" runat="server">
<Header><u>Emailverteiler</u></Header>
<Content>
<asp:UpdatePanel ID="up_EmailVerteilerOne" runat="server">
<ContentTemplate>
<script type="text/javascript">
Sys.Application.add_load(BindTablesorter);
</script>
<asp:GridView ID="gv_MoeglicheEmailverteiler" runat="server" ClientIDMode="Static"
AutoGenerateColumns="false" BorderColor="#DEBA84" BackColor="Silver" HeaderStyle Height="40px" OnPreRender="gv_MoeglicheEmailverteiler_PreRender" HorizontalAlign="Center" CellPadding="3" CssClass="tablesorter">
<Columns>
<asp:TemplateField HeaderText="Reihe" ItemStyle-Width="200px" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="gruppenname" HeaderText="Gruppenname" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>
<asp:BoundField DataField="standort" HeaderText="Standort" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>
<asp:BoundField DataField="beschreibung" HeaderText="Beschreibung" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>
<asp:BoundField DataField="genehmigt" HeaderText="Genehmigt" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>
<asp:BoundField DataField="zielobjekt" HeaderText="ZielObjekt" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px"/>
<asp:BoundField DataField="ACTION_CHECKED" HeaderText="Action_Checked" NullDisplayText="n/a" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ItemStyle-Width="250px" />
<asp:TemplateField ItemStyle-Width="300px" HeaderText="Action" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:CheckBox ID="cb_CheckOneMoglicheverteilerRow" runat="server" ItemStyle-HorizontalAlign="Center" class="checkboxClass" AutoPostBack="true" onclick = "Check_Click(this);" OnCheckedChanged="CheckBox_CheckChanged"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle ForeColor="Black" Font-Bold="True" BackColor="#CCCC00"></HeaderStyle>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>