Grid: Remote Data loading with grouped column scrolling issue

[ddaribo]

Description

Scrolling with this configuration exhibits unexpected behavior.

• igniteui-angular version: 14.1.x, 14.0.x, 13.2.x
• browser: any

Steps to reproduce

1. Open this sample (forked copy of the demo in the topic , having the "ReorderLevel" column set as groupable)
2. Group by "ReorderLevel"
3. Scroll up/down multiple times

Result

On randomly scrolling, the grid reaches a state where no records appear. This is inconsistently reproduced:

Sometimes, after scrolling to top, the grid is not actually fully scrolled, observe the following cropped record:

Expected result

In version 12.x, grid with remote data loading and grouped columns seems to be working alright - sample here. It is expected that the grid works only with the loaded records at the time of grouping and updating them on scroll. Expected same behavior in newer versions, without records disappearing.

[mddragnev]

@ddaribo So the thing is that the sample is trying to group by locally and have remote virtualization in the meantime. We cannot expect these operations to work. The grouping should be implemented remotely again, so that the service sends correct already grouped data. This is kinda the same case we have when trying to have filtering/sorting. We should handle filtering and sorting before the data comes to the grid. Also, this sample did not have data property binded. I have checked the attached sample of 12.x that is kinda working but you can see what happens if you try to expand/collapse groups - it is not working very well. A remote group by can be implemented a little harder than what we have like sorting/filtering samples here in the topic

[ddaribo]

@mddragnev, Thank you for looking into it!

For the case of the demos, I am not sure that grouping can similarly be implemented as the Northwind/Products OData source does not seem to support grouping operations (example), as far as I tested. Also, I found this discussion from a while ago explaining some considerations as to why a remote grouping operation is not implemented.

Nevertheless, I tried the same for the other (overview) demo in the topic (you are right that the two demos differ in the way the data is bound), with the addition of taking the group rows (groupsRowList) length into account for the grid’s totalItemCount property. I notice a significant improvement in the scroll behavior even with grouped columns. Here is the sample.

Anyway, I think we can conclude that grouping with remote virtualization in this case is not really an ideal scenario, as at no point will the groups show correct count of total records for a group, as the grid works with only the currently loaded chunk of records.

[mddragnev]

@ddaribo, what I meant by "a little harder than what we have for implementing grouping" was that the user should implement the server and the data by himself. Anyhow I think that you can close this issue since we are on the same page of the question. On a side note, if the user case is always a remote grid with grouping on, you should probably recommend him take a look at tree grid. You can kinda think of it as a normal grid but with grouping.