Wijmo Gridview: Maintaining Scroll Position on Asynchronous Postback

Most of the developers prefer placing contents in an Update Panel so that they can avoid full page postback. But, when we place Gridview for Wijmo in an Update Panel then it loses its scroll position after the asynchronous postback as the grid is reloaded. The scrollbars are reset and the end user is required to scroll it back to the location where it was before partial postback. This blog will help you maintain the scroll position of the Wijmo Gridview placed inside an Update Panel on asynchronous postback. To begin with, we need a Gridview bound to a datatable. Place an UpdatePanel & ScriptManager on the webpage and then, refer to the documentation for binding Gridview with datatable. After doing so, you can attach the click event of the button to the UpdatePanel in order to cause the partial postback. Execute the implementation till now and scroll the grid to view the hidden rows. Now, if you click on the button, you will observe the grid is re-rendered due to asynchronous postback and scrollbars lose their scroll position. The approach used to prevent this behavior is based on the fact that internally, Wijmo Gridview consists of Wijmo Superpanel. So, we can access the horizontal/vertical scrollbars of this superpanel, store the S**crollBar values and when the grid is redrawn, we set this scroll values to the scrollbars. In order to get/set the scroll value, we need to handle beginRequest and endRequest events of PageRequestManager** class which manages partial-page updates of UpdatePanel. Here is the code which will do the job for you:

<script language="javascript" type="text/javascript">  
        // This Script is used to maintain scroll position on Partial Postback  

        //define variables for storing temporary values  
        var horizontalPos, verticalPos;  

        //Register Begin Request and End Request                
        Sys.WebForms.PageRequestManager.getInstance().add_beginRe   quest(BeginRequestHandler);                
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);  
        //Get the horizontal/vertical scroll position  
        function BeginRequestHandler(sender, args) {  
            //access the superpanel  
            var $superPanel = $("#c1GridView1").closest(".wijmo-wijgrid").find(".wijmo-wijsuperpanel");  
            var hscroller = $superPanel.wijsuperpanel("option", "hScroller");  
            horizontalPos = hscroller.scrollValue;  
            var vscroller = $superPanel.wijsuperpanel("option", "vScroller");  
            verticalPos = vscroller.scrollValue;  

        }  

        //Set the scroll position  
        function EndRequestHandler(sender, args) {  

            var $superPanel = $("#c1GridView1").closest(".wijmo-wijgrid").find(".wijmo-wijsuperpanel");  
             //get the horizontal scrollbar  
            var hscroller = $superPanel.wijsuperpanel("option", "hScroller");  
            //set its value to scrolled value before partial postback  
            hscroller.scrollValue = horizontalPos;  
            var vscroller = $superPanel.wijsuperpanel("option", "vScroller");  
            vscroller.scrollValue = verticalPos;  
            //call the refresh method to update the scroll postion  
            $superPanel.wijsuperpanel("refresh");  

            $("#btnPostBack").val("Value Updated");  

        }  
</script>  

Make sure that you place the script after the ScriptManager on your page. You may also download the complete sample.