Grid scroll to top

1 Answer 2238 Views
Grid
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Jaspreet asked on 28 Apr 2021, 11:51 AM

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
Top achievements
Rank 1
commented on 03 Oct 2022, 06:38 PM

Hi, 

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

Regards,

Margaret

 

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 02 May 2021, 09:17 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jaspreet
Top achievements
Rank 1
commented on 28 Sep 2022, 04:58 AM

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 Bechev
Telerik team
commented on 05 Oct 2022, 07:21 AM

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">
Tags
Grid
Asked by
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Answers by
Dimiter Madjarov
Telerik team
Share this question
or