Merge pull request #2366 from syncfusion-content/EJ2-1014442-ug

Documentation(EJ2-1014442): Documentation Improvement - User Guide Enhancement

Author: sridhar-alagirisamy

Document-Processing-toc.html

@@ -5455,6 +5455,7 @@
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-dynamic-cell-template">Add dynamic cell templates</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-cell-icon">Add an icon to the cell</a></li>
 									<li><a href="/document-processing/excel/spreadsheet/react/how-to/get-filtered-data">Get the filtered row data</a></li>
+									<li><a href="/document-processing/excel/spreadsheet/react/how-to/paste-only-values-without-formatting">Paste only values without formatting and styles</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/paste-only-values-without-formatting.md

@@ -0,0 +1,31 @@
+---
+layout: post
+title: Paste Without Formatting in React Spreadsheet component | Syncfusion
+description: Learn here about Paste only 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/react/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.
+
+The following example shows how to 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

@@ -160,6 +160,27 @@ Please find the code to fetch the blob data and load it into the Spreadsheet com
 
 {% previewsample "/document-processing/code-snippet/spreadsheet/react/open-from-blobdata-cs1" %}
 
+### Load Workbook as JSON
+
+The Spreadsheet component allows you to load an entire workbook using a JSON object. This JSON is typically generated by the Spreadsheet server by converting an Excel file into a Spreadsheet‑compatible workbook JSON, but it can also be created manually. When loaded, the component reads the JSON and restores all workbook details, including sheets, cells, styles, formulas, formatting, and other associated metadata.
+
+You can optionally pass deserialization options to the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to ignore specific features when loading the JSON. For example, you can exclude styles, formulas, number formats, images, or conditional formatting. These options are optional—if you do not specify them, the method restores the full workbook details by default.
+
+Reference: Guide to Creating the JSON Structure: https://help.syncfusion.com/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure.
+
+The following example demonstrates how to load a workbook JSON into the Spreadsheet component.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/open-from-json-cs1" %}
+
 ### Load server-side Excel files into Spreadsheet
 
 By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to load that `JSON data` into the Spreadsheet component.

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

@@ -17,13 +17,13 @@ Spreadsheet is a tabular format consisting of rows and columns. The intersection
 
 ## Insert
 
-You can insert rows or columns anywhere in a spreadsheet. Use the [`allowInsert`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowinsert) property to enable or disable the insert option in Spreadsheet.
+You can insert rows or columns anywhere in a spreadsheet. Use the [`allowInsert`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowinsert) property to enable or disable the insert option in Spreadsheet.
 
 ### Row
 
 The rows can be inserted in the following ways,
 
-* Using [`insertRow`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertrow) method, you can insert the rows once the component is loaded.
+* Using [`insertRow`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertrow) method, you can insert the rows once the component is loaded.
 * Using context menu, insert the empty rows in the desired position.
 
 The following code example shows the options for inserting rows in the spreadsheet.
@@ -49,7 +49,7 @@ The following code example shows the options for inserting rows in the spreadshe
 
 The columns can be inserted in the following ways,
 
-* Using [`insertColumn`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#insertcolumn) method, you can insert the columns once the component is loaded.
+* Using [`insertColumn`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#insertcolumn) method, you can insert the columns once the component is loaded.
 * Using context menu, insert the empty columns in the desired position.
 
 The following code example shows the options for inserting columns in the spreadsheet.
@@ -73,11 +73,11 @@ The following code example shows the options for inserting columns in the spread
 
 ## Delete
 
-Delete support provides an option for deleting the rows and columns in the spreadsheet. Use [`allowDelete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#allowdelete) property to enable or disable the delete option in Spreadsheet.
+Delete support provides an option for deleting the rows and columns in the spreadsheet. Use [`allowDelete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#allowdelete) property to enable or disable the delete option in Spreadsheet.
 
 The rows and columns can be deleted dynamically in the following ways,
 
-* Using [`delete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#delete) method, you can delete the loaded rows and columns.
+* Using [`delete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#delete) method, you can delete the loaded rows and columns.
 * Using context menu, you can delete the selected rows and columns.
 
 The following code example shows the delete operation of rows and columns in the spreadsheet.
@@ -149,11 +149,11 @@ The following code example shows the hide/show rows and columns operation in the
 
 ## Size
 
-You can change the size of rows and columns in the spreadsheet by using [setRowsHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setrowsheight) and [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setcolumnswidth) methods.
+You can change the size of rows and columns in the spreadsheet by using [setRowsHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setrowsheight) and [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setcolumnswidth) methods.
 
 ### Row
 
-You can change the height of single or multiple rows by using the [setRowsHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setrowsheight) method.
+You can change the height of single or multiple rows by using the [setRowsHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setrowsheight) method.
 
 You can provide the following type of ranges to the method:
 
@@ -162,6 +162,8 @@ You can provide the following type of ranges to the method:
 * Multiple rows with discontinuous range: `['1:10', '15:25', '30:40']`
 * Multiple rows with different sheets: `[Sheet1!1:50, 'Sheet2!1:50', 'Sheet3!1:50']`
 
+Additionally, each row model includes a [customHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rowmodel#customheight) property that indicates the row height was explicitly set either by manually adjusting the row header boundary or programmatically. When [customHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rowmodel#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.
+
 The following code example shows how to change the height for single/multiple rows in the spreadsheet.
 
 {% tabs %}
@@ -183,7 +185,7 @@ The following code example shows how to change the height for single/multiple ro
 
 ### Column
 
-You can change the width of single or multiple columns by using the [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setcolumnswidth) method.
+You can change the width of single or multiple columns by using the [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setcolumnswidth) method.
 
 You can provide the following type of ranges to the method:
 
@@ -192,6 +194,8 @@ You can provide the following type of ranges to the method:
 * Multiple columns with discontinuous range: `['A:C', 'G:I', 'K:M']`
 * Multiple columns with different sheets: `[Sheet1!A:H, 'Sheet2!A:H', 'Sheet3!A:H']`
 
+Additionally, each column model includes a [customWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/columnmodel#customwidth) property that indicates the column width was explicitly set either by manually adjusting the column header boundary or programmatically. When [customWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/columnmodel#customwidth) is true, the width is treated as manually defined.
+
 The following code example shows how to change the width for single/multiple columns in the spreadsheet.
 
 {% tabs %}
@@ -213,7 +217,7 @@ The following code example shows how to change the width for single/multiple col
 
 ## Changing text in column headers
 
-Using the [`beforeCellRender`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#beforecellrender) event, you can change the text in the column headers. In that event, you can use the `e-header-cell` class to identify the header cell element and update its text value.
+Using the [`beforeCellRender`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#beforecellrender) event, you can change the text in the column headers. In that event, you can use the `e-header-cell` class to identify the header cell element and update its text value.
 
 The following code example shows how to change the text in the column headers.
 

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

@@ -134,6 +134,25 @@ Please find below the code to retrieve blob data from the Spreadsheet control be
         
 {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/save-as-blobdata-cs1" %}
 
+### Save Workbook as JSON
+
+Our Spreadsheet component allows you to export an entire workbook as a JSON object. This JSON output includes all workbook details such as sheets, cell values, formulas, styles, and formatting.
+
+You can optionally pass serialization options to the [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to exclude specific features from the exported JSON. For example, you can choose to ignore styles, formulas, number formats, images, or conditional formatting. These options are fully optional—if they are not provided, the method exports the workbook with all details preserved by default.
+
+The following example demonstrates how to save a workbook as JSON from the Spreadsheet component.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/save-as-json-cs1" %}
+
 ### Save Excel files to a server
 
 By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location.

Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { jsonData } from './datasource';
+
+function App() {
+  const spreadsheetRef = React.useRef(null);
+
+  const handleOpenFromJson = React.useCallback(() => {
+    if (!spreadsheetRef.current) return;
+      spreadsheetRef.current.openFromJson({ file: jsonData });
+  }, []);
+
+  return (
+    <div className="control-pane">
+      <div className="control-section spreadsheet-control">
+        <div style={{ padding: '8px 0' }}>
+          <button className="e-btn e-primary" onClick={handleOpenFromJson}>
+            Load workbook JSON
+          </button>
+        </div>
+        <div>
+          <SpreadsheetComponent id="spreadsheet" ref={spreadsheetRef} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { jsonData } from './datasource';
+
+function App(): React.ReactElement {
+  const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);
+
+  const handleOpenFromJson = React.useCallback((): void => {
+    if (!spreadsheetRef.current) return;
+      spreadsheetRef.current.openFromJson({ file: jsonData });
+  }, []);
+
+  return (
+    <div className="control-pane">
+      <div className="control-section spreadsheet-control">
+        <div style={{ padding: '8px 0' }}>
+          <button className="e-btn e-primary" onClick={handleOpenFromJson}>
+            Load workbook JSON
+          </button>
+        </div>
+        <div>
+          <SpreadsheetComponent id="spreadsheet" ref={spreadsheetRef} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);