Question

QI have a jQuery function that causes my datagrid search results to be scrollable.
However, if I update the panel the scroll bar is gone and the results just fill the entire page over everything. Is it because it is notcalling that function again? Here is my current code.

jQuery

<script type="text/javascript">

        $(document).ready(function scroll() {
            $('#<%=gvMapping.ClientID%>').Scrollable({ ScrollHeight: 370 });
        }
        )
</script>
<script type="text/javascript">
    function getGL(){
    var button = document.getElementById("<%= btnGetGLDept.ClientID %>");
    button.click();
}
</script>

HTML

 <%--Mapping Search Bar --%>
    <div class="searchrev1">
    <asp:TextBox ID="mpSearch" class="txtbox" runat="server" text="Please start entering Department Name or Number to search"
        onfocus="if(this.value==this.defaultValue) {this.value='';$(this).css('color','#3B3B3B');}"  
        onblur="if(this.value=='') {this.value=this.defaultValue;$(this).css('color','rgb(173,180,195)');}" Width="400px"/>
    <asp:Button  ID="mapsearch" text="Search" runat="server" 
        onclick="getGLDepts" />
    <asp:CheckBoxList ID="mpcbl" class="cbl" runat="server" DataSourceID="Rollup" 
            DataTextField="COA_SYSTEM" DataValueField="COA_SYSTEM" ondatabound="chkFormat" OnClick="javascript:scroll;getGL();"></asp:CheckBoxList>
        <asp:SqlDataSource ID="Rollup" runat="server" 
            ConnectionString="<%$ ConnectionStrings:Rollup2ConnectionString %>" 
            SelectCommand="SELECT DISTINCT [COA_SYSTEM] FROM [T_ROLLUP_GL_EXCEPT]">
        </asp:SqlDataSource>
    </div>
    <%--Mapping Graph --%>
    <div class="botcontent">
    <asp:Label ID="lblGLDeptData" runat="server"></asp:Label>
    </div>
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="topcontent">
                <asp:GridView ID="gvMapping" runat="server" GridLines="none" AutoGenerateColumns="false">
                <HeaderStyle CssClass="GVFixedHeader" />
                <Columns>...</Columns>
                </asp:GridView>
                <asp:Button ID="btnGetGLDept" runat="server" OnClick="getGLDepts" CssClass="invisible" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

I have the Checkboxlist call the function getGL() when clicked. That calls then jquery function that calls the buttom click to call the c# code. This is when the scrollable doesnt occur.

Answer 1

need to add this javascript, for when update panel is called

var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequest);

    function EndRequest(sender, args) {
       $('#<%=gvMapping.ClientID%>').Scrollable({ ScrollHeight: 370 });
    }

or replace your document.ready with this

Sys.Application.add_load(initSomething);
function initSomething()
{
    $('#<%=gvMapping.ClientID%>').Scrollable({ ScrollHeight: 370 });
  // will execute on load plus on every UpdatePanel postback
}