Listbox - how do I maintain scroll position?

Posted on 2005-04-06
Last Modified: 2012-08-14
I have a listbox web control that has about 100 items.
The user scrolls down to find an item he wants to select, clicks an ADD button to "move" it to another listbox that contains the items "selected" from the big list.
Clicking the ADD button causes a PostBack.

Scenario: User scrolls to item 50, about half way down the big list.  Selects an item and clicks ADD.  The item is moved correctly to the selected list, but the big list is reset to item #1, which is the top of the list.  I would like for the list to remain on position #50 after the postback.  

I've searched alot through Google, but I can only seem to find help on maintaining PAGE position.
Question by:dnowak
    LVL 21

    Expert Comment

    Try setting SmartNavigation = True in your forms. But i think this is ie specific. Anyways please give it a try.


    Author Comment

    Nope.  Been there, done that.
    It doesn't work anyhow - not even in IE6.
    I need a real solution, one that will work on all browsers.
    LVL 11

    Expert Comment

    Well, you can use a hidden text or somekind of object to store selectedindex once user selected a item in biglistbox.

    Once page is postedback you check that hidden object if there is any selected index is avilable.

    If soo then explicitly make biglistbox's current selectedindex to the one which is there in hidden object.

    This should work fine for you...

    LVL 8

    Expert Comment


    Take help of predefined anchors.
    Then you may jump/stay back at a specified position by mentioning anchor name in the url.
    This definitely works on all browsers.
    E.g., See the URLS how you receive in mails when  a new post is available in current thread of Expert Exchange.

    To define an anchor -----> <a name="myanchor1"></a>
    To jump to an anchor named "myanchor1"
    -----> <a href="#myanchor1">Jump</a>
    or http://URL_OF_THE_PAGE/PAGE_NAME#myanchor1
    or <a href="#myanchor1">

    Hope this gives an idea.
    LVL 9

    Accepted Solution

    If you're simply transfering one item to another then why don't you use javascript?  Then there won't be any postback at all?

    Otherwise, there are loads of ways of maintaining the state, using the viewstate object is probably best.

    ie, in your listbox click event:

    ViewState["selIndex"] = lstBox1.SelectedItem.Value;

    Then in your page load

    if (ViewState["selIndex"] != null)
         lstBox1.SelectedIndex = ViewState["selIndex"];

    LVL 9

    Expert Comment

    Incidently, if you mean physically scrolling the list to item 50 then i'm pretty sure it can't be done.

    Let me have a quick look
    LVL 9

    Expert Comment

    Nope, don't think it can with a web control.
    LVL 6

    Expert Comment

    I'm currently using a great bit of help i got from here on IE6 (but i can't remember the PAQ#):

    Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.PreRender  
    RegisterHiddenField("scrollLeft", Convert.ToString(Request.Form("scrollLeft")))  
    RegisterHiddenField("scrollTop", Convert.ToString(Request.Form("scrollTop")))  
       Dim sb As New System.Text.StringBuilder(1000)  
       Dim nl As String = Environment.NewLine  
       With sb  
         .Append("<script language = ""javascript"">")  
       .Append(String.Concat(nl, "<!--", nl))  
         .Append("function SmartScroller_GetCoords() {")  
         .Append(String.Concat(nl, "var scrollX, scrollY;", nl))  
         .Append("if (document.all) {")  
         .Append(String.Concat(nl, "if (!document.documentElement.scrollLeft)", nl))  
       .Append("scrollX = document.body.scrollLeft;")  
         .Append(String.Concat(nl, "else", nl))  
         .Append("scrollX = document.documentElement.scrollLeft;")  
         .Append(String.Concat(nl, "if (!document.documentElement.scrollTop)", nl))  
         .Append("scrollY = document.body.scrollTop;")  
         .Append(String.Concat(nl, "else", nl))  
         .Append("scrollY = document.documentElement.scrollTop; }")  
         .Append(String.Concat(nl, "else {", nl))  
         .Append("scrollX = window.pageXOffset; scrollY = window.pageYOffset; }")  
         .Append(String.Concat(nl, nl))  
       .Append("document.getElementById('scrollLeft').value = scrollX;")  
        .Append("document.getElementById('scrollTop').value = scrollY;")  
        .Append(String.Concat(nl, "}", nl))      

         .Append(String.Concat(nl, "function SmartScroller_Scroll() {", nl))  
         .Append("var x = document.getElementById('scrollLeft').value;")  
         .Append(String.Concat(nl, "var y = document.getElementById('scrollTop').value;", nl))  
         .Append("window.scrollTo(x, y); }")  
         .Append(String.Concat(nl, nl, "window.onload = SmartScroller_Scroll;"))  
         .Append(String.Concat(nl, "window.onscroll = SmartScroller_GetCoords;", nl))  
         .Append("window.onclick = SmartScroller_GetCoords; window.onkeypress = SmartScroller_GetCoords;")  
         .Append(String.Concat(nl, "// -->", nl))  
       End With
       RegisterClientScriptBlock("scrollCode", sb.ToString)  
     End Sub  

    'just insert that block into your page and when you postback, your screen position will stay the same.

    hope this helps,
    LVL 9

    Expert Comment

    Guys,  i don't think he's talking about maining page state, i think he's talking about the actual list box shooting back up to the top.

    That's what i got from it anyway????

    LVL 9

    Expert Comment

    sorry, when i say page state i meant page position
    LVL 9

    Expert Comment

    >> I've searched alot through Google, but I can only seem to find help on maintaining PAGE position.

    See  :)

    Author Comment

    I am resigning myself to the fact that javascript is the only way to do it.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
    A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
    Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
    Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now