MultiView & MaintainScrollPositionOnPostBack

Question

I have a page with a MultiView control, and some of the views are long enough to scroll. Since may of the controls in the reviews require postback to function properly, MaintainScrollPositionOnPostBack is enabled on the page.

I have a problem when the user transitions from one view to another. If they were at the bottom of a long view, and transition to another long view, the new view loads and is scrolled all the way to the bottom. I need to jump to the top of the page when the user goes to a new view within the MultiView.

I've tried using the OnActiveViewChanged event to: - call RegisterStartupScript to set window.location.hash to an anchor that I placed at the top of the page. - call RegisterStartupScript to call window.scrollTo(0,0) - set MaintainScrollPositionOnPostBack to false temporarily

The problem is that none of these seem to affect the actual transition postback, they take effect on the next postback, which actually causes a bigger issue.

Anybody have a proven method to have a MultiView page jump to top of page only on postbacks that transition to a new view?

score 4 · Answer 1 · answered Jan 31 '11 at 19:33

This is exactly the same problem I've been having today with a multiview.. I found your question and went looking for answers. Seems we found the same article!

(Article code in C#)

 private void ResetScrollPosition()
  {
      if (!ClientScript.IsClientScriptBlockRegistered(this.GetType(), "CreateResetScrollPosition"))
      {
          System.Text.StringBuilder script = new System.Text.StringBuilder();
          script.Append("function ResetScrollPosition() {");
          script.Append("  var scrollX = document.getElementById(\'__SCROLLPOSITIONX\');");
          script.Append("  var scrollY = document.getElementById(\'__SCROLLPOSITIONY\');");
          script.Append("  if (scrollX && scrollY) {");
          script.Append("    scrollX.value = 0;");
          script.Append("    scrollY.value = 0;");
          script.Append("  }");
          script.Append("}");

          //Create the ResetScrollPosition() function
          ClientScript.RegisterClientScriptBlock(this.GetType(), "CreateResetScrollPosition",
             script.ToString(), true);
          //Add the call to the ResetScrollPosition() function
          ClientScript.RegisterStartupScript(this.GetType(), "CallResetScrollPosition", "ResetScrollPosition();", true);
      }
  }

I've found an issue with this approach, in that it doesn't seem to work for my multiview inside an update panel, so you need to hook into the beginRequest and endRequest handlers, as per this answer: http://stackoverflow.com/questions/616210/reset-scroll-position-after-async-postback-asp-net. This lets me check the postback control and reset the scroll position only for specific control events in endRequest. — hearn, Feb 02 '11 at 12:23

score 1 · Accepted Answer · answered Jan 31 '11 at 18:31

1

Found an answer/workaround, finally: 4Guys

You have to trick ASP.Net into doing it for you by manipulating the hidden fields it uses for tracking the scroll position.

answered Jan 31 '11 at 18:31

Toby

7,354
3
25
26

MultiView & MaintainScrollPositionOnPostBack

2 Answers2