Scroll to item when paging

[Bram]

Hi,

The scolling to an item doesn't seem to be working when paging (and not on the correct page).

The demo also doesn't work (click the scroll to item 57 button):

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes#scrolling-to-a-specific-item

It there a fix or workaround?

Kind regards

[Hetali]

Hi Bram,

Thank you for reaching out.

Indeed, when the index is not present in the current page in the Grid with paging, the component does not scroll as specified in the article.

In order to scroll to an item in a different page, you will have to use manual paging and then scroll to the item. For example:

<kendo-grid #grid
  [data]="gridData"
  [pageSize]="pageSize"
  [pageable]="true"
  (pageChange)="pageChange($event)"
>
  <ng-template kendoGridToolbarTemplate>
    <button kendoButton (click)="scroll('ProductID', 70)">
      Scroll to Item 70
    </button>
  </ng-template>
</kendo-grid>

public scroll(field, id) {
  this.skip = this.pageSize * Math.floor(id / this.pageSize);
  this.loadItems();
  
  // Use setTimeout method to make sure the component has changed the page before scrolling
  setTimeout(() => this.grid.scrollToItem({idField: field, id: id }));
}

Output:

In this StackBlitz example, the component scrolls to the desired item present in a different page.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik