1014442: added contents for open/save in json

Author: Nithishk1

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" %}
 
+### 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.
+
+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.
+
+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.
+
+The following code snippet demonstrates openFromJson method:
+
+{% 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

@@ -155,6 +155,12 @@ 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.
+
 You can provide the following type of ranges to the method:
 
 * Single row range: `['2:2']`
@@ -185,6 +191,12 @@ 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.
+
 You can provide the following type of ranges to the method:
 
 * Single column range: `['F:F']`

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

@@ -134,6 +134,30 @@ 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 as JSON
+
+ serializes the current workbook into a JSON object that contains sheets, cell data, styles, formulas, and workbook settings. you can store that object and later restore it with openFromJson.
+
+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.
+
+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.
+
+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.
+
+
+The following code snippet demonstrates saveAsJson method:
+
+{% 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,38 @@
+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;
+    try {
+      spreadsheetRef.current.openFromJson({ file: jsonData });
+    } catch (e) {
+      console.error('Failed to open from JSON', e);
+      alert('Failed to open from JSON.');
+    }
+  }, []);
+
+  return (
+    <div className="control-pane">
+      <div className="control-section spreadsheet-control">
+        <div style={{ padding: '8px 0' }}>
+          <button className="e-btn e-primary" onClick={handleOpenFromJson}>
+            Open from 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,38 @@
+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;
+    try {
+      spreadsheetRef.current.openFromJson({ file: jsonData });
+    } catch (e) {
+      console.error('Failed to open from JSON', e);
+      alert('Failed to open from JSON.');
+    }
+  }, []);
+
+  return (
+    <div className="control-pane">
+      <div className="control-section spreadsheet-control">
+        <div style={{ padding: '8px 0' }}>
+          <button className="e-btn e-primary" onClick={handleOpenFromJson}>
+            Open from JSON
+          </button>
+        </div>
+        <div>
+          <SpreadsheetComponent id="spreadsheet" ref={spreadsheetRef} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<App />);