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.
Steps to Reproduce:
- Load the grid with paginated or 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.
Expected Behavior:
The UI should reflect the correct data for each row based on the logs and the data passed to the grid.
Observed Behavior:
- The logged values for each grid cell (
dataItem[field]) are correct. - However, the displayed data in the UI does not align with these logs.
- This issue appears to occur when using the following custom cell rendering logic:
<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>
);
}}
/>
Troubleshooting Done:
- Data Validation: Logged the
dataItem,field, anddataItem[field]values, all of which are correct. - Key Prop: Verified that the
keyprop is used, though it may need adjustment. - React State Updates: Ensured the
datais 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
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>
);
};
Hi, Trustin,
I inspected the provided code and used it to piece together an example in an attempt to reproduce the described issue, however I was not able to:
I suspect that the issue might stem from the Redux store, however this is just a guess, I can recommend inspecting it and making sure that the state is updated properly (in case you haven't tried that already).
In case the issue persists, since it will be quite hard to pinpoint the root-cause for the UI not reflecting the correct data just by looking at code alone, can you please modify the example above so that the described undesired behavior reproduces? This will enable me to debug it locally and look for a possible solution.
Regards,
Filip