Grid scroll to top

[Jaspreet]

Hi,

In our use case, there are two tabs in a card having kendo grid each. If user is on first tab grid and scroll down to any row eg 300, and switches the tab. Now if user returns back to first tab again, dataStateChange  event returns skip as 0 for the first grid and because of that it scrolls to top, but the expectation is to remain on row 300. Virtual scroll is enabled in both the grids. Similar behavior can be observed in https://www.telerik.com/kendo-angular-ui/components/grid/, when user navigates from one page to another.

 Is this the expected behavior or there is a way to keep the scroll at the earlier position.

Please suggest.

Regards,

Jaspreet

 

[Margaret]

Hi, 

Is there a multi-tab solution for maintaining grid scroll position?

Regards,

Margaret

 

[Dimiter Madjarov]

Hello Jaspreet,

In this scenario I would suggest to utilise the scrollTo method of the Grid

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-scrollto

It allows scrolling to a specified row and/or column. I would recommend to store the the row number that user has scrolled to when switching tabs. When getting back to the tab, invoke the scrollTo method with the stored row number.

I hope this information helps. Let me know if I could assist further with the issue.

Regards,
Dimiter Madjarov
Progress Telerik

[Jaspreet]

Hi Dimiter,

We have tried using scrollTo method. It works find in case there is only one grid. The issue is reproducible in case there is a tab-group and there are two tabs each having a grid.

We have added an example in the stackblitz link https://stackblitz.com/edit/angular-9dvcyb-uznhum?file=app%2Fapp.component.ts,service.ts,app%2Fapp.module.ts .

In this case, in tab 1, we have set this.grid.scrollTo({ row: 100 }); And when we select tab 2 and navigate back to tab 1, then empty grid is displayed. On scrolling mouse a bit again loads the grid data and scrolls to 100th row.

Please let me know in case any other details is required.

Regards,

Jaspreet

 

[Martin]

Hi Jaspreet,

You can set preserveContent to the mat-tab-group to keep the content in the DOM while tab is off-screen

<mat-tab-group preserveContent>

<mat-tab label="First">