Retain Scroll Position in C1GridView

Introduction

When we talk about grids, it is obvious that we also talk about editing the data they display, quite often. Now, when grids contain a large amount of data, it is a little difficult to edit all of the columns at once and you may require to navigate to another page for editing the data of a row. This is a simple blog which talks about how to retain the scroll position of C1GridView when you navigate to another page, edit the data and come back.

Setting up C1GridView

Since we need to navigate to a different page for editing data, we will place a C1HyperLinkField with its NavigateUrl property set to the desired location.

<wijmo:C1HyperLinkField NavigateUrl="WebForm2.aspx" Text="Edit">  
</wijmo:C1HyperLinkField>  

So, the complete markup of C1GridView looks like this :

<wijmo:C1GridView ID="C1GridView1" runat="server" AllowClientEditing="True" AutogenerateColumns="False"  
            Height="400px" ScrollMode="Both" OnClientSelectionChanged="ClientSelectionChanged"  
            OnClientLoaded="ClientLoaded" OnClientRendered="ClientRendered" ClientSelectionMode="SingleRow"  
            DataSourceID="AccessDataSource1" DataKeyNames="CustomerID" Width="870px">  
            <Columns>  
                <wijmo:C1HyperLinkField NavigateUrl="WebForm2.aspx" Text="Edit">  
                </wijmo:C1HyperLinkField>  
                <wijmo:C1BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"  
                    SortExpression="CustomerID">  
                </wijmo:C1BoundField>  
                <wijmo:C1BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName">  
                </wijmo:C1BoundField>  
                <wijmo:C1BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName">  
                </wijmo:C1BoundField>  
                <wijmo:C1BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle">  
                </wijmo:C1BoundField>  
                <wijmo:C1BoundField DataField="City" HeaderText="City" SortExpression="City">  
                </wijmo:C1BoundField>  
                <wijmo:C1BoundField DataField="Country" HeaderText="Country" SortExpression="Country">  
                </wijmo:C1BoundField>  
            </Columns>  
</wijmo:C1GridView>  

Saving the Scroll Position

In order to retain the scroll position of C1GridView on returning back, we must save the scroll position before we navigate away. We will use the OnClientSelectionChanged event of C1GridView for this purpose and save the scroll position in a cookie (you could use other methods of storing the scroll position, for eg. HTML5's localStorage).

function ClientSelectionChanged(e, args) {  
   if (loaded) {  
     var scrollPosition = $(".wijmo-wijgrid").find(".wijmo-wijsuperpanel").wijsuperpanel("option", "vScroller").scrollValue;  
     var date = new Date();  
     date.setTime(date.getTime() + 30000);  
     document.cookie = 'scrollPosition=' + scrollPosition + '; expires=' + date + '; path=/'  
   }  
 }

Retrieving the Scroll Position

We use the OnClientRendered event of C1GridView to retrieve the scroll position and scroll C1GridView to the previous position.

function ClientRendered(e, args) {  
    var cookie = document.cookie;  
    if (cookie != undefined) {  
       var scrollToRow = document.cookie.Substring(document.cookie.IndexOf('=') + 1);  
       if (scrollToRow != "") {  
          var superPanel = $(".wijmo-wijgrid").find(".wijmo-wijsuperpanel");  
          $(superPanel).wijsuperpanel("option", "vScroller").scrollValue = scrollToRow;  
          $(superPanel).wijsuperpanel("paintPanel");  
       }  
    }  
}

You may download the complete sample here.