Jquery Tablesorter Plugin not funtioning properly with AjaxToolkit Accordion

63 Views Asked by At

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>
0

There are 0 best solutions below