Scroll To Specific Item in TreeView Component

When searching for a specific item in TreeView component, you may require showing it in current view and making it visible. In this example, you will learn how to scroll to specific item quickly and show it in the current view.

There is a sample code below written in JavaScript, Angular, React and Vue that shows how to scroll to selected item in TreeView manually.

In above demo, you can select an item from the dropdown that you want to appear in the current view. When item is selected, the tree view will expand all parent items and scroll to specified item by making it visible with the current view of TreeView component.

You can also choose how scroll bar appears. There are two options: Static and Dynamic. With Static appearance, the scroll bar is always visible when there are more items than currently present in the view. On the other hand, with Dynamic appearance, the scroll bar will appear only when mouse hovers over TreeView space.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Scroll to Specific Item in TreeView and Make it Visible

With simple structures, scrolling to show a specific item is easy and straightforward. However, what if you have a large tree hierarchy where the target item is located deep as a child of many parent items. In this case, you may need to expand all parent items and change the scroll position manually.

The IntegralUI TreeView component already has a built-in method named scrollTo, which provides this kind of functionality. You only need to specify the item that you want to appear in the current view. In the process, this will expands all parent items and change the scroll position so that specified item appears in the view.

• JavaScript
• Angular
• React
• Vue

In this example, the dropdown contains all tree items present in the TreeView. When item is selected, the selectedIndexChanged event is fired where the item is applied to the scrollTo method of the TreeView and then set as selected.

In different cases, where you don't have a references to the item object, to find a specific item within the tree hierarchy you can use the finditemById method. This method can locate the item within the tree hierarchy using its id value. When found, you can scroll to the item object using the scrollTo method.

Conclusion

With large tree structures, it is useful to have a way to make a specific item visible in current view of the TreeView component. For this purpose, you can use the scrollTo method to scroll the tree so that the target item appears in the current view. In this process, all parent items of the target item are expanded, if necessary. This feature is useful when you manually have an item selected and you want to scroll to it.

IntegralUI Web is a suite of Inative web components that includes the TreeView. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.