From b412df8b0eccae9baf6243e521aea7eb863efe74 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 19 Jan 2026 18:15:44 +0530 Subject: [PATCH 1/3] 996127: Add a UG Section on Events Triggered During Editing and Clipboard Actions in Spreadsheet --- .../Excel/Spreadsheet/React/clipboard.md | 60 ++++++++++++++++ .../Excel/Spreadsheet/React/editing.md | 39 +++++++++++ .../react/clipboard-cs3/app/app.jsx | 70 +++++++++++++++++++ .../react/clipboard-cs3/app/app.tsx | 69 ++++++++++++++++++ .../react/clipboard-cs3/app/datasource.jsx | 12 ++++ .../react/clipboard-cs3/app/datasource.tsx | 12 ++++ .../react/clipboard-cs3/index.html | 37 ++++++++++ .../react/clipboard-cs3/systemjs.config.js | 58 +++++++++++++++ .../spreadsheet/react/editing-cs2/app/app.jsx | 70 +++++++++++++++++++ .../spreadsheet/react/editing-cs2/app/app.tsx | 69 ++++++++++++++++++ .../react/editing-cs2/app/datasource.jsx | 12 ++++ .../react/editing-cs2/app/datasource.tsx | 12 ++++ .../spreadsheet/react/editing-cs2/index.html | 37 ++++++++++ .../react/editing-cs2/systemjs.config.js | 58 +++++++++++++++ 14 files changed, 615 insertions(+) create mode 100644 Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/editing-cs2/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/editing-cs2/systemjs.config.js diff --git a/Document-Processing/Excel/Spreadsheet/React/clipboard.md b/Document-Processing/Excel/Spreadsheet/React/clipboard.md index dc24e7f00..8ee289a04 100644 --- a/Document-Processing/Excel/Spreadsheet/React/clipboard.md +++ b/Document-Processing/Excel/Spreadsheet/React/clipboard.md @@ -97,6 +97,66 @@ The following example shows, how to prevent the paste action in spreadsheet. In {% previewsample "/document-processing/code-snippet/spreadsheet/react/clipboard-cs2" %} +## Events triggered during clipboard operations + +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 | +|-------------------|---------------------------------------------------------------------------------------------| +| [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) | Triggers when the paste action starts. | +| [`beforeCellUpdate`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellupdate) | Triggers for each cell in the pasted range before its properties are updated. | +| [`cellSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#cellsave) | Triggers for each cell in the pasted range after the updated cell is saved. | +| [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete) | Triggers once all pasted cells are processed. | + +The following code example showcases the events triggered during clipboard operations in spreadsheet. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/clipboard-cs3/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/clipboard-cs3/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/clipboard-cs3/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/clipboard-cs3/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/clipboard-cs3" %} + +> **Note**: The events [cellEdit](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit), [cellEditing](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#cellediting), and [beforeCellSave](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellsave) are not triggered during clipboard operations. These events are specific to manual cell edits. However, [beforeCellUpdate](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellupdate) is triggered for each cell update before any property is changed, including during paste actions. + +**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. Ensure the action and request type using: + +* `args.action === 'clipboard'` +* `args.eventArgs.requestType === 'paste'` + +Once confirmed, you can access the following properties: + +* `args.eventArgs.copiedRange` +* `args.eventArgs.pastedRange` + ## Limitations * External clipboard is not fully supported while copying data from another source and pasting into a spreadsheet, it only works with basic supports (Values, Number, cell, and Text formatting). diff --git a/Document-Processing/Excel/Spreadsheet/React/editing.md b/Document-Processing/Excel/Spreadsheet/React/editing.md index 7a11ac80f..2f7658eef 100644 --- a/Document-Processing/Excel/Spreadsheet/React/editing.md +++ b/Document-Processing/Excel/Spreadsheet/React/editing.md @@ -59,6 +59,45 @@ The following sample shows how to prevent the editing and cell save. Here `E` co {% previewsample "/document-processing/code-snippet/spreadsheet/react/editing-cs1" %} +## Events Triggered During Cell 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 lifecycle, 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 | +|------------------------|---------------------------------------------------------------------------------------------| +| [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) | Triggers before the cell enters edit mode. | +| [`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. | +| [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) | Triggers when the edit action starts. | +| [`beforeCellUpdate`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellupdate) | Triggers before any cell property (style, value, formula, etc.) is modified. | +| [`beforeCellSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellsave) | Triggers before the cell value is saved. | +| [`cellSave` ](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#cellsave) | Triggers when the cell value is saved. | +| [`cellEdited`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledited) | Triggers after the editing process completes. | +| [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actioncomplete) | Triggers once the entire edit operation is completed. | + +The following code example showcases the events triggered during cell edting in spreadsheet. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/editing-cs2/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/editing-cs2/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/editing-cs2/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/editing-cs2/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/editing-cs2" %} + ## Limitations * Text overflow in cells is not supported in Editing. diff --git a/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/app.jsx new file mode 100644 index 000000000..45217897e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/app.jsx @@ -0,0 +1,70 @@ +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() { + let spreadsheet; + const spreadsheetRef = React.useRef(null); + + const onCreated = () => { + spreadsheet = spreadsheetRef.current; + spreadsheet.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); + } + + const actionBegin = (args) => { + console.log('actionBegin triggered'); + } + + const beforeCellSave = (args) => { + console.log('beforeCellSave triggered') + } + + const beforeCellUpdate = (args) => { + console.log('beforeCellUpdate triggered'); + } + + const cellEdit = (args) => { + console.log('cellEdit triggered'); + } + + const cellEditing = (args) => { + console.log('cellEditing triggered') + } + + const cellEdited = (args) => { + console.log('cellEdited triggered'); + } + + const cellSave = (args) => { + console.log('cellSave triggered') + } + + const actionComplete = (args) => { + console.log('actionComplete triggered'); + } + + return ( +
+ + + + + + + + + + + + + + +
+ ); +}; +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/app.tsx new file mode 100644 index 000000000..f49f01793 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/app.tsx @@ -0,0 +1,69 @@ +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() { + let spreadsheet: SpreadsheetComponent; + const spreadsheetRef = React.useRef(null); + const onCreated = () => { + spreadsheet = spreadsheetRef.current; + spreadsheet.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); + } + + const actionBegin = (args) => { + console.log('actionBegin triggered'); + } + + const beforeCellSave = (args) => { + console.log('beforeCellSave triggered') + } + + const beforeCellUpdate = (args) => { + console.log('beforeCellUpdate triggered'); + } + + const cellEdit = (args) => { + console.log('cellEdit triggered'); + } + + const cellEditing = (args) => { + console.log('cellEditing triggered') + } + + const cellEdited = (args) => { + console.log('cellEdited triggered'); + } + + const cellSave = (args) => { + console.log('cellSave triggered') + } + + const actionComplete = (args) => { + console.log('actionComplete triggered'); + } + + return ( +
+ + + + + + + + + + + + + + +
+ ); +}; +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); diff --git a/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/datasource.jsx new file mode 100644 index 000000000..873deabd8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/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 }, +]; diff --git a/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/app/datasource.tsx new file mode 100644 index 000000000..b7b06004d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/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 }, +]; diff --git a/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/index.html b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/index.html new file mode 100644 index 000000000..c6d11af8f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/index.html @@ -0,0 +1,37 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/systemjs.config.js new file mode 100644 index 000000000..9290509c4 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/clipboard-cs3/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/app.jsx new file mode 100644 index 000000000..45217897e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/app.jsx @@ -0,0 +1,70 @@ +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() { + let spreadsheet; + const spreadsheetRef = React.useRef(null); + + const onCreated = () => { + spreadsheet = spreadsheetRef.current; + spreadsheet.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); + } + + const actionBegin = (args) => { + console.log('actionBegin triggered'); + } + + const beforeCellSave = (args) => { + console.log('beforeCellSave triggered') + } + + const beforeCellUpdate = (args) => { + console.log('beforeCellUpdate triggered'); + } + + const cellEdit = (args) => { + console.log('cellEdit triggered'); + } + + const cellEditing = (args) => { + console.log('cellEditing triggered') + } + + const cellEdited = (args) => { + console.log('cellEdited triggered'); + } + + const cellSave = (args) => { + console.log('cellSave triggered') + } + + const actionComplete = (args) => { + console.log('actionComplete triggered'); + } + + return ( +
+ + + + + + + + + + + + + + +
+ ); +}; +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/app.tsx new file mode 100644 index 000000000..f49f01793 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/app.tsx @@ -0,0 +1,69 @@ +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() { + let spreadsheet: SpreadsheetComponent; + const spreadsheetRef = React.useRef(null); + const onCreated = () => { + spreadsheet = spreadsheetRef.current; + spreadsheet.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A1:H1'); + } + + const actionBegin = (args) => { + console.log('actionBegin triggered'); + } + + const beforeCellSave = (args) => { + console.log('beforeCellSave triggered') + } + + const beforeCellUpdate = (args) => { + console.log('beforeCellUpdate triggered'); + } + + const cellEdit = (args) => { + console.log('cellEdit triggered'); + } + + const cellEditing = (args) => { + console.log('cellEditing triggered') + } + + const cellEdited = (args) => { + console.log('cellEdited triggered'); + } + + const cellSave = (args) => { + console.log('cellSave triggered') + } + + const actionComplete = (args) => { + console.log('actionComplete triggered'); + } + + return ( +
+ + + + + + + + + + + + + + +
+ ); +}; +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); diff --git a/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/datasource.jsx new file mode 100644 index 000000000..873deabd8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/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 }, +]; diff --git a/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/app/datasource.tsx new file mode 100644 index 000000000..b7b06004d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/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 }, +]; diff --git a/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/index.html new file mode 100644 index 000000000..c6d11af8f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/index.html @@ -0,0 +1,37 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/systemjs.config.js new file mode 100644 index 000000000..9290509c4 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/editing-cs2/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + From 8c9537eb73959b401ecf4fbd70b2224f8fccb210 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 19 Jan 2026 18:34:10 +0530 Subject: [PATCH 2/3] 996127: Resolved the CI errors. --- .../Excel/Spreadsheet/React/clipboard.md | 10 +++++----- .../Excel/Spreadsheet/React/editing.md | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/clipboard.md b/Document-Processing/Excel/Spreadsheet/React/clipboard.md index 8ee289a04..4872f587f 100644 --- a/Document-Processing/Excel/Spreadsheet/React/clipboard.md +++ b/Document-Processing/Excel/Spreadsheet/React/clipboard.md @@ -9,7 +9,7 @@ documentation: ug # Clipboard in React Spreadsheet component -The Spreadsheet provides support for the clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#enableclipboard) property in Spreadsheet. +The Spreadsheet provides support for the clipboard operations (cut, copy, and paste). Clipboard operations can be enabled or disabled by setting the [`enableClipboard`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#enableclipboard) property in Spreadsheet. > By default, the `enableClipboard` property is true. @@ -24,7 +24,7 @@ Cut can be done in one of the following ways. * Using Cut button in the Ribbon’s HOME tab to perform cut operation. * Using Cut option in the Context Menu. * Using `Ctrl + X` | `Command + X` keyboard shortcut. -* Using the [`cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#cut) method. +* Using the [`cut`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#cut) method. ## Copy @@ -37,7 +37,7 @@ Copy can be done in one of the following ways. * Using Copy button in the Ribbon’s HOME tab to perform copy operation. * Using Copy option in the Context Menu. * Using `Ctrl + C` | `Command + C` keyboard shortcut. -* Using the [`copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#copy) method. +* Using the [`copy`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#copy) method. ## Paste @@ -55,7 +55,7 @@ Paste can be done in one of the following ways. * Using Paste button in the Ribbon’s HOME tab to perform paste operation. * Using Paste option in the Context Menu. * Using `Ctrl + V` | `Command + V` keyboard shortcut. -* Using the [`paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#paste) method. +* Using the [`paste`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#paste) method. > If you use the Keyboard shortcut key for cut (`Ctrl + X`) / copy (`Ctrl + C`) from other sources, you should use `Ctrl + V` shortcut while pasting into the spreadsheet. @@ -78,7 +78,7 @@ Paste can be done in one of the following ways. ## Prevent the paste functionality -The following example shows, how to prevent the paste action in spreadsheet. In [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#actionbegin) event, you can set `cancel` argument as false in paste request type. +The following example shows, how to prevent the paste action in spreadsheet. In [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#actionbegin) event, you can set `cancel` argument as false in paste request type. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/editing.md b/Document-Processing/Excel/Spreadsheet/React/editing.md index 2f7658eef..0064425a0 100644 --- a/Document-Processing/Excel/Spreadsheet/React/editing.md +++ b/Document-Processing/Excel/Spreadsheet/React/editing.md @@ -9,7 +9,7 @@ documentation: ug # Editing in React Spreadsheet component -You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowediting) property to enable or disable the editing feature. +You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowediting) property to enable or disable the editing feature. To get start quickly with Editing, you can check on this video: @@ -23,7 +23,7 @@ You can start editing by one of the following ways, * Press `F2` key to edit the active cell. * Use formula bar to perform editing. * Use `BACKSPACE` or `SPACE` key to clear the cell content and start the edit mode. -* Using the [`startEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#startedit) method. +* Using the [`startEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#startedit) method. ## Save cell @@ -31,16 +31,16 @@ If the cell is in editable state, you can save the edited cell by one of the fol * Perform mouse click on any other cell rather than the current editing cell. * Press `Enter` or `Tab` keys to save the edited cell content. -* Using the [`endEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#endedit) method. +* Using the [`endEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#endedit) method. ## Cancel editing To cancel the editing without saving the changes, you can use one of the following ways, * Press `ESCAPE` key, this will remove the editable state and update the unchanged cell content. -* Using the [`closeEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#closeedit) method. +* Using the [`closeEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#closeedit) method. -The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#closeedit) method in spreadsheet. +The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#closeedit) method in spreadsheet. {% tabs %} {% highlight js tabtitle="app.jsx" %} @@ -61,7 +61,7 @@ The following sample shows how to prevent the editing and cell save. Here `E` co ## Events Triggered During Cell 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 lifecycle, 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 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 From 382d27b16520ce6da1f03005283fe2dcf4b50e10 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 19 Jan 2026 18:53:43 +0530 Subject: [PATCH 3/3] 996127: Add a UG Section on Events Triggered During Editing and Clipboard Actions in Spreadsheet --- Document-Processing/Excel/Spreadsheet/React/clipboard.md | 2 +- Document-Processing/Excel/Spreadsheet/React/editing.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/clipboard.md b/Document-Processing/Excel/Spreadsheet/React/clipboard.md index 4872f587f..0f19139fa 100644 --- a/Document-Processing/Excel/Spreadsheet/React/clipboard.md +++ b/Document-Processing/Excel/Spreadsheet/React/clipboard.md @@ -145,7 +145,7 @@ The following code example showcases the events triggered during clipboard opera > **Note**: The events [cellEdit](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit), [cellEditing](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#cellediting), and [beforeCellSave](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellsave) are not triggered during clipboard operations. These events are specific to manual cell edits. However, [beforeCellUpdate](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellupdate) is triggered for each cell update before any property is changed, including during paste actions. -**Accessing Clipboard Properties** +**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. Ensure the action and request type using: diff --git a/Document-Processing/Excel/Spreadsheet/React/editing.md b/Document-Processing/Excel/Spreadsheet/React/editing.md index 0064425a0..4b99c8c49 100644 --- a/Document-Processing/Excel/Spreadsheet/React/editing.md +++ b/Document-Processing/Excel/Spreadsheet/React/editing.md @@ -59,7 +59,7 @@ The following sample shows how to prevent the editing and cell save. Here `E` co {% previewsample "/document-processing/code-snippet/spreadsheet/react/editing-cs1" %} -## Events Triggered During Cell Editing +## Events triggered during cell 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.