From e11b9e309069d1071a06602f775f318bfccbe144 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Thu, 5 Mar 2026 19:24:10 +0530 Subject: [PATCH 01/12] 1014442: added contents for open/save in json --- .../Spreadsheet/React/open-excel-files.md | 21 + .../Spreadsheet/React/rows-and-columns.md | 12 + .../Spreadsheet/React/save-excel-files.md | 24 + .../react/open-from-json-cs1/app/app.jsx | 38 ++ .../react/open-from-json-cs1/app/app.tsx | 38 ++ .../open-from-json-cs1/app/datasource.jsx | 475 ++++++++++++++++++ .../open-from-json-cs1/app/datasource.tsx | 475 ++++++++++++++++++ .../react/open-from-json-cs1/index.html | 53 ++ .../open-from-json-cs1/systemjs.config.js | 58 +++ .../react/save-as-json-cs1/app/app.jsx | 49 ++ .../react/save-as-json-cs1/app/app.tsx | 51 ++ .../react/save-as-json-cs1/app/datasource.jsx | 475 ++++++++++++++++++ .../react/save-as-json-cs1/app/datasource.tsx | 475 ++++++++++++++++++ .../react/save-as-json-cs1/index.html | 53 ++ .../react/save-as-json-cs1/systemjs.config.js | 58 +++ 15 files changed, 2355 insertions(+) create mode 100644 Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/systemjs.config.js diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index 80c32cff3e..1dc0a1d342 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/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. diff --git a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md index abcda41b9b..533f0f87db 100644 --- a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md +++ b/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']` diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index 988f2cf95f..061d90879d 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/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. diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx new file mode 100644 index 0000000000..167bdc77ae --- /dev/null +++ b/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 ( +
+
+
+ +
+
+ +
+
+
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx new file mode 100644 index 0000000000..2d9bbcf7f1 --- /dev/null +++ b/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(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 ( +
+
+
+ +
+
+ +
+
+
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/datasource.jsx new file mode 100644 index 0000000000..59ce2f3834 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/datasource.jsx @@ -0,0 +1,475 @@ +/** + * json structure + */ +export let jsonData = { + "Workbook": { + "definedNames": [], + "sheets": [ + { + "columns": [ + { + "width": 100 + }, + { + "width": 158 + }, + { + "width": 72 + }, + { + "width": 113 + }, + { + "width": 113 + }, + { + "width": 77 + }, + { + "width": 97 + }, + { + "width": 73 + } + ], + "conditionalFormats": [ + { + "type": "GYRColorScale", + "range": "C3:C10" + }, + { + "type": "LessThan", + "cFColor": "RedF", + "range": "G3:G10", + "value": "43707," + }, + { + "type": "BlueDataBar", + "range": "D3:D10" + }, + { + "type": "GreenDataBar", + "range": "E3:E10" + }, + { + "type": "Top10Items", + "format": { + "style": { + "backgroundColor": "#009999", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "Bottom10Items", + "format": { + "style": { + "backgroundColor": "#C68D53", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "ThreeStars", + "range": "H3:H10" + } + ], + "name": "Inventory List", + "rows": [ + { + "cells": [ + { + "colSpan": 8, + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + }, + "value": "Inventory List" + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + } + ], + "height": 30 + }, + { + "cells": [ + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Code" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Name" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Quantity" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Purchase Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Selling Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Profit" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Last Updated" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Rating" + } + ] + }, + { + "cells": [ + { + "value": "AG940Z" + }, + { + "value": "Laser Printer" + }, + { + "value": "144" + }, + { + "format": "$#,##0.00", + "value": "169.5" + }, + { + "format": "$#,##0.00", + "value": "172" + }, + { + "format": "$#,##0.00", + "formula": "=E3-D3" + }, + { + "format": "mm-dd-yyyy", + "value": "43610" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BJ120K" + }, + { + "value": "Scientific Calculator" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "21.8" + }, + { + "format": "$#,##0.00", + "value": "23" + }, + { + "format": "$#,##0.00", + "formula": "=E4-D4" + }, + { + "format": "mm-dd-yyyy", + "value": "43674" + }, + { + "value": "4" + } + ] + }, + { + "cells": [ + { + "value": "BC120M" + }, + { + "value": "Wired Keyboard" + }, + { + "value": "438" + }, + { + "format": "$#,##0.00", + "value": "26.8" + }, + { + "format": "$#,##0.00", + "value": "29" + }, + { + "format": "$#,##0.00", + "formula": "=E5-D5" + }, + { + "format": "mm-dd-yyyy", + "value": "43920" + }, + { + "value": "4.25" + } + ] + }, + { + "cells": [ + { + "value": "BS121L" + }, + { + "value": "Memory Card" + }, + { + "value": "486" + }, + { + "format": "$#,##0.00", + "value": "23.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E6-D6" + }, + { + "format": "mm-dd-yyyy", + "value": "43697" + }, + { + "value": "3.5" + } + ] + }, + { + "cells": [ + { + "value": "BU121K" + }, + { + "value": "Coffee Maker" + }, + { + "value": "176" + }, + { + "format": "$#,##0.00", + "value": "56.5" + }, + { + "format": "$#,##0.00", + "value": "59" + }, + { + "format": "$#,##0.00", + "formula": "=E7-D7" + }, + { + "format": "mm-dd-yyyy", + "value": "43863" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BD121M" + }, + { + "value": "Table Lamp" + }, + { + "value": "0" + }, + { + "format": "$#,##0.00", + "value": "22.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E8-D8" + }, + { + "format": "mm-dd-yyyy", + "value": "43780" + }, + { + "value": "5" + } + ] + }, + { + "cells": [ + { + "value": "AT992X" + }, + { + "value": "Document Scanner" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "175" + }, + { + "format": "$#,##0.00", + "value": "177" + }, + { + "format": "$#,##0.00", + "formula": "=E9-D9" + }, + { + "format": "mm-dd-yyyy", + "value": "43568" + }, + { + "value": "4.75" + } + ] + }, + { + "cells": [ + { + "value": "AP992Z" + }, + { + "value": "Gaming Headset" + }, + { + "value": "58" + }, + { + "format": "$#,##0.00", + "value": "32" + }, + { + "format": "$#,##0.00", + "value": "35" + }, + { + "format": "$#,##0.00", + "formula": "=E10-D10" + }, + { + "format": "mm-dd-yyyy", + "value": "43875" + }, + { + "value": "4.4" + } + ] + } + ], + "selectedRange": "A1:H1" + } + ] + } +}; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/datasource.tsx new file mode 100644 index 0000000000..eb843a1d19 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/datasource.tsx @@ -0,0 +1,475 @@ +/** + * json structure + */ +export let jsonData: Object = { + "Workbook": { + "definedNames": [], + "sheets": [ + { + "columns": [ + { + "width": 100 + }, + { + "width": 158 + }, + { + "width": 72 + }, + { + "width": 113 + }, + { + "width": 113 + }, + { + "width": 77 + }, + { + "width": 97 + }, + { + "width": 73 + } + ], + "conditionalFormats": [ + { + "type": "GYRColorScale", + "range": "C3:C10" + }, + { + "type": "LessThan", + "cFColor": "RedF", + "range": "G3:G10", + "value": "43707," + }, + { + "type": "BlueDataBar", + "range": "D3:D10" + }, + { + "type": "GreenDataBar", + "range": "E3:E10" + }, + { + "type": "Top10Items", + "format": { + "style": { + "backgroundColor": "#009999", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "Bottom10Items", + "format": { + "style": { + "backgroundColor": "#C68D53", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "ThreeStars", + "range": "H3:H10" + } + ], + "name": "Inventory List", + "rows": [ + { + "cells": [ + { + "colSpan": 8, + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + }, + "value": "Inventory List" + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + } + ], + "height": 30 + }, + { + "cells": [ + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Code" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Name" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Quantity" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Purchase Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Selling Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Profit" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Last Updated" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Rating" + } + ] + }, + { + "cells": [ + { + "value": "AG940Z" + }, + { + "value": "Laser Printer" + }, + { + "value": "144" + }, + { + "format": "$#,##0.00", + "value": "169.5" + }, + { + "format": "$#,##0.00", + "value": "172" + }, + { + "format": "$#,##0.00", + "formula": "=E3-D3" + }, + { + "format": "mm-dd-yyyy", + "value": "43610" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BJ120K" + }, + { + "value": "Scientific Calculator" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "21.8" + }, + { + "format": "$#,##0.00", + "value": "23" + }, + { + "format": "$#,##0.00", + "formula": "=E4-D4" + }, + { + "format": "mm-dd-yyyy", + "value": "43674" + }, + { + "value": "4" + } + ] + }, + { + "cells": [ + { + "value": "BC120M" + }, + { + "value": "Wired Keyboard" + }, + { + "value": "438" + }, + { + "format": "$#,##0.00", + "value": "26.8" + }, + { + "format": "$#,##0.00", + "value": "29" + }, + { + "format": "$#,##0.00", + "formula": "=E5-D5" + }, + { + "format": "mm-dd-yyyy", + "value": "43920" + }, + { + "value": "4.25" + } + ] + }, + { + "cells": [ + { + "value": "BS121L" + }, + { + "value": "Memory Card" + }, + { + "value": "486" + }, + { + "format": "$#,##0.00", + "value": "23.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E6-D6" + }, + { + "format": "mm-dd-yyyy", + "value": "43697" + }, + { + "value": "3.5" + } + ] + }, + { + "cells": [ + { + "value": "BU121K" + }, + { + "value": "Coffee Maker" + }, + { + "value": "176" + }, + { + "format": "$#,##0.00", + "value": "56.5" + }, + { + "format": "$#,##0.00", + "value": "59" + }, + { + "format": "$#,##0.00", + "formula": "=E7-D7" + }, + { + "format": "mm-dd-yyyy", + "value": "43863" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BD121M" + }, + { + "value": "Table Lamp" + }, + { + "value": "0" + }, + { + "format": "$#,##0.00", + "value": "22.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E8-D8" + }, + { + "format": "mm-dd-yyyy", + "value": "43780" + }, + { + "value": "5" + } + ] + }, + { + "cells": [ + { + "value": "AT992X" + }, + { + "value": "Document Scanner" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "175" + }, + { + "format": "$#,##0.00", + "value": "177" + }, + { + "format": "$#,##0.00", + "formula": "=E9-D9" + }, + { + "format": "mm-dd-yyyy", + "value": "43568" + }, + { + "value": "4.75" + } + ] + }, + { + "cells": [ + { + "value": "AP992Z" + }, + { + "value": "Gaming Headset" + }, + { + "value": "58" + }, + { + "format": "$#,##0.00", + "value": "32" + }, + { + "format": "$#,##0.00", + "value": "35" + }, + { + "format": "$#,##0.00", + "formula": "=E10-D10" + }, + { + "format": "mm-dd-yyyy", + "value": "43875" + }, + { + "value": "4.4" + } + ] + } + ], + "selectedRange": "A1:H1" + } + ] + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/index.html new file mode 100644 index 0000000000..28da990416 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/index.html @@ -0,0 +1,53 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/systemjs.config.js new file mode 100644 index 0000000000..9290509c4a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-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/32.1.19/" + }, + 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'); + + + diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx new file mode 100644 index 0000000000..53a8ed5df6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; + +function App() { + const spreadsheetRef = React.useRef(null); + + const handleSaveAsJson = React.useCallback(async () => { + if (!spreadsheetRef.current) return; + try { + 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 blob = new Blob([content], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'spreadsheet.json'; + document.body.appendChild(a); + a.click(); + a.remove(); + URL.revokeObjectURL(url); + } catch (e) { + console.error('Failed to save as JSON', e); + alert('Failed to save as JSON.'); + } + }, []); + + return ( +
+
+
+ +
+ +
+ +
+
+
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx new file mode 100644 index 0000000000..331afcb73d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx @@ -0,0 +1,51 @@ +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(null); + + const handleSaveAsJson = React.useCallback(async () => { + if (!spreadsheetRef.current) return; + try { + 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 blob: Blob = new Blob([content], { type: 'application/json' }); + const url: string = URL.createObjectURL(blob); + const a: HTMLAnchorElement = document.createElement('a'); + a.href = url; + a.download = 'spreadsheet.json'; + document.body.appendChild(a); + a.click(); + a.remove(); + URL.revokeObjectURL(url); + } catch (e: unknown) { + console.error('Failed to save as JSON', e); + alert('Failed to save as JSON.'); + } + }, []); + + return ( +
+
+
+ +
+ +
+ +
+
+
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.jsx new file mode 100644 index 0000000000..59ce2f3834 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.jsx @@ -0,0 +1,475 @@ +/** + * json structure + */ +export let jsonData = { + "Workbook": { + "definedNames": [], + "sheets": [ + { + "columns": [ + { + "width": 100 + }, + { + "width": 158 + }, + { + "width": 72 + }, + { + "width": 113 + }, + { + "width": 113 + }, + { + "width": 77 + }, + { + "width": 97 + }, + { + "width": 73 + } + ], + "conditionalFormats": [ + { + "type": "GYRColorScale", + "range": "C3:C10" + }, + { + "type": "LessThan", + "cFColor": "RedF", + "range": "G3:G10", + "value": "43707," + }, + { + "type": "BlueDataBar", + "range": "D3:D10" + }, + { + "type": "GreenDataBar", + "range": "E3:E10" + }, + { + "type": "Top10Items", + "format": { + "style": { + "backgroundColor": "#009999", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "Bottom10Items", + "format": { + "style": { + "backgroundColor": "#C68D53", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "ThreeStars", + "range": "H3:H10" + } + ], + "name": "Inventory List", + "rows": [ + { + "cells": [ + { + "colSpan": 8, + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + }, + "value": "Inventory List" + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + } + ], + "height": 30 + }, + { + "cells": [ + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Code" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Name" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Quantity" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Purchase Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Selling Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Profit" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Last Updated" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Rating" + } + ] + }, + { + "cells": [ + { + "value": "AG940Z" + }, + { + "value": "Laser Printer" + }, + { + "value": "144" + }, + { + "format": "$#,##0.00", + "value": "169.5" + }, + { + "format": "$#,##0.00", + "value": "172" + }, + { + "format": "$#,##0.00", + "formula": "=E3-D3" + }, + { + "format": "mm-dd-yyyy", + "value": "43610" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BJ120K" + }, + { + "value": "Scientific Calculator" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "21.8" + }, + { + "format": "$#,##0.00", + "value": "23" + }, + { + "format": "$#,##0.00", + "formula": "=E4-D4" + }, + { + "format": "mm-dd-yyyy", + "value": "43674" + }, + { + "value": "4" + } + ] + }, + { + "cells": [ + { + "value": "BC120M" + }, + { + "value": "Wired Keyboard" + }, + { + "value": "438" + }, + { + "format": "$#,##0.00", + "value": "26.8" + }, + { + "format": "$#,##0.00", + "value": "29" + }, + { + "format": "$#,##0.00", + "formula": "=E5-D5" + }, + { + "format": "mm-dd-yyyy", + "value": "43920" + }, + { + "value": "4.25" + } + ] + }, + { + "cells": [ + { + "value": "BS121L" + }, + { + "value": "Memory Card" + }, + { + "value": "486" + }, + { + "format": "$#,##0.00", + "value": "23.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E6-D6" + }, + { + "format": "mm-dd-yyyy", + "value": "43697" + }, + { + "value": "3.5" + } + ] + }, + { + "cells": [ + { + "value": "BU121K" + }, + { + "value": "Coffee Maker" + }, + { + "value": "176" + }, + { + "format": "$#,##0.00", + "value": "56.5" + }, + { + "format": "$#,##0.00", + "value": "59" + }, + { + "format": "$#,##0.00", + "formula": "=E7-D7" + }, + { + "format": "mm-dd-yyyy", + "value": "43863" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BD121M" + }, + { + "value": "Table Lamp" + }, + { + "value": "0" + }, + { + "format": "$#,##0.00", + "value": "22.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E8-D8" + }, + { + "format": "mm-dd-yyyy", + "value": "43780" + }, + { + "value": "5" + } + ] + }, + { + "cells": [ + { + "value": "AT992X" + }, + { + "value": "Document Scanner" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "175" + }, + { + "format": "$#,##0.00", + "value": "177" + }, + { + "format": "$#,##0.00", + "formula": "=E9-D9" + }, + { + "format": "mm-dd-yyyy", + "value": "43568" + }, + { + "value": "4.75" + } + ] + }, + { + "cells": [ + { + "value": "AP992Z" + }, + { + "value": "Gaming Headset" + }, + { + "value": "58" + }, + { + "format": "$#,##0.00", + "value": "32" + }, + { + "format": "$#,##0.00", + "value": "35" + }, + { + "format": "$#,##0.00", + "formula": "=E10-D10" + }, + { + "format": "mm-dd-yyyy", + "value": "43875" + }, + { + "value": "4.4" + } + ] + } + ], + "selectedRange": "A1:H1" + } + ] + } +}; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.tsx new file mode 100644 index 0000000000..eb843a1d19 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.tsx @@ -0,0 +1,475 @@ +/** + * json structure + */ +export let jsonData: Object = { + "Workbook": { + "definedNames": [], + "sheets": [ + { + "columns": [ + { + "width": 100 + }, + { + "width": 158 + }, + { + "width": 72 + }, + { + "width": 113 + }, + { + "width": 113 + }, + { + "width": 77 + }, + { + "width": 97 + }, + { + "width": 73 + } + ], + "conditionalFormats": [ + { + "type": "GYRColorScale", + "range": "C3:C10" + }, + { + "type": "LessThan", + "cFColor": "RedF", + "range": "G3:G10", + "value": "43707," + }, + { + "type": "BlueDataBar", + "range": "D3:D10" + }, + { + "type": "GreenDataBar", + "range": "E3:E10" + }, + { + "type": "Top10Items", + "format": { + "style": { + "backgroundColor": "#009999", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "Bottom10Items", + "format": { + "style": { + "backgroundColor": "#C68D53", + "fontWeight": "Bold" + } + }, + "range": "F3:F10", + "value": "1," + }, + { + "type": "ThreeStars", + "range": "H3:H10" + } + ], + "name": "Inventory List", + "rows": [ + { + "cells": [ + { + "colSpan": 8, + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + }, + "value": "Inventory List" + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + }, + { + "style": { + "fontSize": "13pt", + "fontWeight": "Bold", + "textAlign": "Center", + "verticalAlign": "Middle" + } + } + ], + "height": 30 + }, + { + "cells": [ + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Code" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Item Name" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Quantity" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Purchase Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Selling Price" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Profit" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Last Updated" + }, + { + "style": { + "fontWeight": "Bold", + "textAlign": "Center" + }, + "value": "Rating" + } + ] + }, + { + "cells": [ + { + "value": "AG940Z" + }, + { + "value": "Laser Printer" + }, + { + "value": "144" + }, + { + "format": "$#,##0.00", + "value": "169.5" + }, + { + "format": "$#,##0.00", + "value": "172" + }, + { + "format": "$#,##0.00", + "formula": "=E3-D3" + }, + { + "format": "mm-dd-yyyy", + "value": "43610" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BJ120K" + }, + { + "value": "Scientific Calculator" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "21.8" + }, + { + "format": "$#,##0.00", + "value": "23" + }, + { + "format": "$#,##0.00", + "formula": "=E4-D4" + }, + { + "format": "mm-dd-yyyy", + "value": "43674" + }, + { + "value": "4" + } + ] + }, + { + "cells": [ + { + "value": "BC120M" + }, + { + "value": "Wired Keyboard" + }, + { + "value": "438" + }, + { + "format": "$#,##0.00", + "value": "26.8" + }, + { + "format": "$#,##0.00", + "value": "29" + }, + { + "format": "$#,##0.00", + "formula": "=E5-D5" + }, + { + "format": "mm-dd-yyyy", + "value": "43920" + }, + { + "value": "4.25" + } + ] + }, + { + "cells": [ + { + "value": "BS121L" + }, + { + "value": "Memory Card" + }, + { + "value": "486" + }, + { + "format": "$#,##0.00", + "value": "23.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E6-D6" + }, + { + "format": "mm-dd-yyyy", + "value": "43697" + }, + { + "value": "3.5" + } + ] + }, + { + "cells": [ + { + "value": "BU121K" + }, + { + "value": "Coffee Maker" + }, + { + "value": "176" + }, + { + "format": "$#,##0.00", + "value": "56.5" + }, + { + "format": "$#,##0.00", + "value": "59" + }, + { + "format": "$#,##0.00", + "formula": "=E7-D7" + }, + { + "format": "mm-dd-yyyy", + "value": "43863" + }, + { + "value": "4.5" + } + ] + }, + { + "cells": [ + { + "value": "BD121M" + }, + { + "value": "Table Lamp" + }, + { + "value": "0" + }, + { + "format": "$#,##0.00", + "value": "22.5" + }, + { + "format": "$#,##0.00", + "value": "25" + }, + { + "format": "$#,##0.00", + "formula": "=E8-D8" + }, + { + "format": "mm-dd-yyyy", + "value": "43780" + }, + { + "value": "5" + } + ] + }, + { + "cells": [ + { + "value": "AT992X" + }, + { + "value": "Document Scanner" + }, + { + "value": "116" + }, + { + "format": "$#,##0.00", + "value": "175" + }, + { + "format": "$#,##0.00", + "value": "177" + }, + { + "format": "$#,##0.00", + "formula": "=E9-D9" + }, + { + "format": "mm-dd-yyyy", + "value": "43568" + }, + { + "value": "4.75" + } + ] + }, + { + "cells": [ + { + "value": "AP992Z" + }, + { + "value": "Gaming Headset" + }, + { + "value": "58" + }, + { + "format": "$#,##0.00", + "value": "32" + }, + { + "format": "$#,##0.00", + "value": "35" + }, + { + "format": "$#,##0.00", + "formula": "=E10-D10" + }, + { + "format": "mm-dd-yyyy", + "value": "43875" + }, + { + "value": "4.4" + } + ] + } + ], + "selectedRange": "A1:H1" + } + ] + } +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/index.html new file mode 100644 index 0000000000..28da990416 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/index.html @@ -0,0 +1,53 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/systemjs.config.js new file mode 100644 index 0000000000..9290509c4a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-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/32.1.19/" + }, + 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'); + + + From fbc833345c678c2deaf99e359da5e8543f004c43 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Fri, 6 Mar 2026 10:03:11 +0530 Subject: [PATCH 02/12] 1014442: Updated contents for open/save in json --- .../Excel/Spreadsheet/React/open-excel-files.md | 2 +- .../Excel/Spreadsheet/React/rows-and-columns.md | 2 +- .../Excel/Spreadsheet/React/save-excel-files.md | 7 ++----- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index 1dc0a1d342..54bba6fcb7 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md @@ -168,7 +168,7 @@ openFromJson is used because it provides a smooth and reliable way to load Excel 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: +Please find the code to fetch the JSON data and load it into the Spreadsheet component below. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md index 533f0f87db..a143c9b33e 100644 --- a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md +++ b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md @@ -155,7 +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. +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. diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index 061d90879d..c3ace1e5b8 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md @@ -134,9 +134,7 @@ 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. +### 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. @@ -144,8 +142,7 @@ saveAsJson is used to capture the full state of the Spreadsheet in a simple, str 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: +Please find below the code to retrieve JSON data from the Spreadsheet control below. {% tabs %} {% highlight js tabtitle="app.jsx" %} From 7fcbd1331c07da388bf999eeb9de531516deb0c5 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Fri, 6 Mar 2026 11:49:25 +0530 Subject: [PATCH 03/12] 1014442: Updated contents for open/save in json --- .../react/save-as-json-cs1/app/app.jsx | 35 +- .../react/save-as-json-cs1/app/app.tsx | 34 +- .../react/save-as-json-cs1/app/datasource.jsx | 475 ------------------ .../react/save-as-json-cs1/app/datasource.tsx | 475 ------------------ 4 files changed, 33 insertions(+), 986 deletions(-) delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.jsx delete mode 100644 Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.tsx diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx index 53a8ed5df6..fa63f3b8c4 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx @@ -1,29 +1,19 @@ import * as React from 'react'; +import { createRoot } from 'react-dom/client'; import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; function App() { const spreadsheetRef = React.useRef(null); + const [savedJson, setSavedJson] = React.useState(null); + const handleSaveAsJson = React.useCallback(async () => { if (!spreadsheetRef.current) return; - try { - 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 blob = new Blob([content], { type: 'application/json' }); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = 'spreadsheet.json'; - document.body.appendChild(a); - a.click(); - a.remove(); - URL.revokeObjectURL(url); - } catch (e) { - console.error('Failed to save as JSON', e); - alert('Failed to save as JSON.'); - } + 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); + setSavedJson(content); }, []); return ( @@ -38,6 +28,15 @@ function App() {
+ + {savedJson && ( +
+ Saved JSON + 
+              {savedJson}
+
+
+ )} ); diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx index 331afcb73d..ac5449cc77 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx @@ -6,26 +6,15 @@ import type { SerializationOptions } from '@syncfusion/ej2-react-spreadsheet'; function App(): React.ReactElement { const spreadsheetRef = React.useRef(null); + const [savedJson, setSavedJson] = React.useState(null); + const handleSaveAsJson = React.useCallback(async () => { if (!spreadsheetRef.current) return; - try { - 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 blob: Blob = new Blob([content], { type: 'application/json' }); - const url: string = URL.createObjectURL(blob); - const a: HTMLAnchorElement = document.createElement('a'); - a.href = url; - a.download = 'spreadsheet.json'; - document.body.appendChild(a); - a.click(); - a.remove(); - URL.revokeObjectURL(url); - } catch (e: unknown) { - console.error('Failed to save as JSON', e); - alert('Failed to save as JSON.'); - } + 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); + setSavedJson(content); }, []); return ( @@ -40,6 +29,15 @@ function App(): React.ReactElement {
+ + {savedJson && ( +
+ Saved JSON + 
+              {savedJson}
+
+
+ )} ); diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.jsx deleted file mode 100644 index 59ce2f3834..0000000000 --- a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.jsx +++ /dev/null @@ -1,475 +0,0 @@ -/** - * json structure - */ -export let jsonData = { - "Workbook": { - "definedNames": [], - "sheets": [ - { - "columns": [ - { - "width": 100 - }, - { - "width": 158 - }, - { - "width": 72 - }, - { - "width": 113 - }, - { - "width": 113 - }, - { - "width": 77 - }, - { - "width": 97 - }, - { - "width": 73 - } - ], - "conditionalFormats": [ - { - "type": "GYRColorScale", - "range": "C3:C10" - }, - { - "type": "LessThan", - "cFColor": "RedF", - "range": "G3:G10", - "value": "43707," - }, - { - "type": "BlueDataBar", - "range": "D3:D10" - }, - { - "type": "GreenDataBar", - "range": "E3:E10" - }, - { - "type": "Top10Items", - "format": { - "style": { - "backgroundColor": "#009999", - "fontWeight": "Bold" - } - }, - "range": "F3:F10", - "value": "1," - }, - { - "type": "Bottom10Items", - "format": { - "style": { - "backgroundColor": "#C68D53", - "fontWeight": "Bold" - } - }, - "range": "F3:F10", - "value": "1," - }, - { - "type": "ThreeStars", - "range": "H3:H10" - } - ], - "name": "Inventory List", - "rows": [ - { - "cells": [ - { - "colSpan": 8, - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - }, - "value": "Inventory List" - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - } - ], - "height": 30 - }, - { - "cells": [ - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Item Code" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Item Name" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Quantity" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Purchase Price" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Selling Price" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Profit" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Last Updated" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Rating" - } - ] - }, - { - "cells": [ - { - "value": "AG940Z" - }, - { - "value": "Laser Printer" - }, - { - "value": "144" - }, - { - "format": "$#,##0.00", - "value": "169.5" - }, - { - "format": "$#,##0.00", - "value": "172" - }, - { - "format": "$#,##0.00", - "formula": "=E3-D3" - }, - { - "format": "mm-dd-yyyy", - "value": "43610" - }, - { - "value": "4.5" - } - ] - }, - { - "cells": [ - { - "value": "BJ120K" - }, - { - "value": "Scientific Calculator" - }, - { - "value": "116" - }, - { - "format": "$#,##0.00", - "value": "21.8" - }, - { - "format": "$#,##0.00", - "value": "23" - }, - { - "format": "$#,##0.00", - "formula": "=E4-D4" - }, - { - "format": "mm-dd-yyyy", - "value": "43674" - }, - { - "value": "4" - } - ] - }, - { - "cells": [ - { - "value": "BC120M" - }, - { - "value": "Wired Keyboard" - }, - { - "value": "438" - }, - { - "format": "$#,##0.00", - "value": "26.8" - }, - { - "format": "$#,##0.00", - "value": "29" - }, - { - "format": "$#,##0.00", - "formula": "=E5-D5" - }, - { - "format": "mm-dd-yyyy", - "value": "43920" - }, - { - "value": "4.25" - } - ] - }, - { - "cells": [ - { - "value": "BS121L" - }, - { - "value": "Memory Card" - }, - { - "value": "486" - }, - { - "format": "$#,##0.00", - "value": "23.5" - }, - { - "format": "$#,##0.00", - "value": "25" - }, - { - "format": "$#,##0.00", - "formula": "=E6-D6" - }, - { - "format": "mm-dd-yyyy", - "value": "43697" - }, - { - "value": "3.5" - } - ] - }, - { - "cells": [ - { - "value": "BU121K" - }, - { - "value": "Coffee Maker" - }, - { - "value": "176" - }, - { - "format": "$#,##0.00", - "value": "56.5" - }, - { - "format": "$#,##0.00", - "value": "59" - }, - { - "format": "$#,##0.00", - "formula": "=E7-D7" - }, - { - "format": "mm-dd-yyyy", - "value": "43863" - }, - { - "value": "4.5" - } - ] - }, - { - "cells": [ - { - "value": "BD121M" - }, - { - "value": "Table Lamp" - }, - { - "value": "0" - }, - { - "format": "$#,##0.00", - "value": "22.5" - }, - { - "format": "$#,##0.00", - "value": "25" - }, - { - "format": "$#,##0.00", - "formula": "=E8-D8" - }, - { - "format": "mm-dd-yyyy", - "value": "43780" - }, - { - "value": "5" - } - ] - }, - { - "cells": [ - { - "value": "AT992X" - }, - { - "value": "Document Scanner" - }, - { - "value": "116" - }, - { - "format": "$#,##0.00", - "value": "175" - }, - { - "format": "$#,##0.00", - "value": "177" - }, - { - "format": "$#,##0.00", - "formula": "=E9-D9" - }, - { - "format": "mm-dd-yyyy", - "value": "43568" - }, - { - "value": "4.75" - } - ] - }, - { - "cells": [ - { - "value": "AP992Z" - }, - { - "value": "Gaming Headset" - }, - { - "value": "58" - }, - { - "format": "$#,##0.00", - "value": "32" - }, - { - "format": "$#,##0.00", - "value": "35" - }, - { - "format": "$#,##0.00", - "formula": "=E10-D10" - }, - { - "format": "mm-dd-yyyy", - "value": "43875" - }, - { - "value": "4.4" - } - ] - } - ], - "selectedRange": "A1:H1" - } - ] - } -}; \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.tsx deleted file mode 100644 index eb843a1d19..0000000000 --- a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/datasource.tsx +++ /dev/null @@ -1,475 +0,0 @@ -/** - * json structure - */ -export let jsonData: Object = { - "Workbook": { - "definedNames": [], - "sheets": [ - { - "columns": [ - { - "width": 100 - }, - { - "width": 158 - }, - { - "width": 72 - }, - { - "width": 113 - }, - { - "width": 113 - }, - { - "width": 77 - }, - { - "width": 97 - }, - { - "width": 73 - } - ], - "conditionalFormats": [ - { - "type": "GYRColorScale", - "range": "C3:C10" - }, - { - "type": "LessThan", - "cFColor": "RedF", - "range": "G3:G10", - "value": "43707," - }, - { - "type": "BlueDataBar", - "range": "D3:D10" - }, - { - "type": "GreenDataBar", - "range": "E3:E10" - }, - { - "type": "Top10Items", - "format": { - "style": { - "backgroundColor": "#009999", - "fontWeight": "Bold" - } - }, - "range": "F3:F10", - "value": "1," - }, - { - "type": "Bottom10Items", - "format": { - "style": { - "backgroundColor": "#C68D53", - "fontWeight": "Bold" - } - }, - "range": "F3:F10", - "value": "1," - }, - { - "type": "ThreeStars", - "range": "H3:H10" - } - ], - "name": "Inventory List", - "rows": [ - { - "cells": [ - { - "colSpan": 8, - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - }, - "value": "Inventory List" - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - }, - { - "style": { - "fontSize": "13pt", - "fontWeight": "Bold", - "textAlign": "Center", - "verticalAlign": "Middle" - } - } - ], - "height": 30 - }, - { - "cells": [ - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Item Code" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Item Name" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Quantity" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Purchase Price" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Selling Price" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Profit" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Last Updated" - }, - { - "style": { - "fontWeight": "Bold", - "textAlign": "Center" - }, - "value": "Rating" - } - ] - }, - { - "cells": [ - { - "value": "AG940Z" - }, - { - "value": "Laser Printer" - }, - { - "value": "144" - }, - { - "format": "$#,##0.00", - "value": "169.5" - }, - { - "format": "$#,##0.00", - "value": "172" - }, - { - "format": "$#,##0.00", - "formula": "=E3-D3" - }, - { - "format": "mm-dd-yyyy", - "value": "43610" - }, - { - "value": "4.5" - } - ] - }, - { - "cells": [ - { - "value": "BJ120K" - }, - { - "value": "Scientific Calculator" - }, - { - "value": "116" - }, - { - "format": "$#,##0.00", - "value": "21.8" - }, - { - "format": "$#,##0.00", - "value": "23" - }, - { - "format": "$#,##0.00", - "formula": "=E4-D4" - }, - { - "format": "mm-dd-yyyy", - "value": "43674" - }, - { - "value": "4" - } - ] - }, - { - "cells": [ - { - "value": "BC120M" - }, - { - "value": "Wired Keyboard" - }, - { - "value": "438" - }, - { - "format": "$#,##0.00", - "value": "26.8" - }, - { - "format": "$#,##0.00", - "value": "29" - }, - { - "format": "$#,##0.00", - "formula": "=E5-D5" - }, - { - "format": "mm-dd-yyyy", - "value": "43920" - }, - { - "value": "4.25" - } - ] - }, - { - "cells": [ - { - "value": "BS121L" - }, - { - "value": "Memory Card" - }, - { - "value": "486" - }, - { - "format": "$#,##0.00", - "value": "23.5" - }, - { - "format": "$#,##0.00", - "value": "25" - }, - { - "format": "$#,##0.00", - "formula": "=E6-D6" - }, - { - "format": "mm-dd-yyyy", - "value": "43697" - }, - { - "value": "3.5" - } - ] - }, - { - "cells": [ - { - "value": "BU121K" - }, - { - "value": "Coffee Maker" - }, - { - "value": "176" - }, - { - "format": "$#,##0.00", - "value": "56.5" - }, - { - "format": "$#,##0.00", - "value": "59" - }, - { - "format": "$#,##0.00", - "formula": "=E7-D7" - }, - { - "format": "mm-dd-yyyy", - "value": "43863" - }, - { - "value": "4.5" - } - ] - }, - { - "cells": [ - { - "value": "BD121M" - }, - { - "value": "Table Lamp" - }, - { - "value": "0" - }, - { - "format": "$#,##0.00", - "value": "22.5" - }, - { - "format": "$#,##0.00", - "value": "25" - }, - { - "format": "$#,##0.00", - "formula": "=E8-D8" - }, - { - "format": "mm-dd-yyyy", - "value": "43780" - }, - { - "value": "5" - } - ] - }, - { - "cells": [ - { - "value": "AT992X" - }, - { - "value": "Document Scanner" - }, - { - "value": "116" - }, - { - "format": "$#,##0.00", - "value": "175" - }, - { - "format": "$#,##0.00", - "value": "177" - }, - { - "format": "$#,##0.00", - "formula": "=E9-D9" - }, - { - "format": "mm-dd-yyyy", - "value": "43568" - }, - { - "value": "4.75" - } - ] - }, - { - "cells": [ - { - "value": "AP992Z" - }, - { - "value": "Gaming Headset" - }, - { - "value": "58" - }, - { - "format": "$#,##0.00", - "value": "32" - }, - { - "format": "$#,##0.00", - "value": "35" - }, - { - "format": "$#,##0.00", - "formula": "=E10-D10" - }, - { - "format": "mm-dd-yyyy", - "value": "43875" - }, - { - "value": "4.4" - } - ] - } - ], - "selectedRange": "A1:H1" - } - ] - } -} \ No newline at end of file From 9898de0e16776c53f3a46df00190905cf7fef5b0 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Fri, 6 Mar 2026 11:51:48 +0530 Subject: [PATCH 04/12] 1014442: Updated contents for open/save in json --- .../spreadsheet/react/open-from-json-cs1/app/app.jsx | 5 ----- .../spreadsheet/react/open-from-json-cs1/app/app.tsx | 5 ----- 2 files changed, 10 deletions(-) diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx index 167bdc77ae..c6c574efb8 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx @@ -8,12 +8,7 @@ function App() { 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 ( diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx index 2d9bbcf7f1..e03cc77f7d 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx @@ -8,12 +8,7 @@ function App(): React.ReactElement { 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 ( From 6580d7d6c3896a30e3ea756ce4126c2275564b6d Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Fri, 6 Mar 2026 18:45:41 +0530 Subject: [PATCH 05/12] 1014442: added paste values without formatting content in how to session --- .../how-to/paste-values-without-formatting.md | 31 +++ .../Spreadsheet/React/open-excel-files.md | 6 +- .../Spreadsheet/React/rows-and-columns.md | 12 +- .../Spreadsheet/React/save-excel-files.md | 6 +- .../react/paste-values-cs1/app/app.jsx | 42 ++++ .../react/paste-values-cs1/app/app.tsx | 42 ++++ .../react/paste-values-cs1/app/datasource.jsx | 237 ++++++++++++++++++ .../react/paste-values-cs1/app/datasource.tsx | 237 ++++++++++++++++++ .../react/paste-values-cs1/index.html | 36 +++ .../react/paste-values-cs1/systemjs.config.js | 58 +++++ 10 files changed, 691 insertions(+), 16 deletions(-) create mode 100644 Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md create mode 100644 Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.jsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.tsx create mode 100644 Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/index.html create mode 100644 Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/systemjs.config.js diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md new file mode 100644 index 0000000000..d4c23c0736 --- /dev/null +++ b/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" %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index 54bba6fcb7..892b92d9ae 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/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. diff --git a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md index a143c9b33e..f008ba09fa 100644 --- a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md +++ b/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: diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index c3ace1e5b8..178f6479d6 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/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. diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx new file mode 100644 index 0000000000..d15cadcaf6 --- /dev/null +++ b/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(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 ( + + + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx new file mode 100644 index 0000000000..7ba04d3ffb --- /dev/null +++ b/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(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 ( + + + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.jsx b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.jsx new file mode 100644 index 0000000000..184714d7bb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.jsx @@ -0,0 +1,237 @@ +// Minimal sample data. You can replace later with your own. +export function getDefaultData() { + return [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } + ]; +} diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.tsx b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.tsx new file mode 100644 index 0000000000..c06d063a0e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.tsx @@ -0,0 +1,237 @@ +// Minimal sample data. You can replace later with your own. +export function getDefaultData(): Array> { + return [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } + ]; +} diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/index.html new file mode 100644 index 0000000000..8b6e016434 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/systemjs.config.js new file mode 100644 index 0000000000..9290509c4a --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-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/32.1.19/" + }, + 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'); + + + From 7a4c03d15b8018752965dfce327bf138b88edcf3 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Mon, 9 Mar 2026 16:18:34 +0530 Subject: [PATCH 06/12] 1014442: modified content in open/save json for how to session --- .../React/how-to/paste-values-without-formatting.md | 2 +- .../Excel/Spreadsheet/React/open-excel-files.md | 10 ++++++---- .../Excel/Spreadsheet/React/rows-and-columns.md | 8 ++++---- .../Excel/Spreadsheet/React/save-excel-files.md | 13 ++++++++----- 4 files changed, 19 insertions(+), 14 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md index d4c23c0736..d59ba2323b 100644 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md @@ -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. -This sample demonstrates how actionBegin makes the Spreadsheet paste values without formatting. +The following example shows how `actionBegin` makes the Spreadsheet paste values without formatting. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index 892b92d9ae..1ab963a5fb 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md @@ -160,13 +160,15 @@ 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 +### Load Workbook as JSON -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. +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. -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. +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. -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. +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. diff --git a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md index f008ba09fa..5ae5aa5ce7 100644 --- a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md +++ b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md @@ -155,8 +155,6 @@ 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. -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: * Single row range: `['2:2']` @@ -164,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` 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. + The following code example shows how to change the height for single/multiple rows in the spreadsheet. {% tabs %} @@ -187,8 +187,6 @@ 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. -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: * Single column range: `['F:F']` @@ -196,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` 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. + The following code example shows how to change the width for single/multiple columns in the spreadsheet. {% tabs %} diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index 178f6479d6..cec99ae0be 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md @@ -134,15 +134,18 @@ 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 Excel files as JSON +### Save Workbook 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 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. +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. -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. +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. -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. +Reference: Guide to Creating the JSON Structure: +https://help.syncfusion.com/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure -Please find below the code to retrieve JSON data from the Spreadsheet control below. +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. {% tabs %} {% highlight js tabtitle="app.jsx" %} From a521c08c13bd676a1910b2eb0af3efdb5f968300 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Mon, 9 Mar 2026 16:46:45 +0530 Subject: [PATCH 07/12] 1014442: modified content in open/save json for how to session --- Document-Processing-toc.html | 1 + .../Spreadsheet/React/rows-and-columns.md | 18 +++++++++--------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 584381bb48..342795ce9b 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5384,6 +5384,7 @@
  • Add dynamic cell templates
  • Add an icon to the cell
  • Get the filtered row data
    • +
  • paste values without formatting and styles
  • Mobile Responsiveness
    • diff --git a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md index 5ae5aa5ce7..cf178aab44 100644 --- a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md +++ b/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: @@ -185,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: @@ -217,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. From 9a5cca61912bbbcc5b57ea84eb6bd6f478ed3159 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Mon, 9 Mar 2026 18:50:06 +0530 Subject: [PATCH 08/12] 1014442: modified content in open/save json for how to session --- .../React/how-to/paste-values-without-formatting.md | 4 ++-- .../Excel/Spreadsheet/React/open-excel-files.md | 8 +++----- .../Excel/Spreadsheet/React/rows-and-columns.md | 4 ++-- .../Excel/Spreadsheet/React/save-excel-files.md | 11 +++-------- .../spreadsheet/react/open-from-json-cs1/app/app.jsx | 2 +- .../spreadsheet/react/open-from-json-cs1/app/app.tsx | 2 +- .../spreadsheet/react/paste-values-cs1/app/app.jsx | 7 ++----- .../spreadsheet/react/paste-values-cs1/app/app.tsx | 7 ++----- .../spreadsheet/react/save-as-json-cs1/app/app.jsx | 6 ++---- .../spreadsheet/react/save-as-json-cs1/app/app.tsx | 7 ++----- 10 files changed, 20 insertions(+), 38 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md index d59ba2323b..abfc9889f3 100644 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md +++ b/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" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index 1ab963a5fb..98da465e5f 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/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" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md index cf178aab44..298a75b3e8 100644 --- a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md +++ b/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. diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index cec99ae0be..133ae5d6ae 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/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" %} diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx index c6c574efb8..7cb12bb8f0 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx @@ -16,7 +16,7 @@ function App() {
    diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx index e03cc77f7d..163641a75f 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx @@ -16,7 +16,7 @@ function App(): React.ReactElement {
    diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx index d15cadcaf6..e3b77918da 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx +++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx @@ -7,12 +7,9 @@ function App() { const spreadsheetRef = React.useRef(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'; } }; diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx index 7ba04d3ffb..1336861ae0 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx +++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx @@ -7,12 +7,9 @@ function App(): React.ReactElement { const spreadsheetRef = React.useRef(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'; } }; diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx index fa63f3b8c4..b86cad1997 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx +++ b/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); }, []); diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx index ac5449cc77..570b538958 100644 --- a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx +++ b/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(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); }, []); From ac6be5b27fa9a7cbb6da17d955107af8f2887422 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Tue, 10 Mar 2026 10:31:55 +0530 Subject: [PATCH 09/12] 1014442: modified content and samples in open/save json for how to session --- Document-Processing/Excel/Spreadsheet/React/open-excel-files.md | 2 +- Document-Processing/Excel/Spreadsheet/React/save-excel-files.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index 98da465e5f..410b7233fb 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md @@ -164,7 +164,7 @@ Please find the code to fetch the blob data and load it into the Spreadsheet com 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 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. +You can also pass optional deserialization options to the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to ignore certain features when loading the JSON (for example, styles, formulas, number formats, images, or conditional formats). These deserialization options are optional; if omitted, the method restores the workbook's full 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. diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index 133ae5d6ae..a442e1b119 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md @@ -138,7 +138,7 @@ Please find below the code to retrieve blob data from the Spreadsheet control be 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 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. +You can optionally pass serialization options to the [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to 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 omitted, the method restores the workbook's full details by default. The following code example shows how to save workbook as JSON data from the Spreadsheet component. From f91ecd965cd199ea556edae955b00a2044787548 Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Wed, 11 Mar 2026 10:23:36 +0530 Subject: [PATCH 10/12] 1014442: modified content and samples for how to session --- .../Spreadsheet/React/how-to/paste-values-without-formatting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md index abfc9889f3..f0dc276e41 100644 --- a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md @@ -9,7 +9,7 @@ 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. +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. From d25310b7fd9433c09e14be2c74957c600b41363b Mon Sep 17 00:00:00 2001 From: NithishkumarRavikumar Date: Wed, 11 Mar 2026 19:38:26 +0530 Subject: [PATCH 11/12] 1014442: modified content and samples in open/save json for how to session --- Document-Processing-toc.html | 2 +- ...ormatting.md => paste-only-values-without-formatting.md} | 0 .../Excel/Spreadsheet/React/open-excel-files.md | 6 +++--- .../Excel/Spreadsheet/React/save-excel-files.md | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) rename Document-Processing/Excel/Spreadsheet/React/how-to/{paste-values-without-formatting.md => paste-only-values-without-formatting.md} (100%) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 88240f0149..5976a334da 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5444,7 +5444,7 @@
  • Add dynamic cell templates
  • Add an icon to the cell
  • Get the filtered row data
    • -
  • paste values without formatting and styles
    • +
  • paste only values without formatting and styles
  • Mobile Responsiveness
    • diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-only-values-without-formatting.md similarity index 100% rename from Document-Processing/Excel/Spreadsheet/React/how-to/paste-values-without-formatting.md rename to Document-Processing/Excel/Spreadsheet/React/how-to/paste-only-values-without-formatting.md diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index 410b7233fb..e227a27c8c 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md @@ -162,13 +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 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 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 also pass optional deserialization options to the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to ignore certain features when loading the JSON (for example, styles, formulas, number formats, images, or conditional formats). These deserialization options are optional; if omitted, the method restores the workbook's full details by default. +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 code example shows how to load workbook as JSON into the Spreadsheet component. +The following example demonstrates how to load a workbook JSON into the Spreadsheet component. {% tabs %} {% highlight js tabtitle="app.jsx" %} diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index a442e1b119..f76c922337 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/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 Workbook as JSON -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. +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 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 omitted, the method restores the workbook's full details by default. +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 code example shows how to save workbook as JSON data from the Spreadsheet component. +The following example demonstrates how to save a workbook as JSON from the Spreadsheet component. {% tabs %} {% highlight js tabtitle="app.jsx" %} From 8df96df55355bef060751b28b1cbc808cccf2e4f Mon Sep 17 00:00:00 2001 From: Babu <119495690+babu-periyasamy@users.noreply.github.com> Date: Wed, 11 Mar 2026 19:50:08 +0530 Subject: [PATCH 12/12] 1014442: Correct capitalization in TOC link text --- Document-Processing-toc.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index d862504b0e..d4c6158b06 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5454,7 +5454,7 @@
  • Add dynamic cell templates
  • Add an icon to the cell
  • Get the filtered row data
    • -
  • paste only values without formatting and styles
    • +
  • Paste only values without formatting and styles
  • Mobile Responsiveness