Telerik Forums / KendoReact

Spreadsheet - How to get the changes.

0 Answers 31 Views
Spreadsheet
naveed
Top achievements
Rank 1
naveed asked on 12 Jan 2024, 10:53 AM

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
Telerik team
commented on 16 Jan 2024, 09:22 AM

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
Top achievements
Rank 1
commented on 16 Jan 2024, 12:24 PM

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

No answers yet. Maybe you can help?

Tags
Spreadsheet
Asked by
naveed
Top achievements
Rank 1
Share this question
or