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.

Published by

Sarin Na Wangkanai

an Information Technology Expert, Founder of Sathai Corporation, Thailand Telecommunication Company. Skilled in advance programming, and hold a degree in Industrial Engineering.

  • diego
  • http://www.sarin.mobi Sarin Na Wangkanai
  • nic
  • Sobin
  • Jkjhkjh
  • gaurav