Maintaining page scroll position after updatepanel partial postback

Question

I am a beginner at ASP.NET and I have a problem maintaining the scroll position of the page after a partial postback of an UpdatePanel. I tried setting MaintainScrollPositionOnPostback="true" in <%@ Page Language="C#" ...%> but it didn't do the trick. Please note that I am using (and have to use) FireFox.

Any help would be appreciated. Thank you! Here is my code:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:HiddenField ID="ClassificationHiddenField" runat="server" />
<asp:HiddenField ID="DateHiddenField" runat="server" />
<table>
    <tr>
        <td>
            <asp:Panel ID="GroupTitlePanel" CssClass="titlePanelBold" BorderStyle="Ridge" runat="server"
                Width="400px">
                <table id="MainTable">
                    <tr>
                        <td align="center" class="style3">
                            <asp:Label ID="GroupLabel" runat="server">
                            </asp:Label>
                        </td>
                        <td align="center" class="style4">
                            <asp:Label ID="ReturnLabel" runat="server" Text="Expected Return">
                            </asp:Label>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <br />
            <asp:Panel ID="GroupMainPanel" runat="server" Width="400px">
            </asp:Panel>
        </td>
        <td width='100px'>
        </td>
        <td>
        </td>
    </tr>
</table>
<asp:Panel ID="BottomPanel" runat="server" BorderStyle="Ridge">
    <table>
        <tr>
            <td align="center">
                <br />
                <asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true"
                    runat="server">
                </asp:ToolkitScriptManager>
                <asp:CheckBoxList runat="server" ID="GroupCheckBoxList" RepeatColumns="10" RepeatDirection="Horizontal"
                    RepeatLayout="Table" AutoPostBack="true" ClientIDMode="AutoID" OnSelectedIndexChanged="GroupCheckBoxList_SelectedIndexChanged">
                </asp:CheckBoxList>
            </td>
        </tr>
        <tr>
            <td>
                <asp:UpdatePanel ID="GroupUpdatePanel" runat="server" Visible="true" UpdateMode="conditional">
                    <ContentTemplate>
                        <asp:Panel ID="GroupGraphPanel" runat="server" Visible="true">
                        </asp:Panel>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="GroupCheckBoxList" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </td>
        </tr>
    </table>
</asp:Panel>

Solution 1

This looks like the answer to your question. As a plus; it appears to work on every browser not just FF.

http://www.c-sharpcorner.com/Blogs/11804/maintain-scroll-position-on-postback-within-updatepanel.aspx

if you are using IE then its very simple just put the code in your page directive.

<%@ Page Language="C#" AutoEventWireup="true" 
 CodeFile="Default.aspx.cs" Inherits="_Default"
 MaintainScrollPositionOnPostback="true" %> 

but it will not work in Firefox for that you have to add one browser file into your website

Right click on solution explorer > Add New Item

Select Browser File and add it to App_Browsers folder.

Add MaintainScrollPositionOnPostback capability to this browser file as written below.

<browsers>
  <browser refID="Mozilla">
      <capabilities>
        <capability name="supportsMaintainScrollPositionOnPostback" value="true" />       
    </capabilities>   
  </browser>
</browsers>

Some times this also not work,

Then a simple solution just add a blank Update panel after the grid and onpostback just put the focus to that update panel it will work in any browser. in cs postbackevent updatepanel1.Focus();

If any problem just feel free to ask or any modification reply.

Solution 2

Though I understand that you are not familiar with javascript, still i'm suggesting this answer to you as there is no inbuilt solution for this in .net but you can achieve it with javascript with a work around. Don't worry Javascript ain't tough and is one of the important part of web development. So just give it a try. Might help you.

You can Refer to this Page : Maintaining page scroll position after updatepanel partial postback

<form id="form1" runat="server">
  <asp:ScriptManager ID="SM1" 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>

Solution 3

You can set focus on the control you'd like to see on the screen.

e.g if dropdownlist "ddlCity" is the control that causes the postback, then do the following after your dropdownlist SelectedIndexChanged code:

ddlCity.Focus();

Comments

[Krunal Patil]

are you open to options like jquery or javascript? or you want it to be done with it?

[Mayou]

ideally no jquery or javascript (since I am not familiar with either)...

[Krunal Patil]

As there is no inbuilt solution for this in .net but you can achieve it with javascript.

[Mayou]

Krunal, Thank you! But where should I place the script if my page is a content page? Should I place it in the master page? If so, where exactly (top, bottom, ...)? Also, if I am using ToolScriptManager, does it matter if I place the script before/after it?

[Mayou]

I like the last suggestion, since it seems pretty easy to implement. But for some reason, the page scrolls back up after partial postback even with that solution...

[Krunal Patil]

which framework of .net you are using? the difference is not so big, and it is better to avoid using ToolkitScriptManager. The main reason is that using standard CompositeScript feature you have more control on how scripts are combined and can optimized rendering of the page. you can refer to this stackoverflow.com/questions/6348589/… for Difference between ScriptManager and ToolScriptManager.

[De Wet Ellis]

He actually mentions that sometimes it doesnt work , and the second solution is not recommended. Krunal's solution works best.