documentation(EJ2-991939): How to prevent Spreadsheet actions for the specific cells without protecting the sheet or making cells read-only

Document-Processing-toc.html

@@ -4768,6 +4768,7 @@
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/prevent-actions">Prevent Actions Without Read-Only and Sheet Protection</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>

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 | 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
+---
+
+# 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).
+
+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 specific spreadsheet actions**
+
+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.
+*   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)

Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/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 (
+        <div>
+            <SpreadsheetComponent ref={spreadsheetRef} cellEdit={cellEdit} actionBegin={actionBegin}>
+                <SheetsDirective>
+                    <SheetDirective>
+                        <RangesDirective>
+                            <RangeDirective dataSource={data}></RangeDirective>
+                        </RangesDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={130}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                        </ColumnsDirective>
+                    </SheetDirective>
+                </SheetsDirective>
+            </SpreadsheetComponent>
+        </div>
+    );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/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<SpreadsheetComponent>(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 (
+        <div>
+            <SpreadsheetComponent ref={spreadsheetRef} cellEdit={cellEdit} actionBegin={actionBegin}>
+                <SheetsDirective>
+                    <SheetDirective>
+                        <RangesDirective>
+                            <RangeDirective dataSource={data}></RangeDirective>
+                        </RangesDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={130}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                            <ColumnDirective width={100}></ColumnDirective>
+                        </ColumnsDirective>
+                    </SheetDirective>
+                </SheetsDirective>
+            </SpreadsheetComponent>
+        </div>
+    );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);

Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/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 },
+];

Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/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 },
+];

Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Spreadsheet</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/23.1.36/material.css" rel="stylesheet" type="text/css" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+
+        .e-sheet-panel {
+            height: 380px;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div id='root'>
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>

Document-Processing/code-snippet/spreadsheet/react/prevent-actions-cs1/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/31.2.12/"
+    },
+    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');
+
+
+