1014442: added paste values without formatting content in how to session

Author: Nithishk1

Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md

@@ -0,0 +1,31 @@
+---
+layout: post
+title: Paste Without Formatting in React Spreadsheet component | Syncfusion
+description: Paste only raw values without formatting during copy and paste in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Spreadsheet 
+platform: document-processing
+documentation: ug
+---
+
+# Paste Values Without Formatting and styles in React Spreadsheet
+
+In the Syncfusion React Spreadsheet, you can make the paste action insert only the raw values into the cells, without bringing any formatting or styles from the copied content. This can be done by using the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event, where the Spreadsheet provides the details of the action being performed. When the action is a clipboard operation, you can set the paste type to Values, ensuring that only plain values are pasted into the sheet.
+
+This sample demonstrates how actionBegin makes the Spreadsheet paste values without formatting.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/paste-values-cs1" %}

Document-Processing/Excel/Spreadsheet/React/open-excel-files.md

@@ -162,11 +162,11 @@ Please find the code to fetch the blob data and load it into the Spreadsheet com
 
 ### Open from JSON
 
-The [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method lets you load a complete workbook into the Spreadsheet using a JSON object. This JSON is usually created on the server after converting an Excel file, but it can also be generated manually. The method reads the JSON and restores all sheets, cells, styles, formulas, formatting, and other workbook details inside the component.
+The [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method allows you to load a complete workbook into the Spreadsheet using a JSON object. This JSON is typically generated on the server when an Excel file is converted, but it can also be created manually. When the method loads the JSON, it restores all workbook details, including sheets, cell values, styles, formulas, and formatting.
 
-openFromJson is used because it provides a smooth and reliable way to load Excel data into the browser without needing the actual Excel file. Since the file is already processed into JSON on the server, the client only handles lightweight data. This reduces the workload on the browser and ensures that the document structure, formatting, and content appear exactly as intended. It also allows developers to modify or build workbook data directly in JSON form before loading it into the spreadsheet.
+This method is useful when you need to load Excel data in the browser without working with the actual Excel file. Because the Excel processing is handled on the server, the client works only with lightweight JSON, resulting in faster loading and accurate restoration of the workbook’s structure and formatting. Developers can also modify the workbook in JSON form before loading it into the component.
 
-The main benefit for users is a faster and more stable loading experience. Because the heavy Excel‑processing work is completed on the server, the spreadsheet opens quickly in the browser and maintains the correct layout, values, and styles. The JSON format helps avoid common issues that might occur with large or complex Excel files, making the entire experience more dependable and easier for users.
+This approach provides a quicker and more consistent loading experience. Large or complex Excel files can be displayed smoothly in the browser, which helps maintain a stable and efficient workflow.
 
 Please find the code to fetch the JSON data and load it into the Spreadsheet component below.
 

Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md

@@ -155,11 +155,7 @@ You can change the size of rows and columns in the spreadsheet by using [setRows
 
 You can change the height of single or multiple rows by using the [setRowsHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setrowsheight) method.
 
-There is a property `customHeight` on a row's model that indicates the row height has been explicitly set by dragging the row header boundary with the mouse or by a programmatic resize. The Spreadsheet sets this property using the setRow method during a resize operation.
-
-When customHeight is true, it means the height was manually defined rather than automatically determined from cell content or formatting.
-
-Actions such as enabling Wrap Text, increasing font size, or changing the font family do not set `customHeight` property.
+Additionally, each row model includes a `customHeight` property that indicates the row height was explicitly set either by manually adjusting the row header boundary or programmatically. When `customHeight` is true, the height is treated as manually defined and will not change automatically when enabling wrap text, increasing font size, or changing the font family; the height remains fixed until the user or code updates it.
 
 You can provide the following type of ranges to the method:
 
@@ -191,11 +187,7 @@ The following code example shows how to change the height for single/multiple ro
 
 You can change the width of single or multiple columns by using the [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setcolumnswidth) method.
 
-There is a property `customWidth` on a column’s model that indicates the column width has been explicitly set by dragging the column header boundary with the mouse or by a programmatic resize. The Spreadsheet sets this property using the `setColumn` method during a resize operation.
-
-When `customWidth` is true, it means the width was manually defined rather than automatically determined based on cell content or formatting.
-
-Actions such as enabling Wrap Text, increasing font size, or changing the font family do not set `customHeight` property.
+Additionally, each column model includes a `customWidth` property that indicates the column width was explicitly set either by manually adjusting the row header boundary or programmatically. When `customWidth` is true, the width is treated as manually defined.
 
 You can provide the following type of ranges to the method:
 

Document-Processing/Excel/Spreadsheet/React/save-excel-files.md

@@ -136,11 +136,11 @@ Please find below the code to retrieve blob data from the Spreadsheet control be
 
 ### Save Excel files as JSON
 
-The [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method converts the entire Spreadsheet workbook into a JSON object. This JSON includes sheets, cell values, formulas, styles, formatting, charts, and other workbook settings. It acts as a complete representation of the current spreadsheet state, which can be stored, sent to a server, or later restored using openFromJson.
+The [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method converts the entire Spreadsheet workbook into a JSON object that contains sheets, cell values, formulas, styles, formatting, charts, and other workbook settings. This JSON acts as a complete representation of the current spreadsheet state and can be stored, sent to a server, or later loaded back using openFromJson.
 
-saveAsJson is used to capture the full state of the Spreadsheet in a simple, structured format. Instead of creating an Excel file immediately, the workbook is converted into JSON, which is easier for applications to handle. This makes it useful when you want to store spreadsheet data temporarily, save it to a database, send it through an API, or allow another system to process or modify the data before creating an Excel file. It also helps when you want to restore the same workbook later without losing styles, formulas, or layout.
+This method is useful when the workbook needs to be saved in a structured format without generating an Excel file immediately. Because the data is captured as JSON, it is easier to store in a database, send through an API, or process on the server before creating an Excel file. It also allows the workbook to be restored later with all styles, formulas, and layout intact.
 
-The main benefit for users is that the Spreadsheet state can be saved quickly without waiting for the server to generate an Excel file. Because JSON is lightweight, it can be stored or transferred very fast, making the save operation feel smoother. When the JSON is loaded again, the workbook looks exactly as before, which gives users a consistent experience. This also reduces errors and makes the application more responsive during save operations.
+This approach is faster and produces a lightweight JSON that's easy to store or transfer. When reloaded, the workbook is restored exactly as before.
 
 Please find below the code to retrieve JSON data from the Spreadsheet control below.
 

Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { getDefaultData } from './datasource';
+
+function App() {
+  const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);
+
+  const actionBegin = (args) => {
+    const action = args.action;
+    const eventArgs = args.args.eventArgs;
+
+    // If the user is pasting, force paste to values only.
+    if (action === "clipboard") {
+      eventArgs.type = 'Values';
+    }
+  };
+
+  return (
+    <SpreadsheetComponent
+      ref={spreadsheetRef}
+      actionBegin={actionBegin}
+      sheets={[
+        {
+          name: 'Sheet1',
+          ranges: [
+            {
+              dataSource: getDefaultData(),
+              startCell: 'A1'
+            }
+          ]
+        }
+      ]}
+    >
+    </SpreadsheetComponent>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { getDefaultData } from './datasource';
+
+function App(): React.ReactElement {
+  const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);
+
+  const actionBegin = (args: any): void => {
+    const action: string = args.action;
+    const eventArgs: any = args.args.eventArgs;
+
+    // If the user is pasting, force paste to values only.
+    if (action === "clipboard") {
+      eventArgs.type = 'Values';
+    }
+  };
+
+  return (
+    <SpreadsheetComponent
+      ref={spreadsheetRef}
+      actionBegin={actionBegin}
+      sheets={[
+        {
+          name: 'Sheet1',
+          ranges: [
+            {
+              dataSource: getDefaultData(),
+              startCell: 'A1'
+            }
+          ]
+        }
+      ]}
+    >
+    </SpreadsheetComponent>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);