Grid row selection not working correctly in virtualization mode

Hi Jie,

Thank you for contacting us.

The issue with the selection with virtual scrolling is due to the data attributes added to the TR element, which provide an index based on the currently rendered items. We have logged issue for this particular problem, but meanwhile you can manually add the "id" of the data item to the TR element within the rowRender of the Grid and retrieve it from the target element within the onSelectionChage.

Here is an example demonstrating this approach:

• https://codesandbox.io/s/fancy-paper-rrclzd

 const onSelectionChange = React.useCallback(
    (event) => {
      let idValue = event.nativeEvent.target.parentElement.getAttribute(
        "data-key-value"
      );
      let newSelectedState = { ...selectedState };
      newSelectedState[idValue] = newSelectedState[idValue] ? false : true;
      setSelectedState(newSelectedState);
    },
    [selectedState]
  );

  const rowRender = (tr, props) => {
    let newProps = { ...tr.props };
    newProps["data-key-value"] = props.dataItem.ProductID;
    return <tr {...newProps}></tr>;
  };

Hope this helps.

Regards,
Konstantin Dikov
Progress Telerik