From b75459ebc6aa992812b612fd01fc80304ec19b9d Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Thu, 27 Nov 2025 20:03:42 +0530 Subject: [PATCH 1/6] 991939: How to prevent Spreadsheet actions for the specific cells without protecting the sheet or making cells read-only --- Document-Processing-toc.html | 1 + .../React/how-to/sorting-in-readonly-mode.md | 47 ++++++++++++ .../sorting-in-readonly-mode/app/app.jsx | 75 +++++++++++++++++++ .../sorting-in-readonly-mode/app/app.tsx | 75 +++++++++++++++++++ .../app/datasource.jsx | 12 +++ .../app/datasource.tsx | 12 +++ .../react/sorting-in-readonly-mode/index.html | 37 +++++++++ .../systemjs.config.js | 58 ++++++++++++++ 8 files changed, 317 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to/sorting-in-readonly-mode.md create mode 100644 Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/systemjs.config.js diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 77958266f..39f5eadda 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -4762,6 +4762,7 @@
  • Create a object structure
  • Changing the active sheet while importing a file
  • Identify the context menu opened
  • +
  • Sorting in Readonly Mode
  • Mobile Responsiveness
  • diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/sorting-in-readonly-mode.md b/Document-Processing/Excel/Spreadsheet/React/how-to/sorting-in-readonly-mode.md new file mode 100644 index 000000000..f1c2f0935 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/sorting-in-readonly-mode.md @@ -0,0 +1,47 @@ +--- +layout: post +title: Allow sorting in readonly mode while preventing other actions in React Spreadsheet | Syncfusion +description: Learn here all about how to enable sorting while preventing editing and other actions in React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +## How to allow sorting in readonly mode while preventing other actions in React Spreadsheet?? + +In Syncfusion React Spreadsheet, using the [`setRangeReadOnly`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setrangereadonly) method makes a range of cells, rows, or columns completely read-only. This means no operations—including sorting—can be performed on those cells. + +If your requirement is to allow sorting in read-only mode while preventing other actions (such as cut, paste, autofill, formatting, and validation), you need to use event-based customization instead of the [`setRangeReadOnly`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setrangereadonly) method. + +To achieve this requirement, the following events can be used: + +* [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) → To prevent editing in specific columns. +* [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin)→ To prevent other actions (cut, paste, autofill, formatting, etc.) while allowing sorting. + +### Step 1: Prevent editing for specific columns + +To prevent editing for specific columns, use the [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) event, which triggers whenever a cell enters edit mode. By checking the column index and setting `args.cancel = true`, you can stop editing for those columns. This ensures that users cannot modify the cell content in those columns. + +### Step 2: Prevent other actions while allowing sorting + +To prevent other actions while allowing sorting, use the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) event. This event triggers before any action starts (such as cut, paste, autofill, formatting, etc.). In this event: + +* Check the type of action being performed. +* Verify if the target range includes the restricted columns. +* If the column is in the restricted list, cancel the action by setting `args.cancel = true`. + +This approach ensures that sorting is allowed, while other operations like cut, paste, autofill, and formatting are prevented for those columns. + +The following example demonstrates how to allow sorting while preventing editing and other actions such as cut, paste, autofill, formatting, validation, and conditional formatting in the spreadsheet. You can also restrict additional actions by following the same approach. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode" %} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.jsx new file mode 100644 index 000000000..4ef29bfd7 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.jsx @@ -0,0 +1,75 @@ +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, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet'; +import { data } from './datasource'; + +function App() { + const spreadsheetRef = React.useRef(null); + // Columns to be prevented editing. + const readOnlyColumns = [0,2]; + + const cellEdit = (args) =>{ + var addressRange = getRangeIndexes(args.address); + // preventing cellEditing from the readOnly columns + if (readOnlyColumns.includes(addressRange[1]) || readOnlyColumns.includes(addressRange[3])) { + args.cancel = true; + } + } + + // Triggers whenever any action begins in spreadsheet. + const actionBegin = (args) =>{ + var address; + if (args.action == "clipboard") { + address = args.args.eventArgs.pastedRange; + } + else if (args.action == "autofill") { + address = args.args.eventArgs.fillRange; + } + else if (args.action == "format" || args.action == "validation" || args.action == "conditionalFormat") { + address = args.args.eventArgs.range; + } + else if (args.action == "cut") { + address = args.args.copiedRange + } + if (address) { + var addressRange = getRangeIndexes(address); + var colStart = addressRange[1]; + var colEnd = addressRange[3]; + // preventing other actions from the readOnly columns + for (var col = colStart; col <= colEnd; col++) { + if (readOnlyColumns.includes(col)) { + if (args.args.action == "cut") { + args.args.cancel = true; + } else { + args.args.eventArgs.cancel = true; + } + break; + } + } + } + } + + 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/sorting-in-readonly-mode/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.tsx new file mode 100644 index 000000000..0cad9cd86 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.tsx @@ -0,0 +1,75 @@ +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, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet'; +import { data } from './datasource'; + +function App() { + const spreadsheetRef = React.useRef(null); + // Columns to be prevented editing. + const readOnlyColumns = [0,2]; + + const cellEdit = (args: any) =>{ + var addressRange = getRangeIndexes(args.address); + // preventing cellEditing from the readOnly columns + if (readOnlyColumns.includes(addressRange[1]) || readOnlyColumns.includes(addressRange[3])) { + args.cancel = true; + } + } + + // Triggers whenever any action begins in spreadsheet. + const actionBegin = (args: any) =>{ + var address: any; + if (args.action == "clipboard") { + address = args.args.eventArgs.pastedRange; + } + else if (args.action == "autofill") { + address = args.args.eventArgs.fillRange; + } + else if (args.action == "format" || args.action == "validation" || args.action == "conditionalFormat") { + address = args.args.eventArgs.range; + } + else if (args.action == "cut") { + address = args.args.copiedRange + } + if (address) { + var addressRange = getRangeIndexes(address); + var colStart = addressRange[1]; + var colEnd = addressRange[3]; + // preventing other actions from the readOnly columns + for (var col = colStart; col <= colEnd; col++) { + if (readOnlyColumns.includes(col)) { + if (args.args.action == "cut") { + args.args.cancel = true; + } else { + args.args.eventArgs.cancel = true; + } + break; + } + } + } + } + + return ( +
    + + + + + + + + + + + + + + +
    + ); +}; +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.jsx new file mode 100644 index 000000000..873deabd8 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/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/sorting-in-readonly-mode/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.tsx new file mode 100644 index 000000000..b7b06004d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/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/sorting-in-readonly-mode/index.html b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/index.html new file mode 100644 index 000000000..c6d11af8f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/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/sorting-in-readonly-mode/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/systemjs.config.js new file mode 100644 index 000000000..3646c4621 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/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/23.1.36/" + }, + 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 8e5baebe5efb764fbe96e69e00ffd4f882389d08 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Thu, 27 Nov 2025 20:09:04 +0530 Subject: [PATCH 2/6] 991939: How to prevent Spreadsheet actions for the specific cells without protecting the sheet or making cells read-only --- .../react/sorting-in-readonly-mode/systemjs.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/systemjs.config.js index 3646c4621..d93d37d6f 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/systemjs.config.js +++ b/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/systemjs.config.js @@ -14,7 +14,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/23.1.36/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.12/" }, map: { app: 'app', From 25321d6a1c8a3edc09b24ef414fa4f18d6a6995b Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 1 Dec 2025 18:24:30 +0530 Subject: [PATCH 3/6] 991939: How to prevent Spreadsheet actions for the specific cells without protecting the sheet or making cells read-only --- Document-Processing-toc.html | 2 +- .../React/how-to/prevent-actions.md | 54 +++++++++++++++++++ .../React/how-to/sorting-in-readonly-mode.md | 47 ---------------- .../app/app.jsx | 0 .../app/app.tsx | 0 .../app/datasource.jsx | 0 .../app/datasource.tsx | 0 .../index.html | 0 .../systemjs.config.js | 0 9 files changed, 55 insertions(+), 48 deletions(-) create mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md delete mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to/sorting-in-readonly-mode.md rename Document-Processing/code-snippet/spreadsheet/react/{sorting-in-readonly-mode => prevent-actions-cs1}/app/app.jsx (100%) rename Document-Processing/code-snippet/spreadsheet/react/{sorting-in-readonly-mode => prevent-actions-cs1}/app/app.tsx (100%) rename Document-Processing/code-snippet/spreadsheet/react/{sorting-in-readonly-mode => prevent-actions-cs1}/app/datasource.jsx (100%) rename Document-Processing/code-snippet/spreadsheet/react/{sorting-in-readonly-mode => prevent-actions-cs1}/app/datasource.tsx (100%) rename Document-Processing/code-snippet/spreadsheet/react/{sorting-in-readonly-mode => prevent-actions-cs1}/index.html (100%) rename Document-Processing/code-snippet/spreadsheet/react/{sorting-in-readonly-mode => prevent-actions-cs1}/systemjs.config.js (100%) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index cf98378f5..87fd28323 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -4768,7 +4768,7 @@
  • Create a object structure
  • Changing the active sheet while importing a file
  • Identify the context menu opened
  • -
  • Sorting in Readonly Mode
  • +
  • Prevent Actions Without Read-Only and Sheet Protection
  • Mobile Responsiveness
  • diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md new file mode 100644 index 000000000..f65265373 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md @@ -0,0 +1,54 @@ +--- +layout: post +title: Prevent actions without read-only and sheet protection in React Spreadsheet | Syncfusion +description: Learn here all about to prevent actions without read-only and sheet protection in React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# How to prevent actions for specific cells without protecting the sheet or making it read-only in React Spreadsheet ? + +In Syncfusion React Spreadsheet, the [**read-only**](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet#make-cells-read-only-without-protecting-worksheet) feature makes a range of cells, rows, or columns completely non-editable and restricts all spreadsheet actions on those cells. Similarly, the [**sheet protection**](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet#protect-sheet) feature locks the entire sheet and restricts all spreadsheet actions on the sheet. It does not allow actions such as formatting cells, rows, or columns, selecting cells, or inserting hyperlinks—unless these options are explicitly enabled in the [`protectSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/protectsettingsmodel). + +If your requirement is to prevent actions (such as cut, paste, autofill, formatting, and validation) without locking the entire sheet using the [`protectSheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#protectsheet) method or making the cells read-only via the [`setRangeReadOnly`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setrangereadonly) method, you can achieve this through event-based customization. This approach allows you to restrict specific actions on selected cells while keeping the rest of the sheet fully interactive. + +**Events to Use** +To achieve this requirement, the following events can be used: + +* [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) → To prevent editing for specific cells. +* [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin)→ To prevent spreadsheet actions such as cut, paste, autofill, formatting, etc. + +**Step 1: Prevent editing for specific cells** + +To prevent editing for specific cells, use the [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) event, which triggers whenever a cell enters edit mode. By checking the column index and setting `args.cancel = true`, you can prevent editing for those columns. This ensures that users cannot modify the cell content in those columns. + +**Step 2: Prevent specfic spreadsheet actions** + +To prevent specfic action after preventing the cell edting, you need to use the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) event. This event triggers before any action starts (such as cut, paste, autofill, formatting, etc.). In this event: + +* Fetch the target address based on the type of action being performed using `args.action` property. +* Verify if the target range includes the restricted columns. +* If the column is in the restricted list, cancel the action by setting `args.cancel = true`. + +This approach ensures that spreadsheet actions such as cut, paste, autofill, formatting, validation, and conditional formatting are prevented for specific cells without protecting the sheet or making the cells read-only. + + > **Note:** In this example, we use column indexes to restrict actions. You can also use row indexes or cell addresses for the same purpose. + +The following example demonstrates how to prevent actions such as cut, paste, autofill, formatting, validation, and conditional formatting for specific cells in the spreadsheet without protecting the sheet or making the cells read-only. You can also restrict additional actions by following the same approach. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/prevent-actions-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/prevent-actions-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/prevent-actions-cs1" %} + +## See Also + +* [Protection](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/sorting-in-readonly-mode.md b/Document-Processing/Excel/Spreadsheet/React/how-to/sorting-in-readonly-mode.md deleted file mode 100644 index f1c2f0935..000000000 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/sorting-in-readonly-mode.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: Allow sorting in readonly mode while preventing other actions in React Spreadsheet | Syncfusion -description: Learn here all about how to enable sorting while preventing editing and other actions in React Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Spreadsheet -platform: document-processing -documentation: ug ---- - -## How to allow sorting in readonly mode while preventing other actions in React Spreadsheet?? - -In Syncfusion React Spreadsheet, using the [`setRangeReadOnly`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setrangereadonly) method makes a range of cells, rows, or columns completely read-only. This means no operations—including sorting—can be performed on those cells. - -If your requirement is to allow sorting in read-only mode while preventing other actions (such as cut, paste, autofill, formatting, and validation), you need to use event-based customization instead of the [`setRangeReadOnly`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#setrangereadonly) method. - -To achieve this requirement, the following events can be used: - -* [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) → To prevent editing in specific columns. -* [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin)→ To prevent other actions (cut, paste, autofill, formatting, etc.) while allowing sorting. - -### Step 1: Prevent editing for specific columns - -To prevent editing for specific columns, use the [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) event, which triggers whenever a cell enters edit mode. By checking the column index and setting `args.cancel = true`, you can stop editing for those columns. This ensures that users cannot modify the cell content in those columns. - -### Step 2: Prevent other actions while allowing sorting - -To prevent other actions while allowing sorting, use the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) event. This event triggers before any action starts (such as cut, paste, autofill, formatting, etc.). In this event: - -* Check the type of action being performed. -* Verify if the target range includes the restricted columns. -* If the column is in the restricted list, cancel the action by setting `args.cancel = true`. - -This approach ensures that sorting is allowed, while other operations like cut, paste, autofill, and formatting are prevented for those columns. - -The following example demonstrates how to allow sorting while preventing editing and other actions such as cut, paste, autofill, formatting, validation, and conditional formatting in the spreadsheet. You can also restrict additional actions by following the same approach. - -{% tabs %} -{% highlight js tabtitle="app.jsx" %} -{% include code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="app.tsx" %} -{% include code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.tsx %} -{% endhighlight %} -{% endtabs %} - - -{% previewsample "/document-processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode" %} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/app/app.jsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.jsx rename to Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/app/app.jsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/app/app.tsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/app.tsx rename to Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/app/app.tsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/app/datasource.jsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.jsx rename to Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/app/datasource.jsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/app/datasource.tsx similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/app/datasource.tsx rename to Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/app/datasource.tsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/index.html b/Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/index.html similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/index.html rename to Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/index.html diff --git a/Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/systemjs.config.js similarity index 100% rename from Document-Processing/code-snippet/spreadsheet/react/sorting-in-readonly-mode/systemjs.config.js rename to Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/systemjs.config.js From 213feacceaf8f612fd3686600959051014a05cb3 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 1 Dec 2025 18:58:18 +0530 Subject: [PATCH 4/6] 991939: How to prevent Spreadsheet actions for the specific cells without protecting the sheet or making cells read-only --- .../Excel/Spreadsheet/React/how-to/prevent-actions.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md index f65265373..a0452fbb8 100644 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md @@ -1,13 +1,13 @@ --- layout: post -title: Prevent actions without read-only and sheet protection in React Spreadsheet | Syncfusion +title: Prevent actions without read-only and sheet protection in Spreadsheet | Syncfusion description: Learn here all about to prevent actions without read-only and sheet protection in React Spreadsheet component of Syncfusion Essential JS 2 and more. control: Spreadsheet platform: document-processing documentation: ug --- -# How to prevent actions for specific cells without protecting the sheet or making it read-only in React Spreadsheet ? +# Prevent actions without read-Only and sheet protection in React Spreadsheet In Syncfusion React Spreadsheet, the [**read-only**](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet#make-cells-read-only-without-protecting-worksheet) feature makes a range of cells, rows, or columns completely non-editable and restricts all spreadsheet actions on those cells. Similarly, the [**sheet protection**](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet#protect-sheet) feature locks the entire sheet and restricts all spreadsheet actions on the sheet. It does not allow actions such as formatting cells, rows, or columns, selecting cells, or inserting hyperlinks—unless these options are explicitly enabled in the [`protectSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/protectsettingsmodel). @@ -23,9 +23,9 @@ To achieve this requirement, the following events can be used: To prevent editing for specific cells, use the [`cellEdit`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#celledit) event, which triggers whenever a cell enters edit mode. By checking the column index and setting `args.cancel = true`, you can prevent editing for those columns. This ensures that users cannot modify the cell content in those columns. -**Step 2: Prevent specfic spreadsheet actions** +**Step 2: Prevent specific spreadsheet actions** -To prevent specfic action after preventing the cell edting, you need to use the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) event. This event triggers before any action starts (such as cut, paste, autofill, formatting, etc.). In this event: +To prevent specific action after preventing the cell editing, you need to use the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) event. This event triggers before any action starts (such as cut, paste, autofill, formatting, etc.). In this event: * Fetch the target address based on the type of action being performed using `args.action` property. * Verify if the target range includes the restricted columns. From 2ab1b6c178b73d2cc30d95f926fadc2e075edf8b Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 1 Dec 2025 19:17:38 +0530 Subject: [PATCH 5/6] 991939: How to prevent Spreadsheet actions for the specific cells without protecting the sheet or making cells read-only --- .../Excel/Spreadsheet/React/how-to/prevent-actions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md index a0452fbb8..e7be7ca9b 100644 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md @@ -7,7 +7,7 @@ platform: document-processing documentation: ug --- -# Prevent actions without read-Only and sheet protection in React Spreadsheet +# Prevent actions without read-only and protection in React Spreadsheet In Syncfusion React Spreadsheet, the [**read-only**](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet#make-cells-read-only-without-protecting-worksheet) feature makes a range of cells, rows, or columns completely non-editable and restricts all spreadsheet actions on those cells. Similarly, the [**sheet protection**](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/protect-sheet#protect-sheet) feature locks the entire sheet and restricts all spreadsheet actions on the sheet. It does not allow actions such as formatting cells, rows, or columns, selecting cells, or inserting hyperlinks—unless these options are explicitly enabled in the [`protectSettings`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/protectsettingsmodel). From 4e16bd53f2c4b4c32860a4af09d30d7f9cc9cbf9 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 1 Dec 2025 19:27:14 +0530 Subject: [PATCH 6/6] 991939: How to prevent Spreadsheet actions for the specific cells without protecting the sheet or making cells read-only --- .../Excel/Spreadsheet/React/how-to/prevent-actions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md index e7be7ca9b..58055650d 100644 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/prevent-actions.md @@ -1,6 +1,6 @@ --- layout: post -title: Prevent actions without read-only and sheet protection in Spreadsheet | Syncfusion +title: Prevent actions without read-only and sheet protection | Syncfusion description: Learn here all about to prevent actions without read-only and sheet protection in React Spreadsheet component of Syncfusion Essential JS 2 and more. control: Spreadsheet platform: document-processing