CODEWITHSUNDEEP
c#jqueryasp.netwebforms
s.bramblet
s.bramblet

Reputation: 199

Prevent page from scrolling on postback

I'm working on an asp site that uses masterpages.

The page I'm struggling with is structured like this:

<asp:UpdatePanel ID="MainUpdatePanel" runat="server">
<ContentTemplate>
  <asp:Panel ID="Panel3" runat="server" CssClass="Panel">
  <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
    <asp:Panel ID="gridpanel" runat="server" Visible="false" ClientIDMode="Static">
        <asp:GridView ID="grdCombinedTransactions" runat="server" PageSize="40" AllowPaging="True" AllowSorting="true" etc etc >
                <asp:TemplateField HeaderText="GL Account" >
                    <ItemTemplate>
                        <asp:TextBox ID="txtGLAccount" runat="server" Text='<%# Bind("GLAccount") %>' CssClass="txtGLAccount" OnTextChanged="txtGLAccount_TextChanged" AutoPostBack="true"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
        </asp:GridView>
    </asp:Panel>
  </ContentTemplate>
  </asp:UpdatePanel>
</asp:Panel>

There are other panels with other updatepanels inside the MainUpdatePanel but this is the one I'm having problems with and specifically the GridView.

The txtGLAccount field causes a PostBack whenever it's text is changed. This PostBack scrolls the page so that the txtGLAccount field is at the bottom of the page.

I want to prevent any kind of scrolling since this behaviour looks 'jumpy' and is disruptive to the data entry workflow for this page.

Is this possible?

Thanks!

Upvotes: 1

Views: 2377

Answers (2)

Leo
Leo

Reputation: 14830

There are two things you can do:

  1. At the top of the page, in the Page directive, you can set the MaintainScrollPositionOnPostback property to true. This will cause the page to go back to the same scroll position after a postback (whether a full postback or an async postback)

  2. You can use javascript to issue the postback manually to a service, handler or even a page method. Using the jquery plugin to achieve this is quite straight-forward

The easiest and quicker method is obviously option 1 since you only have to turn on the above-mentioned flag. But, the user-experience might not be the best, especially if this is a large page you might see the page freezing a bit while receiving a response from the server or while issuing a request through the update panel.

Option 2 is by far the best option, but there's a bit of effort involved to make the setup the client communication with the server. The postback occurs so transparently to the user that you might event think nothing is happening if there's no visible feedback to the user such as a "loading" and/or "success" message

Upvotes: 3

eyegropram
eyegropram

Reputation: 672

Have you tried using triggers for the update panels? (AsyncPostBackTrigger)

Check out: What is the difference between AsyncPostBackTrigger & PostBackTrigger?

You can also use Page.MaintainScrollPositionOnPostBack Property but you likely want an asynchronous call to keep the page from "jumping" since this will just scroll the window to the location it was when posting back.

Upvotes: 1

Related Questions