1013906: Add an "Events" section documenting feature-specific Spreadsheet events.

Document-Processing-toc.html

@@ -5460,6 +5460,7 @@
 							<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/react/feature-list">Features Availability</a>
 							</li>
+							<li><a href="/document-processing/excel/spreadsheet/react/events">Events</a></li>
 							<li><a href="https://ej2.syncfusion.com/react/documentation/api/spreadsheet/">API Reference</a></li>
 						</ul>
 					</li>

Document-Processing/Excel/Spreadsheet/React/events.md

@@ -0,0 +1,154 @@
+---
+layout: post
+title: Events in React Spreadsheet component | Syncfusion
+description: Learn here all about the events in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Events 
+platform: document-processing
+documentation: ug
+---
+
+# Events in React Spreadsheet Component
+
+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.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/events/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/events/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/events" %}
+
+## 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`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#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`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) | Triggers when the paste action starts. | [`ActionBeginEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) |
+| [`beforeCellUpdate`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#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`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforecellupdateargs) |
+| [`cellSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#cellsave) | Triggers for each cell in the pasted range after the modified cell is saved. | [`CellSaveEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellsaveeventargs) |
+| [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete) | Triggers after all pasted cells are fully saved. | [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete) |
+
+### Accessing copied and pasted ranges
+
+You can access the copied and pasted ranges during paste operations by using the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) and [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#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`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) | Triggers before the cell enters edit mode. | [`CellEditEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellediteventargs) |
+| [`cellEditing`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#cellediting) | Triggers while editing is in progress; fires for each change made to the cell content. | [`CellEditingEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellediteventargs) |
+| [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) | Triggers when the edit action starts. | [`ActionBeginEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) |
+| [`beforeCellUpdate`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellupdate) | Triggers before any cell property (style, value, formula, etc.) is modified. | [`BeforeCellUpdateArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforecellupdateargs)  |
+| [`beforeCellSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellsave) | Triggers before the cell value is saved. | [`BeforeCellSaveEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellediteventargs) |
+| [`cellSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#cellsave) | Triggers when the modified cell value is saved. | [`CellSaveEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellsaveeventargs) |
+| [`cellEdited`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledited) | Triggers after the editing process completes. | [`CellEditedEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellediteventargs) |
+| [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete) | Triggers once the entire edit operation is completed. | [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete) |
+
+## See Also
+
+* [Editing](./editing.md)
+* [Clipboard](./clipboard.md)

Document-Processing/code-snippet/spreadsheet/react/events/app/app.jsx

@@ -0,0 +1,70 @@
+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 />);

Document-Processing/code-snippet/spreadsheet/react/events/app/app.tsx

@@ -0,0 +1,71 @@
+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 />);

Document-Processing/code-snippet/spreadsheet/react/events/app/datasource.jsx

@@ -0,0 +1,12 @@
+export let data = [
+    { 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
+    { 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
+    { 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
+    { 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
+    { 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
+    { 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
+    { 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
+    { 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
+    { 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
+    { 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
+];

Document-Processing/code-snippet/spreadsheet/react/events/app/datasource.tsx

@@ -0,0 +1,12 @@
+export let data: Object[] = [
+    { 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
+    { 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
+    { 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
+    { 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
+    { 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
+    { 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
+    { 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
+    { 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
+    { 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
+    { 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
+];