Search code examples
asp.netupdatepanelpostbackscroll

Maintain Panel Scroll Position On Partial Postback ASP.NET


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

  • 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:-

    Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack