[BUG] Kendo Grid Virtual Scrolling mode: UI Not Reflecting Correct Data Despite Accurate Logs

[trungtruc056]

Description

We are encountering an issue in our React application where the UI does not display the correct data in a grid component, even though the logged data is accurate. The issue persists when scrolling up and down in the grid.

<GridColumn
            field="columnNo"
            title="columnNo"
            width="100px"
            cell={({ dataItem, field }) => {
              // eslint-disable-next-line no-console
              console.log('value: ', dataItem[field]);
              return (
                <td key={`row-${dataItem.id}`}>
                  <span itemProp={`columnNo${dataItem[field]}`}>
                    {dataItem[field]}
                  </span>
                </td>
              );
            }}
   />

return (
    <Wrapper itemProp="smart-table-selection">
      {loaders?.isLoading && (
        <>
          <Loading className="floated" />
          <LoadingMask />
        </>
      )}
      <div ref={refKendoTable}>
        <GridWrapper
          className="react-kendo-table"
          ref={kendoRef}
          style={{
            height: tableHeight + 56 - 16,
            marginBottom: 0,
          }}
          height={tableHeight - 16}
          rowHeight={56}
          data={orders.slice(page.skip, page.skip + PAGE_SIZE)}
          pageSize={PAGE_SIZE}
          total={numberOfRows}
          skip={page.skip}
          scrollable={'virtual'}
          onPageChange={pageChange}
          dataItemKey={tableDataCenter.selectionFieldName}
        >
          {/* Header selection checkbox */}
          <GridColumn
            field="selected"
            width="50px"
            headerCell={() => (
              <input
                type="checkbox"
                checked={isAllSelected}
                onChange={onHeaderSelectionChange}
              />
            )}
            cell={(props) => (
              <td>
                <input
                  type="checkbox"
                  checked={
                    selectedState[
                      // eslint-disable-next-line react/prop-types
                      props.dataItem[tableDataCenter.selectionFieldName]
                    ] || false
                  }
                  // eslint-disable-next-line react/prop-types
                  onChange={(e) => handleSelectionChange(e, props.dataItem)}
                />
              </td>
            )}
          />
          <GridColumn
            field="columnNo"
            title="columnNo"
            width="100px"
            cell={({ dataItem, field }) => {
              // eslint-disable-next-line no-console
              console.log('value: ', dataItem[field]);
              return (
                <td key={`row-${dataItem.id}`}>
                  <span itemProp={`columnNo${dataItem[field]}`}>
                    {dataItem[field]}
                  </span>
                </td>
              );
            }}
          />
          <GridColumn
            field={tableDataCenter.selectionFieldName}
            title={tableDataCenter.selectionFieldName}
            width="100px"
          />
          {/* {columnsRender} */}
        </GridWrapper>
      </div>
    </Wrapper>
  );

Troubleshooting Done:
Data Validation: Logged the dataItem, field, and dataItem[field] values, all of which are correct.
Key Prop: Verified that the key prop is used, though it may need adjustment.
React State Updates: Ensured the data is updated correctly and is not stale.
Grid Behavior: Temporarily removed custom cell rendering, but the issue persists with virtualization.
DevTools Inspection: Confirmed that DOM elements and attributes do not align with expected values during scrolling.

Environment Details:
Frontend Framework: React 18.2
Grid Component: @progress/kendo-react-grid": "^4.14.1"
Browser: Version 131.0.6778.140 (Official Build) (arm64)
State Management: Redux

Steps To Reproduce

Load the grid with virtualized data.
Scroll down to load additional rows.
Scroll back up to view previously rendered rows.
Observe that the data displayed in the UI does not match the expected data.

Screenshots or video

https://github.com/user-attachments/assets/d2622943-694f-440f-a352-c284b64372d8

Actual Behavior

Observe that the data displayed in the UI does not match the expected data.

Expected Behavior

The UI should reflect the correct data for each row based on the logs and the data passed to the grid.

Browser

Chrome

Browser version

latest

OS type

MacOS

OS version

Version 15.2 (24C101)

Last working version of the KendoReact package (if regression).

4.14.1