RadListBox automatic list repositioning behavior

[Gilbert]

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?

 

 

[Marin Bratanov]

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

[Gilbert]

Marin,

This works fine. Thank you.