diff --git a/Document-Processing/Excel/Spreadsheet/React/events.md b/Document-Processing/Excel/Spreadsheet/React/events.md
new file mode 100644
index 000000000..d6dc789fe
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/React/events.md
@@ -0,0 +1,241 @@
+---
+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.
+
+## actionBegin
+
+The `actionBegin` event triggers when any action begins in the spreadsheet. This event 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.
+
+**Event Arguments:** [`ActionBeginEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin)
+
+You can identify the type of action being triggered using the `args.action` property.
+
+The following code example demonstrates how to bind the `actionBegin` event in the spreadsheet.
+{% tabs %}
+{% highlight ts tabtitle="app.tsx" %}
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+function App() {
+ const spreadsheetRef = React.useRef(null);
+
+ const actionBegin = (args: any) => {
+ console.log(`actionBegin triggered ${args.action}`);
+ console.log(args);
+ }
+
+ return (
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## actionComplete
+
+The `actionComplete` event triggers when any action completes in the spreadsheet. This event fires for all user-initiated actions, enabling you to identify the action type and apply custom logic after an action has successfully completed.
+
+**Event Arguments:** [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete)
+
+You can identify the type of action that completed using the `args.action` property.
+
+The following code example demonstrates how to bind the `actionComplete` event in the spreadsheet.
+{% tabs %}
+{% highlight ts tabtitle="app.tsx" %}
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+function App() {
+ const spreadsheetRef = React.useRef(null);
+
+ const actionComplete = (args: any) => {
+ console.log(`actionComplete triggered ${args.action}`);
+ console.log(args);
+ }
+
+ return (
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Clipboard
+
+When performing clipboard operations such as **Cut**, **Copy**, or **Paste**, the spreadsheet triggers specific events that allow users 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 type of action and access the copied range using the following properties:
+
+* `args.action === 'cut'` → Indicates a Cut action
+* `args.action === 'copy'` → Indicates a Copy action
+* `args.args.copiedRange` → Provides the copied range
+
+**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 modification and cancelling `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 clipboard properties**
+
+You can access clipboard-related properties such as the copied and pasted ranges during paste operations 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 the content was pasted
+
+The following code example showcases the events triggered during clipboard operations in the spreadsheet.
+{% tabs %}
+{% highlight ts tabtitle="app.tsx" %}
+
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+ const spreadsheetRef = React.useRef(null);
+
+ const actionBegin = (args: any) => {
+ console.log(`actionBegin triggered ${args.action}`);
+ console.log(args);
+ }
+
+ const beforeCellUpdate = (args: any) => {
+ console.log(args);
+ }
+
+ const cellSave = (args: any) => {
+ console.log(args);
+ }
+
+ const actionComplete = (args: any) => {
+ console.log(`actionComplete triggered ${args.action}`);
+ console.log(args);
+ }
+
+ return (
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## 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 users 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 lists 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) |
+
+The following code example showcases the events triggered during cell editing in the spreadsheet.
+
+{% tabs %}
+{% highlight ts tabtitle="app.tsx" %}
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+ const spreadsheetRef = React.useRef(null);
+
+ const actionBegin = (args: any) => {
+ console.log(`actionBegin triggered ${args.action}`);
+ console.log(args);
+ }
+
+ const beforeCellSave = (args: any) => {
+ console.log(args);
+ }
+
+ const beforeCellUpdate = (args: any) => {
+ console.log(args);
+ }
+
+ const cellEdit = (args: any) => {
+ console.log(args);
+ }
+
+ const cellEditing = (args: any) => {
+ console.log(args);
+ }
+
+ const cellEdited = (args: any) => {
+ console.log(args);
+ }
+
+ const cellSave = (args: any) => {
+ console.log(args);
+ }
+
+ const actionComplete = (args: any) => {
+ console.log(`actionComplete triggered ${args.action}`);
+ console.log(args);
+ }
+
+ return (
+
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## See Also
+
+* [Editing](./editing.md)
+* [Clipboard](./clipboard.md)
\ No newline at end of file
From bad87f750f809d0d730de213c71360e9b80ca598 Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:11:11 +0530
Subject: [PATCH 2/2] 1013906: Add an "Events" section documenting
feature-specific Spreadsheet events.
---
.../Excel/Spreadsheet/React/events.md | 255 ++++++------------
.../spreadsheet/react/events/app/app.jsx | 70 +++++
.../spreadsheet/react/events/app/app.tsx | 71 +++++
.../react/events/app/datasource.jsx | 12 +
.../react/events/app/datasource.tsx | 12 +
.../spreadsheet/react/events/index.html | 37 +++
.../react/events/systemjs.config.js | 58 ++++
7 files changed, 344 insertions(+), 171 deletions(-)
create mode 100644 Document-Processing/code-snippet/spreadsheet/react/events/app/app.jsx
create mode 100644 Document-Processing/code-snippet/spreadsheet/react/events/app/app.tsx
create mode 100644 Document-Processing/code-snippet/spreadsheet/react/events/app/datasource.jsx
create mode 100644 Document-Processing/code-snippet/spreadsheet/react/events/app/datasource.tsx
create mode 100644 Document-Processing/code-snippet/spreadsheet/react/events/index.html
create mode 100644 Document-Processing/code-snippet/spreadsheet/react/events/systemjs.config.js
diff --git a/Document-Processing/Excel/Spreadsheet/React/events.md b/Document-Processing/Excel/Spreadsheet/React/events.md
index d6dc789fe..6279bab1c 100644
--- a/Document-Processing/Excel/Spreadsheet/React/events.md
+++ b/Document-Processing/Excel/Spreadsheet/React/events.md
@@ -11,87 +11,97 @@ documentation: ug
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.
-## actionBegin
+## 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.
-The `actionBegin` event triggers when any action begins in the spreadsheet. This event 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.
-
-**Event Arguments:** [`ActionBeginEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin)
-
-You can identify the type of action being triggered using the `args.action` property.
-
-The following code example demonstrates how to bind the `actionBegin` event in the spreadsheet.
{% tabs %}
-{% highlight ts tabtitle="app.tsx" %}
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-function App() {
- const spreadsheetRef = React.useRef(null);
-
- const actionBegin = (args: any) => {
- console.log(`actionBegin triggered ${args.action}`);
- console.log(args);
- }
-
- return (
-
-
- );
-};
-export default App;
-
-const root = createRoot(document.getElementById('root')!);
-root.render();
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/events/app/app.jsx %}
{% endhighlight %}
-{% endtabs %}
-
-## actionComplete
-
-The `actionComplete` event triggers when any action completes in the spreadsheet. This event fires for all user-initiated actions, enabling you to identify the action type and apply custom logic after an action has successfully completed.
-
-**Event Arguments:** [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete)
-
-You can identify the type of action that completed using the `args.action` property.
-
-The following code example demonstrates how to bind the `actionComplete` event in the spreadsheet.
-{% tabs %}
{% highlight ts tabtitle="app.tsx" %}
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-function App() {
- const spreadsheetRef = React.useRef(null);
-
- const actionComplete = (args: any) => {
- console.log(`actionComplete triggered ${args.action}`);
- console.log(args);
- }
-
- return (
-
-
- );
-};
-export default App;
-
-const root = createRoot(document.getElementById('root')!);
-root.render();
+{% 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 users to monitor and manage these actions effectively. The following sections outline the event sequence and their roles.
+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**
+### 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 type of action and access the copied range using the following properties:
+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 copied range
+* `args.args.copiedRange` → Provides the range of copied cells
-**Paste**
+### Paste
During a **Paste** operation, events are triggered in the following sequence:
@@ -102,70 +112,30 @@ 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 modification and cancelling `paste` action. | [`BeforeCellUpdateArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/beforecellupdateargs) |
+| [`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 clipboard properties**
+### Accessing copied and pasted ranges
-You can access clipboard-related properties such as the copied and pasted ranges during paste operations 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:
+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.
+* `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 the content was pasted
-
-The following code example showcases the events triggered during clipboard operations in the spreadsheet.
-{% tabs %}
-{% highlight ts tabtitle="app.tsx" %}
-
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-
-function App() {
- const spreadsheetRef = React.useRef(null);
-
- const actionBegin = (args: any) => {
- console.log(`actionBegin triggered ${args.action}`);
- console.log(args);
- }
-
- const beforeCellUpdate = (args: any) => {
- console.log(args);
- }
-
- const cellSave = (args: any) => {
- console.log(args);
- }
-
- const actionComplete = (args: any) => {
- console.log(`actionComplete triggered ${args.action}`);
- console.log(args);
- }
-
- return (
-
-
- );
-};
-export default App;
-
-const root = createRoot(document.getElementById('root')!);
-root.render();
-{% endhighlight %}
-{% endtabs %}
+* `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 users to monitor and manage the entire editing process, from initiation to completion.
+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 lists each event and its role in the editing process:
+The table below describes each event and its role in the editing process:
| **Event** | **Description** | **Event Arguments** |
|-----------|------------------|----------------------|
@@ -178,63 +148,6 @@ The table below lists each event and its role in the editing process:
| [`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) |
-The following code example showcases the events triggered during cell editing in the spreadsheet.
-
-{% tabs %}
-{% highlight ts tabtitle="app.tsx" %}
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-
-function App() {
- const spreadsheetRef = React.useRef(null);
-
- const actionBegin = (args: any) => {
- console.log(`actionBegin triggered ${args.action}`);
- console.log(args);
- }
-
- const beforeCellSave = (args: any) => {
- console.log(args);
- }
-
- const beforeCellUpdate = (args: any) => {
- console.log(args);
- }
-
- const cellEdit = (args: any) => {
- console.log(args);
- }
-
- const cellEditing = (args: any) => {
- console.log(args);
- }
-
- const cellEdited = (args: any) => {
- console.log(args);
- }
-
- const cellSave = (args: any) => {
- console.log(args);
- }
-
- const actionComplete = (args: any) => {
- console.log(`actionComplete triggered ${args.action}`);
- console.log(args);
- }
-
- return (
-
-
- );
-};
-export default App;
-
-const root = createRoot(document.getElementById('root')!);
-root.render();
-{% endhighlight %}
-{% endtabs %}
-
## See Also
* [Editing](./editing.md)
diff --git a/Document-Processing/code-snippet/spreadsheet/react/events/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/events/app/app.jsx
new file mode 100644
index 000000000..8ae1a1fb3
--- /dev/null
+++ b/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 ${args.action} action`);
+ console.log(args);
+ }
+
+ const actionComplete = (args) => {
+ appendElement(`actionComplete triggered for ${args.action} action`);
+ 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 (
+