Scrolling to a Specific Item with Grouping and Paging in Kendo UI for Angular Grid

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

When working with the Kendo UI for Angular Grid, I noticed that the scrollToItem() method does not work when grouping and paging are enabled. Specifically, after grouping by a category, attempting to scroll to a specific item using scrollToItem does not have any effect.

This Knowledge Base article also answers the following questions:

• How to implement scrolling to an item in a grouped and paged Angular Grid?
• What workaround can achieve scrolling to a specific item with grouping in Angular Grid?
• How to manually calculate the position for scrolling to an item in a paged and grouped Grid?

Solution

To address the issue of scrolling to a specific item in a Kendo UI for Angular Grid with both grouping and paging enabled:

1. Note that the scrollToItem() method can only scroll to items available on the current page. When grouping and paging are applied, the desired item might not be on the current page.

2. Instead of relying on scrollToItem() method directly, manually calculate the position of the item within the grouped data. This requires custom logic to iterate through the grouped data and dynamically determine the skip property based on the group size.

3. Consider using virtual scrolling as an alternative, which automatically triggers the pageChange event and can successfully scroll to the desired location.

Manual Calculation and Scrolling

Here is an example approach for manually calculating the position and scrolling to a specific item in a grouped and paged Grid:

• Flatten the grouped data into a single array. This makes it easier to find the position of the specific item.

  ts

  public flatGroupedData = this.flattenItems(groupBy(products, this.group));
  
  public flattenItems(data: any): any[] {
    return data.flatMap((obj) => obj.items);
  }

• Iterate through the flattened array to find the specific item by its ID or another identifier. Calculate the number of items to skip to navigate to the page containing the item.

  The scrollToItem() method must be executed inside the NgZone onStable event to ensure that the new page rows are loaded.

  ts

  public itemToScroll = { idField: 'ProductID', id: 55 };
  constructor(public zone: NgZone) {}
  
  public scrollTo(grid: GridComponent) {
    flatGroupedData.forEach((item, index) => {
      if (item.ProductID === this.itemToScroll.id) {
        this.skip = Math.ceil(index / this.pageSize) * this.pageSize - this.pageSize;
        this.zone.onStable.pipe(take(1)).subscribe(() => {
          grid.scrollToItem(this.itemToScroll);
        });
      }
    });
  }

See Also

• Virtual Scrolling in Grid
• Grid Paging
• Grid Grouping