How to get the data from KendoReact spreadsheet in react

Question

I am facing the issue of not having idea how to get the data that have been changed into the spreadsheet. i have this use case that i want to complete which is when anyone changes the values in a column let say there are multiple columns and one of them is named values, now if only that column is changed then i want to have that changed data(new data) with me.

i have tried the onChange method but it seems that i have no luck working around it. can anyone help me with it and walk me through it, even the basic demo of the kendoReact spreadsheet will work for me and will be appreciated.

Answer 1

const handleChange = React.useCallback(
  (e) => {
    const sheetValues = e.range.values();
    const activeCellIndex =
      e.range._sheet._editSelection._activeCell.bottomRight.col;
    const activeValueIndex =
      e.range._sheet._editSelection._activeCell.bottomRight.row;

    const newData = spreadsheetData.map((sheet) => {
      return {
        ...sheet,
        rows: sheet.rows.map((row, rowIndex) => {
          if (row.cells && row.cells.length > 0) {
            const updatedCells = row.cells.map((cell, colIndex) => {
              if (
                colIndex === activeCellIndex &&
                rowIndex === activeValueIndex
              ) {
                const newValue = sheetValues[0][0] || "";
                return {
                  ...cell,
                  value: newValue,
                };
              }
              return cell;
            });

            return {
              ...row,
              cells: updatedCells,
            };
          }
          return row;
        }),
      };
    });
    setSpreadsheetData(newData);
  },
  [events, spreadsheetData]
);

It changes the exact place where you are working or editing.
In my case the structure was too complex for me to handle so I worked around and got this working. Feel free to review it and if it might help anyone later I'll be glad. Thanks