How to caputure an event of style change of an entire worksheet

Posted by: ichioka.yuji on 16 December 2024, 2:18 am EST

    • Post Options:
    • Link

    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%" }} />
      );
    }
  • Posted 17 December 2024, 3:18 am EST

    Hi,

    I have observed the mentioned behavior on my end but am unsure about it. I have reached out to the dev team for clarification. The internal tracking ID is “SJS-27777.” I will update you as soon as I receive any information.

    Regards,

    Priyam

  • Posted 24 December 2024, 1:35 am EST

    Hi,

    The developers have inquired about the specific use case and the reason you need to capture sheet-level style changes. Could you please elaborate on your exact requirements with some examples? This will help us better understand your scenario and share it with the developers.

    Regards,

    Priyam

  • Posted 2 January 2025, 9:24 am EST

    Hello,

    I am currently trying to develop a collaborative editing environment for spreadsheets. The environment includes a SpreadJS component and a simple toolbar. A user can select cells, rows, columns, or the entie worksheet and change styles for them with buttons on the toolbar.

    A style change for the entire worksheet should not be devided into style changes for individual rows or columns. Since the edit changes are sent to the other environment, it is desirable that the diff content to be sent be smaller.

    The above is the use case I am planning.

  • Posted 3 January 2025, 6:38 am EST

    Hi,

    Thank you for sharing your use case.

    Since you are customizing SpreadJS using your custom toolbar and handling actions via button clicks, you can track changes based on the actions triggered by those buttons. On each button click, you can store the relevant information and send it to another environment for further use as per your requirements.

    For reference, please check the attached sample: https://jscodemine.mescius.io/share/CrDrhswrd0OrFblFKIvv4g/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"]%2C"ActiveFile"%3A"%2Findex.html"}

    In the sample, there are two workbooks. When the background color of the first workbook is changed, the action triggered by the button is known and applied to the second workbook. Similarly, you can detect and handle the changes made using your custom toolbar.

    Regards,

    Priyam

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels