Spreadsheet - How to get the changes.

[naveed]

So here i am after 3 days of struggling with kendo excel sheet, i have this use case that i want to apply. 

I have data that i am showing on kendo spreadsheet. there is the one column under the name values and other columns are disabled,  that values column can be changed and applied at the same time in another column right by its side that is also disabled. 

Also the change in the value column and the new data that has been now modified with the new values in the excel i want it to be saved with me so i can use it.

is it possible in kendoReact spreadsheet ?

if yes, than can any one explain it step wise to me with proper basic code example of the kendoReact spreadsheet that will be great and appreciated. Also i am working on react.

Thanks

[Filip]

Hi, naveed,

Based on the provided description I understand that you wish to edit values in one specific column, see these changes reflected instantly in another disabled column next to it, and have the ability to save these updated values for later use, is that correct?

If this is the case, this will require implementing custom logic that will update the disabled cell value, you can use the onChange event to detect when a change has been triggered. As for saving values, I can recommend storing them in localStorage and retrieving them later:

https://stackabuse.com/storing-to-localstorage-in-react/

Regards,
Filip

[naveed]

Thanks Filip i got the onChange method the value is updated each time it is change, ill leave the code here for future if anyone have difficulty working around it. the only thing i left out of it is the next column value that is no big deal no. Yes localstorage will work fine now that i have this function

<Spreadsheet

                    ref={spreadsheetRef}

                    style={{

                      width: "100%",

                      height: 800,

                    }}

                    defaultProps={{

                      sheets: spreadsheetData,

                    }}

                    onChange={handleChange}

                  />

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]

  );