Maintaining GridView Scroll Position in an ASP.NET AJAX UpdatePanel

Sometimes, it is inappropriate to use the paging feature of the ASP.NET GridView.  Instead, a scrolling grid is more applicable and enclosing the GridView in a <div> tag with the overflow style applied ensures that the over-sized element is clipped and that scroll bars are displayed.

<asp:UpdatePanel ID="updateGrid" runat="server" UpdateMode="Conditional">    <ContentTemplate>

        <input type="hidden" id="hdnScrollTop" runat="server" value="0" />

        <div id="divScroll" style="width:350px;height:200px; overflow-x:hidden; overflow-y:scroll;" onscroll="$get('hdnScrollTop').value = this.scrollTop;">            

            <asp:gridview id="grdOrders" runat="server" width="95%" datasourceid="objDataSource" cellpadding="3" GridLines="Horizontal">                 

                <Columns>                    

                       <asp:CommandField ShowSelectButton="True" />                 

                 </Columns>             

              </asp:gridview> 
         

           </div>     

         </ContentTemplate>

</asp:UpdatePanel>

It is slightly more complex to persist the scroll position during an syschronous postback using ASP.NET AJAX.  It's necessary to store the scrollTop property of the div tag in a hidden field using the client side onscroll event.  Note the use of the Sys.UI.DomElement $get method, which is a shortcut to the getElementById method. It's also important that the hidden input element has the runat="server" attribute so the element can be accessed during the pageLoaded function. 

<asp:ScriptManager ID="scriptManager" runat="server" EnablePartialRendering="True" />
<script type="text/javascript" language="javascript">    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(pageLoaded);
    prm.add_beginRequest(beginRequest);
    var postbackElement;
    function beginRequest(sender, args) {
        postbackElement = args.get_postBackElement();
    }

    function pageLoaded(sender, args) {
        var updatedPanels = args.get_panelsUpdated();
        if (typeof(postbackElement) == "undefined") {
            return;
        }
        if (postbackElement.id.toLowerCase().indexOf('grdorders') > -1) {
            $get("divScroll").scrollTop = $get("hdnScrollTop").value;
        }
     }
</script>  

In order that the scroll position of the div can be reset after a postback, it is first necessary to add a reference to the PageRequestManager.  To use the PageRequestManager class in client script, you must first have a ScriptManager server control on the page. To access the PageRequestManager class, you must have the EnablePartialRendering set to true (the default) on the ScriptManager control. When EnablePartialRendering is set to true, the MicrosoftAjaxWebForms.js file that contains the PageRequestManager class is included as a script resource for the page.  Once you have the current instance of the PageRequestManager, you can access all of its methods, properties, and events such as beginRequest and pageLoaded.

The beginRequest event is raised before the processing of an asynchronous postback begins and the postback is sent to the server.  Here we get a reference to the element that has raised the postback. 

The pageLoaded event is raised after all content on the page is refreshed.  The function initially determines if the page has been posted back by checking the typeof the postbackElement.  If the postback was raised by a our GridView, the scrollTop property of our div tag is set to the value stored in the hidden field.