Best Practice for Keeping Selected ListBox Item Visible After Postback?

6 posts, 0 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 06 Jan 2012 Link to this post

    I've implemented a RadListBox which will almost always have more items than will stack vertically, thus there's almost always a scrollbar.  For reasons I've explained in other threads, my application requires that a single-click and a double-click cause a server-side postback.  That part of the equation has long been built and is working fine.

    Where I've run into a problem is the age-old issue of selecting a ListBox item near the bottom, having the postback occur, and then the ListBox item no longer in exactly the same vertical position it was before and often not even visible.  I've read several threads in this forum addressing this problem and have come up with this solution of my own:

    In the server-side method that handles selecting a listbox item, I added this code:

          Page page = HttpContext.Current.CurrentHandler as Page;<br>      ScriptManager.RegisterStartupScript(page, page.GetType(), Guid.NewGuid().ToString(), "setTimeout(function() {scrollIntoView()}, 100);", true);

    Which in turns executes this code on the client after the postback is done:

      function scrollIntoView() {<br>    var slidingZone = $find($('table[id$=_radSlidingZone]')[0].id);<br>    var slidingPane = slidingZone.getPanes()[0];<br>    var listBox = $find($("#" + slidingPane.get_id() + " div[id$=_radListBoxStopes]")[0].id);<br><br>    var item = listBox.get_selectedItem();<br>    if (item != null)<br>      item.scrollIntoView();<br>  }

    It seems to be working "okay" but I'm just wondering if, in 2012, this is the best/easiest way to solve this problem or whether there's a simpler/better approach?

    Thank you,

    Robert



  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 11 Jan 2012 Link to this post

    Hello Robert,

    I'm glad that you have found a solution on your own, but in general it's hard to entitle a certain solution as the best one. Usually it depends on the specific scenario in which the problem occurs.

    In order to help you find another solution to your problem, please open a support ticket and provide a runnable sample with the issue being reproduced so we could debug it locally.

    All the best,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 11 Jan 2012 Link to this post

    Dimitar,

    I had always thought that you, at Telerik, preferred users of your products, posting queries here as the solutions then tend to help other developers too.

    In any case, I would have thought that the issue of keeping a scrolling listbox in place would have been a fundamental one from the start of the creation of the RadListBox.  That's why I posted my question about the Best Practice for effecting this outcome.

    Robert
  5. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 12 Jan 2012 Link to this post

    Through further testing I've now discovered that this method I've built is causing a strange JavaScript error that I can't resolve:

        private void EnsureSelectedListBoxItemRemainsVisible()<br>    {<br>      Page page = HttpContext.Current.CurrentHandler as Page;<br>      ScriptManager.RegisterStartupScript(page, page.GetType(), Guid.NewGuid().ToString(), "setTimeout(function() {scrollIntoView()}, 100);", true);<br>    }<br>

      function scrollIntoView() {<br>    var slidingZone = $find($('table[id$=_radSlidingZone]')[0].id);<br>    var slidingPane = slidingZone.getPanes()[0];<br>    var listBox = $find($("#" + slidingPane.get_id() + " div[id$=_radListBoxStopes]")[0].id);<br><br>    var item = listBox.get_selectedItem();<br>    if (item != null)<br>      item.scrollIntoView();<br>  }<br>

    Is there another way I can call the "scrollInfoView()" Javascript function for the selected item?

    Robert
  6. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 12 Jan 2012 Link to this post

    Please ignore my last post.  I figured out a way to do accomplish it.

    What would be great with a future release is if you could get the 'scrolllIntoView' function to precisely keep the listbox in the same position after the postback (to the pixel).  For example, imagine you have a listbox that can display 5 items at one time but there are 10 items in it.  Select the 9th item and cause a postback to occur.  When the listbox is redisplayed, while it's true that the 9th item will still be visible (and selected) it's absolute Y-position will not be identical to what existed before the postback.  It would be much better if it was.

    Robert
  7. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 17 Jan 2012 Link to this post

    Hi Rober,

    I've forwarded your request to our development team for consideration. As for your problem I'm glad that you have found a solution.

    Regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017