1014442: modified content in open/save json for how to session

Author: Nithishk1

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

@@ -1,7 +1,7 @@
 ---
 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.
+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
@@ -11,7 +11,7 @@ documentation: ug
 
 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.
 
-The following example shows how `actionBegin` makes the Spreadsheet paste values without formatting.
+The following example shows how to paste values without formatting.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

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

@@ -162,15 +162,13 @@ Please find the code to fetch the blob data and load it into the Spreadsheet com
 
 ### Load Workbook as JSON
 
-The Spreadsheet component allows you to load an entire workbook by using JSON object. This JSON object is given directly as a data source or typically generated on the server when an Excel file is converted, but also suitable for manual creation or editing—contains all workbook details such as sheets, cell values, formulas, styles, and formatting.
+The Spreadsheet component allows you to load an entire workbook by 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.
 
-You can also create JSON object by [configuring deserialization options](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/open-save#configure-json-deserialization-options) and passing them as arguments to the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to restore the workbook's structure and appearance. When the method loads the JSON, it restores all workbook details, including sheets, cell values, styles, formulas, and formatting.
+You can also pass optional deserialization options to the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to selectively ignore certain features when loading the JSON (for example, styles, formulas, number formats, images, or conditional formats). These deserialization options are optional; if they are not provided, 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.
 
-Overall, this JSON‑based approach offers a faster and more consistent experience when loading large or complex Excel files, ensuring smooth rendering within the Spreadsheet component.
-
-Please find the code to fetch the JSON data and load it into the Spreadsheet component below.
+The following code example shows how to load workbook as JSON into the Spreadsheet component.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

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

@@ -162,7 +162,7 @@ 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` 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.
+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.
 
@@ -194,7 +194,7 @@ 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` property that indicates the column width was explicitly set either by manually adjusting the column header boundary or programmatically. When `customWidth` is true, the width is treated as manually defined.
+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.
 

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

@@ -136,16 +136,11 @@ Please find below the code to retrieve blob data from the Spreadsheet control be
 
 ### Save Workbook as JSON
 
-The Spreadsheet component allows you to save an entire workbook as a JSON object. This JSON object, which contains all workbook details such as sheets, cell values, formulas, styles, formatting, and other settings—can be stored, transferred, or used later to recreate the workbook.
+The Spreadsheet component allows you to save an entire workbook as a JSON object. This JSON typically contains workbook details such as sheets, cell values, formulas, styles, and formatting.
 
-You can also customize the generated JSON object by [configuring serialization options](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/open-save#configure-json-serialization-options) and passing them as arguments to the [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to control how the workbook is exported as JSON.
+You can optionally pass serialization options to the [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to selectively ignore certain features when exporting the workbook as JSON — for example, styles, formulas, number formats, images, or conditional formats. These serialization options are optional; if they are not provided, the method exports the full workbook by default.
 
-Reference: Guide to Creating the JSON Structure:
-https://help.syncfusion.com/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure
-
-Overall, this JSON‑based approach offers a faster and more efficient way to save large or complex Excel files, producing lightweight JSON that is easy to store, process, or transmit.
-
-Please find below the code to retrieve JSON data from the Spreadsheet component.
+The following code example shows how to save workbook as JSON data from the Spreadsheet component.
 
 {% tabs %}
 {% highlight js tabtitle="app.jsx" %}

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

@@ -16,7 +16,7 @@ function App() {
       <div className="control-section spreadsheet-control">
         <div style={{ padding: '8px 0' }}>
           <button className="e-btn e-primary" onClick={handleOpenFromJson}>
-            Open from JSON
+            Load workbook JSON
           </button>
         </div>
         <div>

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

@@ -16,7 +16,7 @@ function App(): React.ReactElement {
       <div className="control-section spreadsheet-control">
         <div style={{ padding: '8px 0' }}>
           <button className="e-btn e-primary" onClick={handleOpenFromJson}>
-            Open from JSON
+            Load workbook JSON
           </button>
         </div>
         <div>

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

@@ -7,12 +7,9 @@ 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';
+    if (args.action === "clipboard") {
+      args.args.eventArgs.type = 'Values';
     }
   };
 

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

@@ -7,12 +7,9 @@ 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';
+    if (args.action === "clipboard") {
+      args.args.eventArgs.type = 'Values';
     }
   };
 

Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx

@@ -9,10 +9,8 @@ function App() {
 
   const handleSaveAsJson = React.useCallback(async () => {
     if (!spreadsheetRef.current) return;
-    const options = {};
-    const result = await spreadsheetRef.current.saveAsJson(options);
-    const jsonObject = result && (result).jsonObject ? (result).jsonObject : result;
-    const content = typeof jsonObject === 'string' ? jsonObject : JSON.stringify(jsonObject, null, 2);
+    const result = await spreadsheetRef.current.saveAsJson();
+    const content = JSON.stringify(jsonObject, null, 2);
     setSavedJson(content);
   }, []);
 

Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
-import type { SerializationOptions } from '@syncfusion/ej2-react-spreadsheet';
 
 function App(): React.ReactElement {
   const spreadsheetRef = React.useRef<SpreadsheetComponent | null>(null);
@@ -10,10 +9,8 @@ function App(): React.ReactElement {
 
   const handleSaveAsJson = React.useCallback(async () => {
     if (!spreadsheetRef.current) return;
-    const options: SerializationOptions = {};
-    const result: any = await spreadsheetRef.current.saveAsJson(options);
-    const jsonObject: any = result && (result as any).jsonObject ? (result as any).jsonObject : result;
-    const content: string = typeof jsonObject === 'string' ? jsonObject : JSON.stringify(jsonObject, null, 2);
+    const result: any = await spreadsheetRef.current.saveAsJson();
+    const content: string = JSON.stringify(result, null, 2);
     setSavedJson(content);
   }, []);