Grid with Groups, Virtual Scrolling and Selection does not function properly

[helm100]

I'm submitting a Feature request/Bug report

• Bug report

Similar issue: https://github.com/telerik/kendo-react/issues/1535

Current behavior

In a grid where virtual scrolling is enabled along with grouping, the GridSelectionChangeEvent contains faulty data.

Expected behavior

I expect the GridSelectionChangeEvent to point to the actual DataItem that was clicked

Minimal reproduction of the problem with instructions

Starting point: https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes/virtual/#toc-using-virtualization-with-grouping The bug is observable in this minimal working example: https://codesandbox.io/p/sandbox/zen-tree-mlp4pg Different rows are selected than the one that was clicked (for each group, the index is increased by 1).

What is the motivation or use case for changing the behavior?

I would like to be able to execute custom actions when a user clicks a row in a virtual grid. The action should depend on the actual field (row + column) that was clicked by the user.

Environment

Package versions: 8.0.0

Browser:

• Chrome (desktop)
• Firefox version

[iadnonov]

Hello @helm100 ,

Thank you for reaching out to us. This is a known issue, and it is logged in our public repository https://github.com/telerik/kendo-react/issues/1535. Our team will do their best to fix it and when we have any progress on the fix, we will update the issue.

Please excuse us for any inconvenience caused and if we can assist you with anything else, do not hesitate to submit a ticket in our support system.

Cheers, Ivaylo

[WissamProgress]

It is a regression between versions 7.3.0 and 7.4.0 for the Grid and is specific to using grouping, selection, and virtualization.

For 7.3.0 it was working - https://stackblitz.com/edit/react-kenryc-hgt7wj?file=package.json

For 7.4.0 it stopped working - https://stackblitz.com/edit/react-kenryc-amrqfp?file=package.json

[iadnonov]

Fixed in dev version 8.1.0-develop.19.

[helm100]

I tried it out and it still doesn't show correct behavior:

1. I forked https://stackblitz.com/edit/react-kenryc-amrqfp?file=package.json
2. Changed Kendo packages to 8.1.0-develop.19
3. Scrolled all the way down in the grid
4. Clicked rows; other rows got selected

[WissamProgress]

Same is the case with checkbox selection when combined with virtual scroll. The onSelectionChange event returns an incorrect row index, resulting in the selection of a different row.

https://stackblitz.com/edit/react-nigr7r?file=app%2Fapp.tsx,app%2Fshared-gd-products.json

Ticket ID: 1656732

[iadnonov]

After further investigation and consulting with the team, I am changing the issue to a feature request. The reason is that the combination of virtual scrolling with grouting and selection is not a supported combination with the current KendoReact Grid implementation and needs additional changes to achieve this scenario. The previously provided fix is unable to resolve the issue and cannot be considered a regression.

Please excuse us for any inconvenience caused and when we have any progress, we will update the issue.

[revov]

How is this not a bug, but a feature request when it's a combination of features not working and there is no indication neither at compile time, nor at runtime or anywhere in the documentation that these features are not supported together?

Btw, we are using Kendo version 8.1.1 and a slightly modified version of Kendo's getSelectedState that uses local state instead of global one. The onSelectionChange event that Kendo emits seems to contain the correct startDataItem and endDataItem, but the wrong startRowIndex/endRowIndex. So we do a quick lookup by ID on the leaf data items from the groups and obtain the correct absolute indexes for startDataItem and endDataItem that we replace in the event that we pass down to getSelectedState which seems to do the trick as a work-around.

[kdikov82]

A temporary workaround is to use the data key from the dataItem in the event:

  const onSelectionChange = (event: GridSelectionChangeEvent) => {
    const newState = {};
    newState[event.startDataItem[DATA_ITEM_KEY]] = true;
    setSelectedState(newState);
  };

https://codesandbox.io/p/sandbox/bold-dew-ydskkn?file=%2Fapp%2Fmain.tsx%3A41%2C1-45%2C5

The same approach can be used with the checkbox selection where you can append/remove items from the current selection

[filipKovachev]

Also requested in Ticket ID: 1660567