How to Enable Two-Way Communication Between SpreadJS and JavaScript

SpreadJS supports two-way communication with JavaScript on a webpage using its native APIs and event listeners. This allows external JavaScript functions to update spreadsheet data and layout, while changes made within SpreadJS can trigger JavaScript functions or external API calls.

No additional libraries or custom communication bridges are required.

Updating SpreadJS from JavaScript

To update spreadsheet data or layout from an external JavaScript function, access the SpreadJS workbook instance directly or retrieve it using GC.Spread.Sheets.findControl().

You can then use native methods such as:

• setValue() to update individual cell values.

• setArray() to populate a range of cells with data.

For bulk updates, use suspendEvent() and resumeEvent() along with suspendPaint() and resumePaint() to reduce unnecessary event processing and rendering, improving performance.

Triggering JavaScript from SpreadJS

To execute external JavaScript functions when spreadsheet data changes, use the sheet.bind() method to register SpreadJS event listeners.

Two commonly used events are:

• GC.Spread.Sheets.Events.CellChanged – Detects individual cell changes. You can filter for value changes and retrieve the affected row, column, and updated value to pass to an external function or API.

• GC.Spread.Sheets.Events.RangeChanged – Detects changes affecting multiple cells, such as pasting, clearing selections, or drag-filling.

These events allow your application to respond to spreadsheet changes and synchronize data with external systems.

The following sample demonstrates two-way communication between SpreadJS and webpage JavaScript:

• Updating spreadsheet cells through an external webpage input and button using setValue() and setArray().

• Detecting individual cell edits and multi-cell changes within SpreadJS.

• Triggering external JavaScript functions that log simulated API calls with updated cell values.

Download Sample: SpreadJS – Two-Way Communication

Native SpreadJS APIs and event listeners provide an efficient way to establish two-way communication between a spreadsheet and webpage JavaScript. This approach enables dynamic spreadsheet updates, event-driven integrations, and synchronization with external APIs without additional dependencies.