Listbox Scrolling to Top on autopostback

Question

Why does asp.net listbox always scroll to top upon selecting an item when autopostback is on? How can I prevent this from happening?

What does cause autopostback? What page life-cycle event to you handle? — abatishchev, Sep 01 '11 at 18:19

score 4 · Accepted Answer · answered Oct 25 '12 at 13:33

I added the following jquery in javascript to fix the issue. I cannot remember where I found the solution but here it is. Just add the location of your target control - $get('YourDiv_YourPanel').

<script type="text/javascript">
    //Maintain scroll position in given element or control
    var xInputPanel, yInputPanel;
    var xProductPanel, yProductPanel;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        yInputPanel = $get('MainContent_InputPanel').scrollTop;
        yProductPanel = $get('MainContent_ProductPanel').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('MainContent_InputPanel').scrollTop = yInputPanel;
        $get('MainContent_ProductPanel').scrollTop = yProductPanel;
    }
</script>

just to add to this solution, use this script inside the Content tag, and not the Head tag — Diogo, May 12 '14 at 11:40

score 3 · Answer 2 · answered Sep 18 '13 at 20:44

3

I had the same issue, and I figured out a way to do it with update panels. I believe it's due to the listbox being updated on postback, so update panels can help us make sure it doesn't update. Make sure the listbox is inside a conditional update panel with children as triggers set to 'false':

 <asp:UpdatePanel runat="server" ID="updtpnlSearchResults" UpdateMode="Conditional" ChildrenAsTriggers="false">

Now put whatever needs to be changed when the list box selection changes inside an update panel of its own. That way the listbox doesn't get refreshed.

answered Sep 18 '13 at 20:44

Adam Miller

767
1
9
22

1

Brilliant. Thank you @Adam Miller , it worked for me :) This solved a rather perplexing problem where I needed to update a counter on a separate update panel whenever the selection in an asp:checkboxlist changed *without upsetting the scrolling* of the aspcheckbox itself. I had place the list inside an update panel but, without your fix, the AutoPostBack=Yes caused the list to return to the top on each selection (very annoying for users!). Harrumph! – Zeek2 Nov 13 '20 at 16:00

score 0 · Answer 3 · answered Sep 01 '11 at 18:29

0

You need this page directive:

<%@ Page MaintainScrollPositionOnPostback="true" ... %>

answered Sep 01 '11 at 18:29

rick schott

21,012
5
52
81

1

I did that but it still scrolls to top. I also put it in update panel but no avail. I think i'll probably have to turn off AutoPostBack and write a Javascript function to hit the server with __doPostBack – Troy Mitchel Sep 01 '11 at 18:40
I'm not doing re-directs. How ever I am setting some label values within the event. – Troy Mitchel Sep 01 '11 at 18:53

score -3 · Answer 4 · answered Sep 01 '11 at 18:39

You have a couple of options. You can either set MaintainScrollPositionOnPostBack to true in the page directive, or you can put the listbox in an update panel and use AJAX to maintain scroll position.

Page directive option:

<pages maintainScrollPositionOnPostBack="true" />

Update panel option:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:ListBox ID="ListBox1" runat="server" ...>
    </ContentTemplate>
</asp:UpdatePanel>

Listbox Scrolling to Top on autopostback

4 Answers4