Events in React Spreadsheet Component

24 Jul 202624 minutes to read

The Spreadsheet component triggers events for creation, data binding, selection, editing, clipboard actions, sorting, filtering, formatting, row and column insertion or deletion, context menu and ribbon interactions, and import/export operations—enabling integration of custom logic into application workflows.

Action Events

The actionBegin and actionComplete events are the primary action events in the Spreadsheet.

The actionBegin event triggers when any action begins in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type, prevent specific actions from executing, and apply custom logic at the initiation of an action.

The actionComplete event triggers when any action completes in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type and apply custom logic after an action has successfully completed.

You can identify the type of action being triggered by using the args.action property during both the action events.

The following table represents the action names for which the actionBegin and actionComplete events are triggered in the Spreadsheet:

Action ActionBegin ActionComplete
Add Data Validation validation validation
Add Defined Name - addDefinedName
Autofill autofill autofill
Autofit resizeToFit resizeToFit
Cell Delete cellDelete cellDelete
Cell Save (Edit) cellSave cellSave
Chart Design chartDesign chartDesign
Chart Deletion deleteChart deleteChart
Chart Insertion beforeInsertChart insertChart
Chart (Resize/Drag and Drop) - chartRefresh
Clear beforeClear clear
Clear Conditional Formatting - clearCF
Clear Validation removeValidation removeValidation
Clear Highlight removeHighlight removeHighlight
Clipboard (Copy) copy -
Clipboard (Cut) cut -
Clipboard (Paste) clipboard clipboard
Comment addComment addComment
Conditional Formatting conditionalFormat conditionalFormat
Delete delete delete
Delete Comment deleteComment deleteComment
Delete (Rows/Columns) delete delete
Filter filter filter
Formatting (Cell/Number) format format
Freeze Panes freezePanes freezePanes
Gridlines gridlines gridlines
Headers headers headers
Hide (Row/Column) hideShow hideShow
Highlight Invalid Data addHighlight addHighlight
Hyperlink hyperlink hyperlink
Image Deletion deleteImage deleteImage
Image Insertion beforeInsertImage insertImage
Image (Resize/Drag and Drop) - imageRefresh
Insert (Row/Column/Sheet) insert insert
Merge merge merge
Open beforeOpen import
Protect Sheet protectSheet protectSheet
Read-Only readonly readonly
Remove Defined Name - removeDefinedName
Replace beforeReplace replace
Replace All beforeReplaceAll replaceAll
Resize (Row/Column) - resize
Save beforeSave -
Sort beforeSort sorting
Sheet Duplicate duplicateSheet duplicateSheet
Sheet Hide hideSheet hideSheet
Sheet Move moveSheet moveSheet
Sheet Rename renameSheet renameSheet
Wrap beforeWrap wrap

The following code example demonstrates how to bind the actionBegin and actionComplete events in the Spreadsheet.

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

function App() {
    const spreadsheetRef = useRef(null);

    const actionBegin = (args) => {
        appendElement(`actionBegin triggered for <b>&nbsp;${args.action}</b> action<hr>`);
        console.log(args);
    }

    const actionComplete = (args) => {
        appendElement(`actionComplete triggered for <b>&nbsp;${args.action}</b> action<hr>`);
        console.log(args);
    }

    const clearBtnClick = () => {
        const eventLog = document.getElementById('EventLog');
        if (eventLog) {
            eventLog.innerHTML = "";
        }
    };
    const appendElement = (html) => {
        const span = document.createElement("span");
        span.innerHTML = html;
        const log = document.getElementById('EventLog');
        if (log) {
            log.insertBefore(span, log.firstChild);
        }
    };

    return (
        <div>
            <div>
                <SpreadsheetComponent ref={spreadsheetRef} actionBegin={actionBegin} actionComplete={actionComplete}>
                    <SheetsDirective>
                        <SheetDirective>
                            <RangesDirective>
                                <RangeDirective dataSource={data}></RangeDirective>
                            </RangesDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={120}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
            <div>
                <h4><b>Event Trace</b></h4>
                <div id="evt">
                    <div>
                        <span id="EventLog"></span>
                    </div>
                    <button id="clearBtn" className='e-btn' onClick={clearBtnClick}>Clear</button>
                </div>
            </div>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);

    const actionBegin = (args: any) => {
        appendElement(`actionBegin triggered for <b>&nbsp;${args.action}</b> action<hr>`);
        console.log(args);
    }

    const actionComplete = (args: any) => {
        appendElement(`actionComplete triggered for <b>&nbsp;${args.action}</b> action<hr>`);
        console.log(args);
    }

    const clearBtnClick = () => {
        const eventLog = document.getElementById('EventLog');
        if (eventLog) {
            eventLog.innerHTML = "";
        }
    };
    const appendElement = (html: any) => {
        const span = document.createElement("span");
        span.innerHTML = html;
        const log = document.getElementById('EventLog');
        if (log) {
            log.insertBefore(span, log.firstChild);
        }
    };

    return (
        <div>
            <div>
                <SpreadsheetComponent ref={spreadsheetRef} actionBegin={actionBegin} actionComplete={actionComplete}>
                    <SheetsDirective>
                        <SheetDirective>
                            <RangesDirective>
                                <RangeDirective dataSource={data}></RangeDirective>
                            </RangesDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={120}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
            <div>
                <h4><b>Event Trace</b></h4>
                <div id="evt">
                    <div>
                        <span id="EventLog"></span>
                    </div>
                    <button id="clearBtn" className='e-btn' onClick={clearBtnClick}>Clear</button>
                </div>
            </div>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Clipboard

When performing clipboard operations such as Cut, Copy, or Paste, the Spreadsheet triggers specific events that allow you to monitor and manage these actions effectively. The following sections outline the event sequence and their roles.

Cut / Copy

For Cut or Copy actions, only the actionBegin event is triggered. You can identify the action type and access the copied range by using the following properties:

  • args.action === 'cut' → Indicates a Cut action
  • args.action === 'copy' → Indicates a Copy action
  • args.args.copiedRange → Provides the range of copied cells

Paste

During a Paste operation, events are triggered in the following sequence:

actionBegin → beforeCellUpdate → cellSave → actionComplete

The table below describes each event and its role in the paste process:

Event Description Event Arguments
actionBegin Triggers when the paste action starts. ActionBeginEventArgs
beforeCellUpdate Triggers for each cell in the pasted range before it is updated, allowing you to modify cell properties or cancel the paste action. BeforeCellUpdateArgs
cellSave Triggers for each cell in the pasted range after the modified cell is saved. CellSaveEventArgs
actionComplete Triggers after all pasted cells are fully saved. ActionCompleteEventArgs

Accessing copied and pasted ranges

You can access the copied and pasted ranges during paste operations by using the actionBegin and actionComplete events. Verify the action type using:

  • args.action === 'clipboard' → Indicates a paste action

Once verified, you can access the following properties:

  • args.eventArgs.copiedRange → The range of cells that were copied
  • args.eventArgs.pastedRange → The range of cells where content was pasted

Editing

When a cell is edited manually—such as by double-clicking the cell, pressing the F2 key, or modifying it through the formula bar—the Spreadsheet triggers a series of events. These events allow you to monitor and manage the entire editing process, from initiation to completion.

The sequence of events during manual cell editing is:

cellEdit → cellEditing → actionBegin → beforeCellUpdate → beforeCellSave → cellSave → cellEdited → actionComplete

The table below describes each event and its role in the editing process:

Event Description Event Arguments
cellEdit Triggers before the cell enters edit mode. CellEditEventArgs
cellEditing Triggers while editing is in progress; fires for each change made to the cell content. CellEditingEventArgs
actionBegin Triggers when the edit action starts. ActionBeginEventArgs
beforeCellUpdate Triggers before any cell property (style, value, formula, etc.) is modified. BeforeCellUpdateArgs
beforeCellSave Triggers before the cell value is saved. BeforeCellSaveEventArgs
cellSave Triggers when the modified cell value is saved. CellSaveEventArgs
cellEdited Triggers after the editing process completes. CellEditedEventArgs
actionComplete Triggers once the entire edit operation is completed. ActionCompleteEventArgs

See Also