Section:

Listen to Spreadsheet Editor events

Requirements
View Demo
Web SDK
Package: Spreadsheet Editor

Spreadsheet Editor events enable your application to respond to changes and user interactions within the Spreadsheet Editor.

Events are exposed through the SpreadsheetEditorManager class and can be used to detect editor initialization, edit mode changes, sheet updates, cell modifications, selection changes, and formula bar actions. Subscribe to these events to implement custom workflows, synchronize application state, validate data, and extend the editor experience.

Editor events

Editor events provide notifications about the overall Spreadsheet Editor lifecycle and state. For example, these events occur when the editor is initialized and when the editing mode changes.

Initialize the editor

The spreadsheetEditorReady event fires when the editor has finished initializing and is ready for use. Use this when you want to perform editor operations immediately on load.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
5    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
6
7    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
8      spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
9    });
10  });

Related Links

Detect edit mode changes

The spreadsheetEditorEditModeChanged event fires when the editor changes modes. Use this to detect when the editor changes to view or edit mode.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
5    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
6
7    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.EDIT_MODE_CHANGED, (mode) => {
8      // console.log('Mode changed', mode);
9    });
10  });

Related Links

Worksheet events

Sheet events are triggered when users interact with worksheets or when sheet-level changes occur, such as switching between sheets or modifying worksheet content.

Detect active sheet updates

The activeSheetChanged event fires when the editor has switched to a different sheet.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
5    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
6
7    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.ACTIVE_SHEET_CHANGED, (event) => {
8      // console.log('Active sheet index', event.getSheetIndex());
9    });
10  });

Related Links

Track worksheet changes

The sheetChanged event fires when a sheet's state changes, such as renaming, deletion, creation, or visibility. The available options are listed in the SpreadsheetChangedActions definition.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
5    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
6
7    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SHEET_CHANGED, (event) => {
8      const { SpreadsheetChangedActions}  = SpreadsheetEditor.SpreadsheetEditorManager;
9      if (event.action === SpreadsheetChangedActions.CREATE_SHEET) {
10        // console.log('Sheet name', event.sheetName);
11        // console.log('Active sheet index', event.getActiveSheetIndex());
12        // console.log('Visible sheets', event.getVisibleSheets());
13      }
14    });
15  });

Related Links

Cell events

Cell events notify your application when cell data or selections change. Use these events to react to data updates, refresh dependent UI elements, or implement validation logic.

Track cell and range updates

The dataChanged event fires when a cell or cell range is modified. Changes can include values, styles, cut or paste, merge or unmerge, and add or remove rows and columns. The DataChangeType type shows all available options.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
5    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
6    const { DataChangeType } = SpreadsheetEditor.Types;
7
8    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.DATA_CHANGED, (event) => {
9      // console.log('Sheet index', event.sheetIndex);
10      // console.log('Cell ranges', event.cellRanges);
11      // console.log('Change type', event.changeType);
12      if (event.changeType === DataChangeType['DATA_CHANGE']) {
13        // console.log('Data change was detected');
14      }
15    });
16  });
17

Related Links

Detect cell selection changes

The selectionChanged event fires when the editor selects a different cell. The editor will fire an event on initialization to indicate it has selected the top-left cell.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
5    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
6
7    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SELECTION_CHANGED, (event) => {
8      // console.log('Cell range', event.getCellRange());
9      // console.log('Bounding cells', event.getBoundingCells());
10      // console.log('Selected range', event.getSelectionRangeDisplayValue());
11      // console.log('Is merged', event.isMerged());
12      const clipboard = event.getClipboard();
13      if (clipboard.canCopy()) {
14        clipboard.copy();
15      }
16    });
17  });

Related Links

Formula bar events

Formula bar events notify your application when users interact with the formula bar. Use these events to monitor formula input, surface formula information, and provide search suggestions as users build formulas.

Track formula bar inputs

The formulaBarTextChangedEvent event fires when the formula bar text input changes. The following code shows how to listen to the text changed event and log each segment of the formula bar using the getInfo() function.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
5    
6    const formulaBarTextChangedHandler = (e) => {
7      const segments = e.getInfo();
8      for (let i=0; i<segments.length; i++) {
9        console.log(`${segments[i].text} - ${segments[i].color}`);
10      }
11    };
12    
13    spreadsheetEditorManager.addEventListener(
14      SpreadsheetEditor.SpreadsheetEditorManager.Events.FORMULA_BAR_TEXT_CHANGED,
15      formulaBarTextChangedHandler
16    );
17  });

Related Links

Access formula information

The formulaHelpEvent event fires when the selection of a formula is confirmed, like =SUM(, and returns the formula name, description, and parameter information. The following code sample shows how to listen to the help event and log the available formula information using the getFormulaInfo() function.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
5    
6    const formulaSearchEventHandler = (e) => {
7      const formulaInfo = e.getFormulaInfo();
8      if (formulaInfo) {
9        console.log(formulaInfo.name);
10        console.log(formulaInfo.description);
11        console.log(formulaInfo.details);
12        console.log(formulaInfo.parameters);
13      }
14    };
15    
16    spreadsheetEditorManager.addEventListener(
17      SpreadsheetEditor.SpreadsheetEditorManager.Events.FORMULA_HELP,
18      formulaSearchEventHandler
19    );
20  });

Related Links

Detect formula searches

The formulaSearchEvent event fires when a user types in the formula bar before confirming a formula. The editor returns a list of formulas that closely match the search query. It must start with an equals sign (=) to trigger the search. The following code sample shows how to listen for the search event and log the results as an array.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
5    
6    const formulaSearchEventHandler = (e) => console.log(e.getFormulaInfoItems());
7    
8    spreadsheetEditorManager.addEventListener(
9      SpreadsheetEditor.SpreadsheetEditorManager.Events.FORMULA_SEARCH,
10      formulaSearchEventHandler
11    );
12  });

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales