ASP page scrolls to top on UpdatePanel update

Question

I am having a problem where I have an UpdatePanel that uses a timer to trigger to update an ASP graph with new points (essentially the guide at https://web.archive.org/web/20201205213920/https://www.4guysfromrolla.com/articles/121609-1.aspx under "Creating Real Time Charts"). I'm having a problem where whenever the timer ticks, the entire page scrolls to the top. How can I maintain the scroll position in the page when the timer ticks? I've tried the instructions at https://web.archive.org/web/20211020140248/https://www.4guysfromrolla.com/articles/111704-1.aspx and several other similar JavaScript solutions, but the x and y variables are getting wiped out whenever the timer ticks.

Code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="scmManager" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="updRealtimeChart" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <asp:Chart ID="chtRandomData" ...></asp:Chart><br />
            <asp:Repeater ID="valueRepeater"...></asp:Repeater>
            <asp:Label ID="errorLabel" Font-Bold="true" Font-Size="Larger" ForeColor="Firebrick" BackColor="Khaki" runat="server"></asp:Label>
            <asp:Timer ID="tmrRefreshChart" runat="server" Interval="300"></asp:Timer>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="periodUpdate" />
        </Triggers>
    </asp:UpdatePanel>
    ...etc rest of the page...

Edit: In the code behind, I've tried this to check what is going on:

public partial class _Default : System.Web.UI.Page
{
    public int count = 0;
    protected void Page_Init(object sender, EventArgs e)
    {
        Page.MaintainScrollPositionOnPostBack = true;
        count++;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        errorLabel.Text += count;
        ... }

When I run this, the UpdatePanel continuously adds a "1" to the errorLabel, indicating that the Page_Load and Page_Init functions are only occurring once, but the update panel is still shifting the scroll position.

score 5 · Answer 1 · answered Jun 22 '12 at 18:01

5

You can use document.body.scrollTop in javascript to store the scroll position and later assign it back. I used it and it worked for me.

Also try

Page.MaintainScrollPositionOnPostBack = true;

answered Jun 22 '12 at 18:01

Adil

146,340
25
209
204

Yeah I've tried those and it's still not working. Let me add to the above a few more details. – John Engel-Kemnetz Jun 22 '12 at 18:08

score 2 · Answer 2 · edited Jun 06 '16 at 13:23

2

I had a similar scenario. In my case I just needed one tick for triggering data sync, so the solution I used to avoid the page scrolling to the top when the update panel did the update was inserting this JavaScript just after the closing ScriptManager tag:

<script type="text/javascript">
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(beginRequest);
            function beginRequest() {
                prm._scrollPosition = null;
            }
</script>

I hope it works for you to.

edited Jun 06 '16 at 13:23

Jonnus

2,988
2
24
33

answered Jun 06 '16 at 12:59

Pedro Emilio Borrego Rached

316
3
10

I think you just followed the link provided by Code1008, thus the solution by Joe Niland. – Martin Braun Jun 08 '16 at 18:35
The code on the link provided by Code1008 will not work without inserting it "just after the closing ScriptManager tag", so yes, code talking, I used that solution in mine, but it was incomplete, and it took me a few runs, readings, compilations and test to fin out the right position for code insertion. Thanks for the comment! – Pedro Emilio Borrego Rached Jun 09 '16 at 09:02

score 1 · Answer 3 · edited May 23 '17 at 12:24

1

There are a couple of answers in Stack Overflow. Check this one:

How to avoid UpdatePanel scrolling on AutoPostBack?

edited May 23 '17 at 12:24

Community

1
1

answered Jun 22 '12 at 19:18

Geek

429
2
5

score 1 · Accepted Answer · answered Jun 22 '12 at 19:40

1

This looks like a familiar .NET Bug. Setting ClientIDMode=Auto on the Timer control should fix it

answered Jun 22 '12 at 19:40

graham mendick

1,839
1
17
15

ASP page scrolls to top on UpdatePanel update

4 Answers4

Linked