maintain Scroll position in Ajax page : The Official Microsoft ASP.NET Forums

Reply

eapeneapen

0 Points

maintain Scroll position in Ajax page

Aug 23, 2007 01:20 PM|LINK

Hi

I have a page that has lot of update panel inside it.On clicking on some of the controls it's taking a lot of time because of lot fuctions on th e server side.

Steps that cause the probleams

1 Clicked on button

2 Scrool to bottom portion

3 On time of updating the above portion cause the page to scroll up.

I need the page to mainatain the scroll position irrespective of the updating of portion in the page,

Could you please look in to the issue.

Thanks

eapen ,

Reply

Kiril2006

Member

305 Points

130 Posts

Re: maintain Scroll position in Ajax page

Aug 23, 2007 04:25 PM|LINK

I am not sure if i understand correctly the problem but here are few hints that can help you solve your problem.

When you clicked on the button - you call JS function OnClientClick(or onclick property) that will scroll to the bottom.

On you server side, you can call ScriptManager.RegisterStartupScript that will call scroll back to any postion when its done updating.

Hope that helps,

Reply

Jin-Yu Yin -...

All-Star

21280 Points

1824 Posts

Re: maintain Scroll position in Ajax page

Aug 29, 2007 08:16 AM|LINK

Hi eapeneapen,

To maintain the scrollTop/scrollLeft of the panel after the Ayncpostback return,Just do it as follow:

<%@ Page Language="VB" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = DateTime.Now.ToString()
    End Sub

</script>

<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>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">
                <ContentTemplate>
                    <asp:Panel ID="Panel1" onscroll="javascript:saveScroll();" runat="server" Height="50px" Width="125px" Style="position: static;
                        overflow: scroll; height: 350px; border: solid 1px blue; background-color: White;
                        display: none;">
                        <table border="0" cellpadding="0" cellspacing="0" width="480px">
                            <tr>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>
                        <asp:Button ID="Button3" runat="server" Text="Button" />
                    </asp:Panel>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                    <asp:Button ID="Button2" runat="server" Text="Button" />
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"
                        CancelControlID="Button3" TargetControlID="Button2">
                    </cc1:ModalPopupExtender>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>

    <script type='text/javascript'>
        var scrollLeft = 0;
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) {
            document.getElementById('Button2').click();
            setScroll();
        }

        function setScroll()
        {
                document.getElementById('<%= Panel1.ClientID %>').scrollLeft = scrollLeft;
        }
        function saveScroll()
        {
            scrollLeft = document.getElementById('<%= Panel1.ClientID %>').scrollLeft;
        }
    </script>

</body>
</html>

You can check this post for more information:ModalPopupExtender panel scroll position

You are not merely able to maintain the scrollTop/scrollLeft of the panel,You also can popup the panel automaticly after the Ayncpostback return if you are use Popup panel.

Best Regards

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support

Marked as answer by Jin-Yu Yin - MSFT on Aug 29, 2007 08:17 AM

Reply

bfancett

Member

247 Points

103 Posts

Re: maintain Scroll position in Ajax page

Nov 19, 2008 12:20 PM|LINK

Could you provide an example for ASP.NET 3.5 with C# Code Behind in seperate file?

maintain Scroll position in Ajax page RSS

3 replies

eapeneapen

maintain Scroll position in Ajax page

Kiril2006

Re: maintain Scroll position in Ajax page

Jin-Yu Yin -...

Re: maintain Scroll position in Ajax page

bfancett

Re: maintain Scroll position in Ajax page

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft