RadListBox automatic list repositioning behavior

3 posts, 0 answers
  1. Gilbert
    Gilbert avatar
    2 posts
    Member since:
    Oct 2013

    Posted 11 Apr 2018 Link to this post

    I am facing an annoying issue regarding the default behavior of RadListBox. If you have a list displayed that is long enough to show the scroll bars, scroll down a bit so the top selection is partially hidden by the top of the list box. When you click on the top selection, the list gets reorganized so that the selected item is now at the bottom of the list.

    To see what I'm talking about, you can use the demo: https://demos.telerik.com/aspnet-ajax/listbox/examples/overview/defaultcs.aspx

    Scroll down on the left list so that the top of France is cut off, so the top bar of the F is hidden but the lower case letters are all intact. Now select France. You see that the list is repositioned so that France is now at the bottom.

    Where this is an issue is when you associate double-click selection to the list. What happens is that on the first click the list gets reorganized, and the second click now selects the new element under the cursor. So using the above example, you double-click France but Brazil gets selected instead.

    Is there a way to disable the list reorganization and to retain the scroll position?

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4750 posts

    Posted 13 Apr 2018 Link to this post

    Hello Gilbert,

    I answered the support ticket opened by your colleague and I am pasting my answer here for convenience and in case someone else has a similar issue in the future.

    I have checked in a fix for this that should be live with R2 2018 (planned for mid-May). Here is a function override that clones this fix so you can paste it on the page and use it immediately. You should remove it once you upgrade to a release that contains the actual fix in our codebase.

    Telerik.Web.UI.RadListBoxItem.prototype.scrollIntoView = function () {
        var listBox = this.get_listBox();
        if (!listBox) return;
     
        var scrollableElement = listBox.get_childListElement().parentNode;
     
        var top = this.get_element().offsetTop;
        var bottom = top + this.get_element().offsetHeight;
        var isHiddenAtTop = top <= scrollableElement.scrollTop;
        var isHiddenAtBottom = (bottom - scrollableElement.scrollTop) >= scrollableElement.offsetHeight;
     
        var desiredScroll;
        if (isHiddenAtTop) {
            desiredScroll = top;
        }
        if (isHiddenAtBottom) {
            desiredScroll = bottom - scrollableElement.offsetHeight;
        }
        scrollableElement.scrollTop = desiredScroll;
    }


    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Gilbert
    Gilbert avatar
    2 posts
    Member since:
    Oct 2013

    Posted 13 Apr 2018 in reply to Marin Bratanov Link to this post

    Marin,

    This works fine. Thank you.

Back to Top