HOWTO: Persist Scroll Position in Panel Control on Postback

[Elroyskimms]

Using .Net 2.0 and VB.Net

I have a Panel control in a user control. This Panel contains several
other controls with buttons and dropdownlists. Anytime the user would
click one of these button or dropdown controls, a postback would occur
and the Panel scroll position would be lost. Some MVP's recommended:

Page.MaintainScrollPositionOnPostBack = True

This is the .Net 2.0 replacement for Page.SmartNavigation = True.
However, this only seems to apply to maintaining the scrollbar position
of the Page and not the Panel control. (BTW - If anyone knows how to
apply MaintainScrollPositionOnPostBack to a Panel, please let me
know!).

I've read articles about how to do this using an IE "Behavior" and an
..htc file but I was hoping to find something that might be less browser
specific. I'd searched the news groups and couldn't find anything so I
came up with my own solution which seems to work well. Because I
couldn't find a posted solution, I thought I might post this and hope
that it helps someone in the future.

The solution requires an ASP.Net HiddenField control to save the scroll
position when the form submits and of course, a Panel control with
scrollbars. In this case, I'm using horizontal scroll bars and my
example code will only work for horizontal positioning (although
vertical positioning is easy as I will show you). Here are the
controls:

<aspanel ID="pnlGallery" runat="server" ScrollBars="Horizontal"
Width="200px" >
<!-- Add your controls to the Panel in order to activate the scroll
bars -->
</aspanel>
<asp:HiddenField ID="hfScrollPosition" runat="server" />


In your Page_Load procedure, add the following code:

Dim CSManager As ClientScriptManager = Page.ClientScript

If Not CSManager.IsOnSubmitStatementRegistered(Me.GetType,
"SaveScrollPosition") Then

Dim JScript As String

JScript = "var HiddenField = document.getElementById('" &
hfScrollPosition.ClientID & "');" & vbCrLf

JScript &= "var ScrollElement = document.getElementById('" &
pnlGallery.ClientID & "');" & vbCrLf

JScript &= "HiddenField.value = ScrollElement.scrollLeft;" & vbCrLf

CSManager.RegisterOnSubmitStatement(Me.GetType, "SaveScrollPosition",
JScript)

End If

If Not CSManager.IsStartupScriptRegistered(Me.GetType,
"RetrieveScrollPosition") Then

Dim JScript As String

JScript = "var HiddenField = document.getElementById('" &
hfScrollPosition.ClientID & "');" & vbCrLf

JScript &= "var ScrollElement = document.getElementById('" &
pnlGallery.ClientID & "');" & vbCrLf

JScript &= "if(HiddenField.value != '')" & vbCrLf

JScript &= "{" & vbCrLf

JScript &= "ScrollElement.scrollLeft = HiddenField.value;" & vbCrLf

JScript &= "}" & vbCrLf

CSManager.RegisterStartupScript(Me.GetType, "RetrieveScrollPosition",
JScript, True)

End If
/////////////////////////////////////

You can find more info on the ClientScriptManager here:
http://msdn2.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.aspx

The RegisterOnSubmitStatement sets the javascript to run on the
postback (dropdownlist index change, button click, etc.) and the
RegisterStartupScript sets that javascript to run when the page loads.
On Postback, the horizontal position is stored in the HiddenField. When
the Page loads, the value is read from the HiddenField and the scroll
position is set.

For vertical scroll position there are only a couple of changes. First,
the Panel control must have Vertical (or Auto) scrollbars. Second,
instead of getting and setting ScrollElement.scrollLeft, get and set
ScrollElement.scrollTop. If you want both horizontal and vertical,
you'll need 2 HiddenFields to get the job done.

I hope this is helpful to someone else!