LIDOR SYSTEMS

Advanced User Interface Controls and Components

Scroll To Specific Item in Angular TreeView

Created: 18 Oct 2017

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 use the scrollTo method of IntegralUI TreeView component that quickly locates and displays the target item.

TreeView component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

In above demo, you can set the id value to locate and display a specific item by scrolling the TreeView. If item with id equal to provided value is found, it will appear in the center of the view. If item is a child, all parent items are expanded in the process.

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

With simple structures, scrolling to show a specific item is easy and straightforward. But 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 scroll to. In the process, expands all parent items and changes the scroll position so that specified item appears in center of the TreeView.

scrollToItem(){
    let item: any = this.treeview.findItemById(this.itemID);
    if (item){
        // Use scrollTo method to scroll the view so that the item is visible
        this.treeview.scrollTo(item);

        // Select the item once it is present in current view
        this.treeview.selectedItem = item;
    }
}
                            

At first, we are using the finditemById method to locate the item within the tree hierarchy. If found, the item is set as parameter to the scrollTo method. When this method is called, it will scroll the tree so that the item appears in center of the view.

Note This only works when virtualMode is active.

Conclusion

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

This feature is useful when you manually have an item selected and you want to scroll to it.

The TreeView component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.