Skip to content

Commit 58191fd

Browse files
DinakarSF4212DinakarSF4212
committed
1013906: Add an "Events" section documenting feature-specific Spreadsheet events.
1 parent 877c9ad commit 58191fd

2 files changed

Lines changed: 242 additions & 0 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5318,6 +5318,7 @@
53185318
<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>
53195319
<li><a href="/document-processing/excel/spreadsheet/react/feature-list">Features Availability</a>
53205320
</li>
5321+
<li><a href="/document-processing/excel/spreadsheet/react/events">Events</a></li>
53215322
<li><a href="https://ej2.syncfusion.com/react/documentation/api/spreadsheet/">API Reference</a></li>
53225323
</ul>
53235324
</li>

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

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
---
2+
layout: post
3+
title: Events in React Spreadsheet component | Syncfusion
4+
description: Learn here all about the events in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
control: Events
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Events in React Spreadsheet Component
11+
12+
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.
13+
14+
## actionBegin
15+
16+
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.
17+
18+
**Event Arguments:** [`ActionBeginEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin)
19+
20+
You can identify the type of action being triggered using the `args.action` property.
21+
22+
The following code example demonstrates how to bind the `actionBegin` event in the spreadsheet.
23+
{% tabs %}
24+
{% highlight ts tabtitle="app.tsx" %}
25+
import * as React from 'react';
26+
import { createRoot } from 'react-dom/client';
27+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
28+
function App() {
29+
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
30+
31+
const actionBegin = (args: any) => {
32+
console.log(`actionBegin triggered ${args.action}`);
33+
console.log(args);
34+
}
35+
36+
return (
37+
<SpreadsheetComponent ref={spreadsheetRef} actionBegin={actionBegin}>
38+
</SpreadsheetComponent>
39+
);
40+
};
41+
export default App;
42+
43+
const root = createRoot(document.getElementById('root')!);
44+
root.render(<App />);
45+
{% endhighlight %}
46+
{% endtabs %}
47+
48+
## actionComplete
49+
50+
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.
51+
52+
**Event Arguments:** [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete)
53+
54+
You can identify the type of action that completed using the `args.action` property.
55+
56+
The following code example demonstrates how to bind the `actionComplete` event in the spreadsheet.
57+
{% tabs %}
58+
{% highlight ts tabtitle="app.tsx" %}
59+
import * as React from 'react';
60+
import { createRoot } from 'react-dom/client';
61+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
62+
function App() {
63+
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
64+
65+
const actionComplete = (args: any) => {
66+
console.log(`actionComplete triggered ${args.action}`);
67+
console.log(args);
68+
}
69+
70+
return (
71+
<SpreadsheetComponent ref={spreadsheetRef} actionComplete={actionComplete}>
72+
</SpreadsheetComponent>
73+
);
74+
};
75+
export default App;
76+
77+
const root = createRoot(document.getElementById('root')!);
78+
root.render(<App />);
79+
{% endhighlight %}
80+
{% endtabs %}
81+
82+
## Clipboard
83+
84+
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.
85+
86+
**Cut / Copy**
87+
88+
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:
89+
90+
* `args.action === 'cut'` → Indicates a Cut action
91+
* `args.action === 'copy'` → Indicates a Copy action
92+
* `args.args.copiedRange` → Provides the copied range
93+
94+
**Paste**
95+
96+
During a **Paste** operation, events are triggered in the following sequence:
97+
98+
> actionBegin → beforeCellUpdate → cellSave → actionComplete
99+
100+
The table below describes each event and its role in the paste process:
101+
102+
| **Event** | **Description** | **Event Arguments** |
103+
|-----------|------------------|----------------------|
104+
| [`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) |
105+
| [`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) |
106+
| [`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) |
107+
| [`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) |
108+
109+
**Accessing clipboard properties**
110+
111+
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:
112+
113+
* `args.action === 'clipboard'` → Indicates a paste action.
114+
115+
Once verified, you can access the following properties:
116+
117+
* `args.eventArgs.copiedRange` → The range of cells that were copied
118+
* `args.eventArgs.pastedRange` → The range of cells where the content was pasted
119+
120+
The following code example showcases the events triggered during clipboard operations in the spreadsheet.
121+
{% tabs %}
122+
{% highlight ts tabtitle="app.tsx" %}
123+
124+
import * as React from 'react';
125+
import { createRoot } from 'react-dom/client';
126+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
127+
128+
function App() {
129+
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
130+
131+
const actionBegin = (args: any) => {
132+
console.log(`actionBegin triggered ${args.action}`);
133+
console.log(args);
134+
}
135+
136+
const beforeCellUpdate = (args: any) => {
137+
console.log(args);
138+
}
139+
140+
const cellSave = (args: any) => {
141+
console.log(args);
142+
}
143+
144+
const actionComplete = (args: any) => {
145+
console.log(`actionComplete triggered ${args.action}`);
146+
console.log(args);
147+
}
148+
149+
return (
150+
<SpreadsheetComponent ref={spreadsheetRef} actionBegin={actionBegin} beforeCellUpdate={beforeCellUpdate} cellSave={cellSave} actionComplete={actionComplete} >
151+
</SpreadsheetComponent>
152+
);
153+
};
154+
export default App;
155+
156+
const root = createRoot(document.getElementById('root')!);
157+
root.render(<App />);
158+
{% endhighlight %}
159+
{% endtabs %}
160+
161+
## Editing
162+
163+
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.
164+
165+
The sequence of events during manual cell editing is:
166+
> cellEdit → cellEditing → actionBegin → beforeCellUpdate → beforeCellSave → cellSave → cellEdited → actionComplete
167+
168+
The table below lists each event and its role in the editing process:
169+
170+
| **Event** | **Description** | **Event Arguments** |
171+
|-----------|------------------|----------------------|
172+
| [`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) |
173+
| [`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) |
174+
| [`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) |
175+
| [`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) |
176+
| [`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) |
177+
| [`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) |
178+
| [`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) |
179+
| [`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) |
180+
181+
The following code example showcases the events triggered during cell editing in the spreadsheet.
182+
183+
{% tabs %}
184+
{% highlight ts tabtitle="app.tsx" %}
185+
import * as React from 'react';
186+
import { createRoot } from 'react-dom/client';
187+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
188+
189+
function App() {
190+
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
191+
192+
const actionBegin = (args: any) => {
193+
console.log(`actionBegin triggered ${args.action}`);
194+
console.log(args);
195+
}
196+
197+
const beforeCellSave = (args: any) => {
198+
console.log(args);
199+
}
200+
201+
const beforeCellUpdate = (args: any) => {
202+
console.log(args);
203+
}
204+
205+
const cellEdit = (args: any) => {
206+
console.log(args);
207+
}
208+
209+
const cellEditing = (args: any) => {
210+
console.log(args);
211+
}
212+
213+
const cellEdited = (args: any) => {
214+
console.log(args);
215+
}
216+
217+
const cellSave = (args: any) => {
218+
console.log(args);
219+
}
220+
221+
const actionComplete = (args: any) => {
222+
console.log(`actionComplete triggered ${args.action}`);
223+
console.log(args);
224+
}
225+
226+
return (
227+
<SpreadsheetComponent ref={spreadsheetRef} actionBegin={actionBegin} beforeCellSave={beforeCellSave} beforeCellUpdate={beforeCellUpdate} cellSave={cellSave} cellEdit={cellEdit} cellEditing={cellEditing} cellEdited={cellEdited} actionComplete={actionComplete} >
228+
</SpreadsheetComponent>
229+
);
230+
};
231+
export default App;
232+
233+
const root = createRoot(document.getElementById('root')!);
234+
root.render(<App />);
235+
{% endhighlight %}
236+
{% endtabs %}
237+
238+
## See Also
239+
240+
* [Editing](./editing.md)
241+
* [Clipboard](./clipboard.md)

0 commit comments

Comments
 (0)