Posted 16 December 2024, 2:18 am EST
Hello,
I wanted to caputure an event of style change. In case of changing a style of a cell, a row and a column by calling the Worksheet.setStyle method, I was able to capture an event of each operation. However, it didn’t work in case of style change of an entire sheet.
Here is codes I tested.
import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016black.css';
import * as React from 'react';
import './App.css';
import Sheets = GC.Spread.Sheets;
export default function App() {
const host = React.useRef<HTMLDivElement|null>(null);
React.useEffect(
() => {
const workbook = new Sheets.Workbook(host.current!);
workbook.bind(Sheets.Events.SheetChanged, onSpreadChanged);
workbook.bind(Sheets.Events.RowChanged, onSpreadChanged);
workbook.bind(Sheets.Events.ColumnChanged, onSpreadChanged);
workbook.bind(Sheets.Events.RangeChanged, onSpreadChanged);
workbook.bind(Sheets.Events.CellChanged, onSpreadChanged);
const activeSheet = workbook.getActiveSheet();
const backColor = "#777700";
const style = new Sheets.Style(backColor);
activeSheet.setStyle(0, 0, style); // --> "an event captured: CellChanged"
activeSheet.setStyle(0, -1, style); // --> "an event captured: RowChanged"
activeSheet.setStyle(-1, 0, style); // --> "an event captured: ColumnChanged"
activeSheet.setStyle(-1, -1, style); // --> No logs... (not able to capture an event of style change of the entire sheet)
return () => workbook.destroy();
},
[]
);
const onSpreadChanged = React.useCallback(
(e: { type: string }, args: unknown) => {
console.log("an event captured: ", e.type);
},
[]
);
return (
<div ref={host} style={{ height: "90vh", width: "100%" }} />
);
}