In this article I will explain how to maintain the scroll position for Scrollable GridView using jQuery inside AJAX UpdatePanel when Partial PostBack occurs.
This article is an extension of my previous article Scrollable GridView with Fixed Headers inside ASP.Net UpdatePanel using jQuery Plugin, as it uses the version 3.0 of the jQuery Scrollable GridView plugin which now solves the issue of DIV scroll position getting lost on AJAX UpdatePanel partial PostBack.
 
HTML Markup
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton Text="Submit" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:Button ID="Button1" runat="server" Text="Refresh" />
</ContentTemplate>
</asp:UpdatePanel>
 
 
Applying the Scrollable Grid jQuery Plugin
The syntax remains exactly the same, but now the new jQuery plugin maintains the scroll position of the Scrollable DIV on partial PostBack inside UpdatePanel.
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridPlugin_ASP.NetAJAX_3.0.js" type="text/javascript"></script>
<script type="text/javascript">
    var position = 0;
    $(document).ready(function () {
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300,
            IsInUpdatePanel: true
        });
    });
</script>
 
Parameters
ScrollHeight – Height of the Scrollable DIV
Width – Width of the Scrollable DIV (Optional)
IsInUpdatePanel – This parameter must be set to true when the GridView is inside an ASP.Net AJAX UpdatePanel.
 
 
Demo
View Demo
 
 
Downloads
Download Code