kendo-react Virtual scrolling and selection not working together

Question

I was using kendo-react for my project. Virtual scrolling on API response works prefect. But I also wanted to use selection in same table. I was trying some solution but that didn't work for me.

What I want is select single row and select all data will working fine with virtual scroll.

This is my code, you can refer it.

    const [selectedState, setSelectedState] = React.useState({});

      const onSelectionChange = React.useCallback(
            (event) => {
                const newSelectedState = getSelectedState({
                    event,
                    selectedState: selectedState,
                    dataItemKey: DATA_ITEM_KEY,
                });
                // console.log("event", event, newSelectedState);
                console.log("event", newSelectedState);
                setSelectedState(newSelectedState);
            },
            [selectedState]
        );


return(
    <Grid
            style={{ height: "60vh" }}
            // data={dataState.slice(page.skip, page.skip + pageSize)}
            data={dataState?.map((item) => ({
                ...item,
                [SELECTED_FIELD]: selectedState[idGetter(item)],
            }))}
            pageSize={pageSize}
            total={total} skip={page.skip}
            scrollable={'virtual'}
            rowHeight={50}
            onPageChange={pageChange} cellRender={loadingCell}
            dataItemKey={DATA_ITEM_KEY}
            selectedField={SELECTED_FIELD}
            selectable={{
                enabled: true,
                drag: false,
                cell: false,
                mode: "multiple",
            }}
            onSelectionChange={onSelectionChange}
            onHeaderSelectionChange={onHeaderSelectionChange}
        >
            <GridColumn
                locked={true}
                field={SELECTED_FIELD}
                width="50"
                headerSelectionValue={
                    dataState.length === 0 ? false : dataState.findIndex((item) => !selectedState[idGetter(item)]) === -1
                }
            />
            <GridColumn
                field="Action"
                width="102"
                locked={true}
                cell={MyCustomCell}
            />
            <GridColumn field="Index" title="Index" width="75" />
            <GridColumn field="stone_id" title="Stone ID" width="75" />
            <GridColumn field="cert_no" title="Certificate No" width="105" />

        </Grid>
)

Answer 1

I could fix it by adding 'skip' to the GridSelectionChangeEvent's start and endRowIndex

const onSelectionChange: (e: GridSelectionChangeEvent) => {
    // When virtual scrolling is enabled, we should add the amount of skipped records to the event
    e.endRowIndex += skip;
    e.startRowIndex += skip;
    const newSelectedState = getSelectedState({
        event: e,
        selectedState: selectedIdsState,
        dataItemKey: idFieldName
    });
    setSelectedIds(newSelectedState);
};

I've got a minimal working example here: https://codesandbox.io/s/stoic-euclid-3t4ckp?file=/app/main.tsx

Note that I also made 'skip' part of the component's state, as in the doc's example.