Question

I have jQuery function that allows my gridview to scroll but when I added the Update Panel the scroll bar is gone and the results just fill the entire page over everything. This issue happened exactly when I added a trigger button that updates the panel.
Here is what I have in the header section of my page:

<script src="Scripts/gridviewScroll.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {
        gridviewScroll();
    });
    function gridviewScroll() {
        $('#gvMain').gridviewScroll({
            width: 900,
            height: 500,
            arrowsize: 30,
            varrowtopimg: "Images/arrowvt.png",
            varrowbottomimg: "Images/arrowvb.png",
            harrowleftimg: "Images/arrowhl.png",
            harrowrightimg: "Images/arrowhr.png"
        });
    } 

And here is my markup:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

   <div> 


 <asp:GridView ID="gvMain" runat="server" Width="100%" AutoGenerateColumns="False" 
    ......
..........

</asp:GridView> 

    </div>    
     </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnClick" />
        </Triggers>
    </asp:UpdatePanel>

Answer 1

That’s because you’re updating the grid via ajax, and when you do that the DOM is altered and the modifications you’ve made gets lost. You need to call the gridviewScroll() method after every partial update to maintain the styles that have been applied prior the update. To do that, try this:

$(document).ready(function () {
    gridviewScroll();
});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(evt, args) {
    gridviewScroll();
});

That way, after every partial update the style is reapplied and so the scroll.