Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Virtual scroll +lazy load table with Route Reuse strategy - reopen with stackblitz #11179

Closed
tigrenok00 opened this issue Feb 14, 2022 · 3 comments

Comments

@tigrenok00
Copy link

Hi,
I'm using table with virtual scroll and lazy load and having issues when turning on angular route reuse strategy. When the table is not scrolled (first row visible) everything is fine, but when the table is scrolled to some point, coming back to the page results with the table cut to the scroll point - the headers are shown at the scroll point and the previously loaded data is missing. If I scroll a bit at this point, the data and headers are restored always from the top. Is there a fix for this, or even an event or table function that can be called to fix the table when returning to the page? (keeping the data and the scroll state, of course, this is the idea)

Before leaving the route the scrolled table looks like this:
153826230-8e8638b6-7571-429f-932f-3751a3da7ca6

After returning to the route (we use route reuse strategy), instead of the table looking exactly the same at it was left, it looks like this:
153826345-cd92f83f-7de8-451f-9ddb-244a5969e48e

See stackblitz with route reuse: go to page B, scroll the table, go to page A, return to page B - table did not keep the state of scroll and data (shown blank). If you do this without scrolling the table, the data is kept upon returning.

Stackblitz:
https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-dxvheu?file=src/app/app.module.ts

<p-table *ngIf="!loading" [value]="displayedUsers" [scrollable]="true" scrollHeight="flex" [virtualScroll]="true" [virtualRowHeight]="40" [lazy]="true" [rows]="50" (onLazyLoad)="lazyLoad($event)" [lazyLoadOnInit]="false" selectionMode="single" dataKey="userId" >

"primeng": "^13.1.0",
"@angular/core": "~13.1.3",

@yigitfindikli yigitfindikli added this to the 13.Future milestone Feb 14, 2022
@yigitfindikli yigitfindikli added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Feb 14, 2022
@tigrenok00
Copy link
Author

Any updates on this one?

@tttt22
Copy link

tttt22 commented Jun 2, 2022

I am having the same issue.
I added a scrollbar to the page but the reuse strategy was not scrolling that either. So it's probably not a primeng issue.

@mertsincan
Copy link
Member

Hi,

Fixed for PrimeNG 14. We changed our virtualScroll implementation. We designed a new scroller API instead of Angular cdk and used it in all components.
#11656
#11664

https://www.dropbox.com/s/tmho3ii70viilgg/virtualscroll.mov?dl=0

Best Regards,

@mertsincan mertsincan removed this from the 14.Future milestone Jun 28, 2022
@mertsincan mertsincan removed the Status: Pending Review Issue or pull request is being reviewed by Core Team label Jun 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants