angularprimengprimeng-table

Primeng12 Table with virtual scroll + lazyload + checkbox selection


I have an old v12 angular/primeng based app that I am trying to retro fit checkbox selections on a table with virtual scrolling and lazy loading. I can initially toggle to select all the visible rows, but when performing a scroll to lazy load more items, the main checkbox header control doesnt stay selected, and the new rows that appear dont get marked as checked either.

https://stackblitz.com/edit/angular-zavyn1?file=src/app/app.module.ts

I know I am on an older primeng version, just wondering if there are any workarounds to get this functionality behaving, I did consider implementing my own checkbox selection behaviour, but that seems overkill.

I see this was tracked in an issue here which has since been fixed from v13 onwards in this commit I believe. Wondering if there is a way to override the methods on the table\checkbox header instance for the table in my stackblitz example above and bring in the patch fixes?


Solution

  • I'm sorry for making a wrong assumption before. The behavior you described is how it should work.

    The current version is not working as they implemented it wrong, so ver 12 won't work. Detail: https://github.com/primefaces/primeng/issues/10697

    But the new version is working as expected. I just forked the link from the homepage and make some changes. You can see the forked link here: https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-p2j757?file=src/app/app.component.ts
    Your original code also missed the part where you need to listen for the select/click event on the header.

    If you wanted to "fix" the issue in the old version, you can just copy the patch from the new version. The code is under updateCheckedState