Maintain Panel Scroll Position On Partial Postback ASP.NET

Question

I have a gridview that putted in ASP.NET Panel. both of panel and Gridview are in an UpdatePanel. there is a column in gridview that Causes Partial PostBacks. i want to Maintain Panel Scroll position on those postbacks. Is there any way? regards.

Solution 1

There is no built-in facility to resolve it in asp.net

However, there is a workaround for this problem; You need to handle it with javascript.

Solution is mentioned here: Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack

Edited 20-May-2012; after seeing the comments

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" />
   <script type="text/javascript">
      // It is important to place this JavaScript code after ScriptManager1
      var xPos, yPos;
      var prm = Sys.WebForms.PageRequestManager.getInstance();

      function BeginRequestHandler(sender, args) {
        if ($get('<%=Panel1.ClientID%>') != null) {
          // Get X and Y positions of scrollbar before the partial postback
          xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
          yPos = $get('<%=Panel1.ClientID%>').scrollTop;
        }
     }

     function EndRequestHandler(sender, args) {
         if ($get('<%=Panel1.ClientID%>') != null) {
           // Set X and Y positions back to the scrollbar
           // after partial postback
           $get('<%=Panel1.ClientID%>').scrollLeft = xPos;
           $get('<%=Panel1.ClientID%>').scrollTop = yPos;
         }
     }

     prm.add_beginRequest(BeginRequestHandler);
     prm.add_endRequest(EndRequestHandler);
 </script>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
     <asp:Panel ID="Panel1" runat="server" Height="300">
        <%-- Some stuff which would cause a partial postback goes here --%>
     </asp:Panel>
   </ContentTemplate>
 </asp:UpdatePanel>

</form>

Below is the code snapshot:-

Solution 2

Add MaintainScrollPositionOnPostback="true" to your page directive.

Comments

[Seattle Badger]

Outstanding!! Works like a charm!!

[Despertar]

The code in the picture works great though! Here is a link if you want to copy and paste, weblogs.asp.net/andrewfrederick/archive/2008/03/04/…

[Trikaldarshiii]

it wont help cause it maintain only page's scroll position not the div's or panels

[Trikaldarshiii]

I am updating grid view using timers and its not working in that case js never execute

[daniloquio]

It works perfect with jQuery changing $get( for $( and using scrollLeft() instead of just scrollLeft

[Barnabeck]

It worked for me only after changing the data that is bound to the LinkButton element within the panel and that causes the Postback. In my case I have a Repeater that builds a calendar, by joining seperate html bits which are saved in labels and one in the LinkButton. If the data bound to the LinkButton starts with a tag then the scrolling position would jump to the start. After placing the initial <td> in the previous label the scroll position is maintained as described here. Hope this might become useful to someone