Scroll to Selected Item in ListBox
In this example, you will learn how to scroll to selected item and show it in the current view of ListBox component. A sample code is available in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above demo, using a dropdown you can select an item and make it to scroll to the top of the current view of ListBox component. You can also choose how scroll bar appear as: Static or Dynamic. With Static appearance, the scroll bar is always visible if required and with Dynamic appearance, the scroll bar appears only when mouse hovers over the ListBox space.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Scroll to Selected Item in ListBox
The IntegralUI ListBox component has a built-in method named scrollTo, which you can use to scroll to specific item and make it appear in current view. In addition, whenever scroll position changes the scrollPosChanged event fires that you can handle in your code and provide custom action.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
In this example, the dropdown is populated from the list and you can use it to select a specific item to scroll to. When item is selected from the dropdown, the selectedIndexChanged event is fired that carries the selected item. By handling this event, you can call the scrollTo method and scroll the list so that selected item appears in current view.
In other cases when you don’t use a dropdown to determine the item, you can use the finditemById or findItemByText methods. These methods locate the item within the list using its id or text value. When calling these methods if the item is found, you can to scroll to it by using the scrollTo method.
Conclusion
If you have large list, and you want to find a specific item within the list and show it into the view, you can scroll to the item by use of built-in methods that are part of ListBox component. This feature is useful when you make selected item scroll to the top in the list.
ListBox is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.