Scroll To Specific Row in Angular TreeGrid

Created: 27 October 2017

In this example, you will learn how to use the scrollTo method of IntegralUI TreeGrid component that scrolls the grid and displays a specific row in center of the current view.

In above demo, you can set the id value to locate and display a specific row by scrolling the TreeGrid. If row is found, it will appear in the center of the view. If row is a child, all parent rows are expanded in the process.

How to Make Specific Row Visible in Angular TreeGrid by Scrolling to It

The IntegralUI TreeGrid component already has a built-in method named scrollTo, which scrolls the grid view to position at which the target row is visible. This method accepts any row object as an argument. If row is part of grid data, the grid view will be scrolled so that the row will appear in the center of the view. In the process, expands all parent rows (if any).

• Angular

scrollToRow(){
    let row: any = this.treegrid.findRowById(this.rowID);
    if (row){
        // Use scrollTo method to scroll the view so that the row is visible
        this.treegrid.scrollTo(row);

        // Select the row once it is present in current view
        this.treegrid.selectedRow = row;
    }
}
                            

If you don't have a reference to the row object, you can locate it by using the findrowById or findRowByText methods. If found, you can set the row object as parameter to the scrollTo method. When this method is called, it will scroll the grid view so that the row appears in center of the view.

Conclusion

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

This feature is useful when you manually have a row selected and you want to scroll to it, from the code.

The TreeGrid component is part of IntegralUI Web.