diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 1f91e1cd1..2d91b0f3c 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5460,6 +5460,7 @@
  • Mobile Responsiveness
  • Features Availability
    • +
  • Events
  • API Reference
    • diff --git a/Document-Processing/Excel/Spreadsheet/React/events.md b/Document-Processing/Excel/Spreadsheet/React/events.md new file mode 100644 index 000000000..6279bab1c --- /dev/null +++ b/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) \ No newline at end of file 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 ( +
    +
    + + + + + + + + + + + + + + + + + +
    +
    +

    Event Trace

    +
    +
    + +
    + +
    +
    +
    + ); +}; +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/events/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/events/app/app.tsx new file mode 100644 index 000000000..f12ff89cc --- /dev/null +++ b/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(null); + + const actionBegin = (args: any) => { + appendElement(`actionBegin triggered for  ${args.action} action
    `); + console.log(args); + } + + const actionComplete = (args: any) => { + appendElement(`actionComplete triggered for  ${args.action} action
    `); + 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 ( +
    +
    + + + + + + + + + + + + + + + + + +
    +
    +

    Event Trace

    +
    +
    + +
    + +
    +
    +
    + ); +}; +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/events/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/events/app/datasource.jsx new file mode 100644 index 000000000..873deabd8 --- /dev/null +++ b/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 }, +]; diff --git a/Document-Processing/code-snippet/spreadsheet/react/events/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/events/app/datasource.tsx new file mode 100644 index 000000000..b7b06004d --- /dev/null +++ b/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 }, +]; diff --git a/Document-Processing/code-snippet/spreadsheet/react/events/index.html b/Document-Processing/code-snippet/spreadsheet/react/events/index.html new file mode 100644 index 000000000..306cbf11e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/events/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/events/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/events/systemjs.config.js new file mode 100644 index 000000000..47e87d758 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/events/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.2.3/" + }, + 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'); + + +