infinite scroll with row selection does not select all rows

[RivaIvanova]

A customer is using igx-grid with enabled row selection feature and implemented infinite scroll. After checking the header selector and scroll down in order to load more data only the first 10 rows (the chunk size) are selected, but the header checkbox state is still 'checked'. This could be observed in the following gif:

His requirement was to select all data when the header checkbox is checked, so a possible approach I have tried is using IgxGrid's selectAllRows method when scrolling the vertical scrollbar. In this case, the newly loaded rows are selected, however, the header selector state is indeterminate and remains indeterminate even after loading the final chunk of data. This could be observed in the following gif:

After an investigation, I have determined that this behavior is due to the values passed as selectedCount and totalCount properties of the headSelectorBaseTemplate's context i.e. when a new chunk of data is loaded the grid's data length is not changing, however the selected rows count keeps all selected records in the previous chunk of data. So, the elements count in these collections is different and the checkbox is marked as indeterminate.

• igniteui-angular version: 14.0.x
• browser: all

Steps to reproduce

1. Open this demo.
2. Select all rows via the header selector.
3. Scroll down to load more data.

Result

With no workaround - only the first 10 rows are selected. With a workaround - rows are selected, but the header selector checkbox is wrongly set to indeterminate.

Expected result

All rows should be selected and the indicator should be set accordingly.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[hanastasov]

Related to #10961