Maintain scroll position when update panel is in master page

Question

I have script manager and update panel placed in master page.

            <div id="nav">
               <asp:ScriptManager ID="ScriptManager1" runat="server"/>
            </div>
            <div id="mainchild">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:ContentPlaceHolder ID="HdrContentPlaceholderBody" runat="server">
                    </asp:ContentPlaceHolder>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

so this div is in master page and my child page has a grid view placed inside a panel.

      <asp:Content ID="pagecontent" ContentPlaceHolderID="HdrContentPlaceholderBody" runat="server">
           <asp:Panel ID="pnlAssignRole" runat="server" CssClass="popuppnl" Visible="false">
             <div class="close-image">
               <asp:ImageButton ID="ImageButton2" ToolTip="Close" runat="server" ImageUrl="~/App_Themes/Images/Close1.png" OnClick="btnAsgnCancel_Click" />
            </div>
            <table width="100%">
                <tr>
                    <td>
                        <div style="height: 600px; overflow: auto;">
                            <asp:GridView ID="grdEmpAssigned">
                            gridview content
                            </GridView>
                        </div>
                    </td>
                </tr>
            </table>
        </asp:Content>

in gridview on rowcommand it causes partial postback , i tried putting this piece of javascript below the updatepanel and also below scriptmanager in master page and in content page also, it did not help.. i think i am not getting where to place this javascript

      <script type="text/javascript">
                var xPos, yPos;
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                prm.add_beginRequest(BeginRequestHandler);
                prm.add_endRequest(EndRequestHandler);
                    function BeginRequestHandler(sender, args) {
                        try {
                            yPos = $get('ctl00_MainContent_scroll').scrollTop;
                            }
                        catch (err) { }
                    }
                    function EndRequestHandler(sender, args) {
                        try {
                            $get('ctl00_MainContent_scroll').scrollTop = yPos;
                            }
                        catch (err) { }
                    }
         </script>

please guide me in this.

Jalpesh Vadgama · Answer 1 · 2015-01-07T07:35:18.963

2

Please go thorugh this link. That might help you. http://dotnetcrunch.wordpress.com/2011/08/05/maintain-scroll-position-for-the-whole-page-after-asynchronous-postback/

Here is the code from above link. Put it in your header section of site.

<script type=”text/javascript”>
     var xPos, yPos;
     Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
     Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(EndRequestHandler);

     function BeginRequestHandler(sender, args) {
         xPos = document.body.scrollLeft;
         yPos = documnet.body.scrollTop;
     }

     function EndRequestHandler(sender, args) {
         document.body.scrollLeft = xPos;
         document.body.scrollTop = yPos;
     }
</script>

edited Jan 07 '15 at 07:35

answered May 30 '13 at 13:54

Jalpesh Vadgama

13,653
19
72
94

Works like a charm! @Jalpesh I'd suggest adding the code from the site in case the website goes down. – wegelagerer Jan 06 '15 at 22:53
If I may add my two cents worth. I was struggling with this and it didn't work. My page not only had an update panel, but used a Masterpage. The masterpage has the script manager on it. But not until I placed the javascript inside the update panel at the end, it worked. – Zath Mar 01 '16 at 18:39
document.body.scrollLeft and document.body.scrollTop are always reported as zero when I try to use this method – LairdPleng Oct 04 '22 at 09:38

score 0 · Answer 2 · answered Feb 22 '23 at 10:59

After several tryouts/errors and solutions which works only for first timer update event.

Scroll position was maintained but if you scroll after that, scroll position was always restored to first one!

Only working solution for me is:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <script type="text/javascript">

        var yPos;
        var ignoreNextScrollEvent = false;
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);


        window.addEventListener('scroll', (event) => {

            if (ignoreNextScrollEvent) {
                ignoreNextScrollEvent = false; // Ignore this event because it was done by AsyncPostBackTrigger
                return;
            }

            yPos = document.documentElement.scrollTop;
            //console.log('scroll: ' + yPos); // debug only
        });

        function BeginRequestHandler(sender, args) {
            ignoreNextScrollEvent = true;
            //console.log('auto begin: ' + yPos); // debug only
        }

        function EndRequestHandler(sender, args) {
            ignoreNextScrollEvent = true;
            document.documentElement.scrollTop = document.body.scrollTop = yPos;
            //console.log('auto end: ' + yPos); // debug only
        }

    </script>

    <asp:UpdatePanel ID="pnl_update" runat="server">
        <ContentTemplate>
        // auto updated content ...
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="tmr_update" EventName="Tick" />
        </Triggers> 
    </asp:UpdatePanel>

    <asp:Timer ID="tmr_update" runat="server" Interval="5000" OnTick="tmr_update_Tick"></asp:Timer>

Hope this helps someone ...

Maintain scroll position when update panel is in master page

2 Answers2