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

1 Answer 76 Views

Grid

Trustin asked on 04 Jan 2025, 05:56 AM

image-18.png

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, 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

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>
  );

1 Answer, 1 is accepted

Trustin

commented on 16 Jan 2025, 04:53 PM

Hi @Filip,

Thank you for your response.

After further investigation, I managed to resolve the issue on my own. The root cause was related to handling data fetching and loading through the Redux store before displaying it in the UI.

I appreciate your support and just wanted to share this for reference in case others encounter a similar issue.

Best regards,
Trustin