ASP.NET AJAX maintain panel scrolling position

After sometime in developing my Support Chat, I can get the panel scrolling to maintain it scroll position. Doing some Google don’t help much, only finding more complex solutions. A lot of people went with javascript, or something other. Then in the shower, I finally got, I can put the UpdatePanel inside the Panel, and then do the Aync post back. So I tried out my idea, and here the test code


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <h4>Maintain scrolling</h4>
        <asp:Panel ID="Panel1" runat="server" Height="100" Width="300" ScrollBars="Vertical" BorderWidth="1" BorderColor="#336699">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                    <asp:Timer ID="Timer1" runat="server" Interval="1000">
                    </asp:Timer>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <p></p>
        <h4>Lost scroll position</h4>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:Panel ID="Panel2" runat="server" Height="100" Width="300" ScrollBars="Vertical" BorderWidth="1" BorderColor="#336699">
                    <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
                    <asp:Timer ID="Timer2" runat="server" Interval="1000">
                    </asp:Timer>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
        <p>Try scrolling both to see the difference</p>
    </div>
    </form>
</body>
</html>

Just the show the new aync post back partial update information;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = Label2.Text += "new line";
    }
}

Now to see the results;

Yea, eureka its work!!! Why does it sound so easy? But this issue took me a month to figure out. Hope this was helpful you too.


Kick It on DotNetKicks.com

  • diego

    This work for an entire page ?
    because i have to refresh the data in a grid and every time i refresh, the scroll go to the top of the page.

  • http://www.sarin.mobi Sarin Na Wangkanai

    If you have UpdatePanel covering the panel where you have inner UpdatePanel too, therefore you will have the bigger updatepanel forcing the panel to scroll back up to the top. this is what i think is cause your issue.

  • nic

    Good smart idea!! Many times the simple things can resolve annoying problems!!

  • Sobin

    Thanks a lot..It was simply superb solution!

  • Jkjhkjh

    jklklkjlkj

  • gaurav

    Thanks, it works