John Mendez

This is my way to save the scroll position during a postback.  This code will only save the horizontal scroll position.  The concept here is I was doing "freeze panes" and on the right side where you could scroll the columns I needed to save the position of the div where it was scrolled at during a postback.  The postback was initiated by sorting columns.  So this is how I went about doing it and hope it works well for others out there.

First we need a hidden field on the page like this:

<asp:HiddenField ID="hiddenScrollPos" runat="server" Value="0" />

This field can be anywhere you want on the page it doesn't matter

Next we need a piece of javascript as follows:

function getScrollPosition() {

    var hidden = document.getElementById('<%= this.hiddenScrollPos.ClientID %>');
    var obj = document.getElementById("divHolder");

    hidden.value = obj.scrollLeft;
    obj.scrollLeft = hidden.value;
}


This is the div on the page with the overflow set to scroll and a specified width to your liking.

<div id="divHolder" class="divHolder" onscroll="getScrollPosition()">
    //content here
    //GridView here with a lot of columns
</div>

Notice the onscroll attribute in the div.  I couldn't find anywhere whether or not this was compliant across all browsers, but I tested it in Firefox 2, 3 and IE 6 (I know a weird environment). It worked well in all three browsers.

Basically at this point everytime we move the horizontal scroll bar we are updating the hidden field value (which is a server side control) with the value of the scroll position.

Now we need to handle the postback, which in my case, is being inititiated when a user sorts a column.

The events fired here are in the following order:

Page_Init
Page_Load
GridView1_Sorting
Page_PreRender


Here is the code for the Pre_Render method:

protected void Page_PreRender(object sender, EventArgs e)
{

   //BIND YOUR GRIDVIEW's HERE

   //used to save the scroll position for the overflow div when a post back occurs
   Page.ClientScript.RegisterStartupScript(this.GetType(), "saveScroll", this.ScriptSaveScroll());    

}

Code for ScriptSaveScroll()

private string ScriptSaveScroll()
{
    //HiddenField1.Value is set in the getScrollPosition() javascript function
    //with the onscroll event on the divHolder in the markup
    StringBuilder strScript = new StringBuilder();

    strScript.Append("<script language=javascript>");
    strScript.Append("var obj = document.getElementById('divHolder');");
    strScript.Append("var objHidden = document.getElementById('" + hiddenScrollPos.ClientID + "');");

    strScript.Append("objHidden.value");
    strScript.Append(" = " + hiddenScrollPos.Value + ";");

    strScript.Append("obj.scrollLeft=objHidden.value;");
    strScript.Append("objHidden.value = obj.scrollLeft;");
    //strScript.Append("alert(objHidden.value);");
    strScript.Append("</script>");

    return strScript.ToString();
}


I use the Page.ClientScript.RegisterStartupScript method because this adds the javascript as the bottom of the page which is what I want because at that point everything else is on the page such as the hidden field, div and gridview.


This should do it. Now your scroll position is saved during a postback.

ASP.NET asp.net