diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index fcb4c4de4..d4c6158b0 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5454,6 +5454,7 @@
  • Add dynamic cell templates
  • Add an icon to the cell
  • Get the filtered row data
    • +
  • Paste only values without formatting and styles
  • Mobile Responsiveness
    • diff --git a/Document-Processing/Excel/Spreadsheet/React/how-to/paste-only-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-only-values-without-formatting.md new file mode 100644 index 000000000..f0dc276e4 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/how-to/paste-only-values-without-formatting.md @@ -0,0 +1,31 @@ +--- +layout: post +title: Paste Without Formatting in React Spreadsheet component | Syncfusion +description: Learn here about Paste only values without formatting during copy and paste in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Paste Values Without Formatting and styles in React Spreadsheet + +In the Syncfusion React Spreadsheet, you can make the paste action insert only the raw values into the cells, without bringing any formatting or styles from the copied content. This can be done by using the [actionBegin](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#actionbegin) event, where the Spreadsheet provides the details of the action being performed. When the action is a clipboard operation, you can set the paste type to Values, ensuring that only plain values are pasted into the sheet. + +The following example shows how to paste values without formatting. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/react/paste-values-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/paste-values-cs1" %} \ 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 80c32cff3..e227a27c8 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" %} +### Load Workbook as JSON + +The Spreadsheet component allows you to load an entire workbook using a JSON object. This JSON is typically generated by the Spreadsheet server by converting an Excel file into a Spreadsheet‑compatible workbook JSON, but it can also be created manually. When loaded, the component reads the JSON and restores all workbook details, including sheets, cells, styles, formulas, formatting, and other associated metadata. + +You can optionally pass deserialization options to the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to ignore specific features when loading the JSON. For example, you can exclude styles, formulas, number formats, images, or conditional formatting. These options are optional—if you do not specify them, the method restores the full workbook details by default. + +Reference: Guide to Creating the JSON Structure: https://help.syncfusion.com/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure. + +The following example demonstrates how to load a workbook JSON into the Spreadsheet component. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/open-from-json-cs1" %} + ### Load server-side Excel files into Spreadsheet By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to load that `JSON data` into the Spreadsheet component. diff --git a/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/React/rows-and-columns.md index abcda41b9..298a75b3e 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: @@ -162,6 +162,8 @@ You can provide the following type of ranges to the method: * Multiple rows with discontinuous range: `['1:10', '15:25', '30:40']` * Multiple rows with different sheets: `[Sheet1!1:50, 'Sheet2!1:50', 'Sheet3!1:50']` +Additionally, each row model includes a [customHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rowmodel#customheight) property that indicates the row height was explicitly set either by manually adjusting the row header boundary or programmatically. When [customHeight](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/rowmodel#customheight) is true, the height is treated as manually defined and will not change automatically when enabling wrap text, increasing font size, or changing the font family; the height remains fixed until the user or code updates it. + The following code example shows how to change the height for single/multiple rows in the spreadsheet. {% tabs %} @@ -183,7 +185,7 @@ The following code example shows how to change the height for single/multiple ro ### Column -You can change the width of single or multiple columns by using the [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#setcolumnswidth) method. +You can change the width of single or multiple columns by using the [setColumnsWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#setcolumnswidth) method. You can provide the following type of ranges to the method: @@ -192,6 +194,8 @@ You can provide the following type of ranges to the method: * Multiple columns with discontinuous range: `['A:C', 'G:I', 'K:M']` * Multiple columns with different sheets: `[Sheet1!A:H, 'Sheet2!A:H', 'Sheet3!A:H']` +Additionally, each column model includes a [customWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/columnmodel#customwidth) property that indicates the column width was explicitly set either by manually adjusting the column header boundary or programmatically. When [customWidth](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/columnmodel#customwidth) is true, the width is treated as manually defined. + The following code example shows how to change the width for single/multiple columns in the spreadsheet. {% tabs %} @@ -213,7 +217,7 @@ The following code example shows how to change the width for single/multiple col ## Changing text in column headers -Using the [`beforeCellRender`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#beforecellrender) event, you can change the text in the column headers. In that event, you can use the `e-header-cell` class to identify the header cell element and update its text value. +Using the [`beforeCellRender`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#beforecellrender) event, you can change the text in the column headers. In that event, you can use the `e-header-cell` class to identify the header cell element and update its text value. The following code example shows how to change the text in the column headers. diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index 988f2cf95..f76c92233 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md @@ -134,6 +134,25 @@ Please find below the code to retrieve blob data from the Spreadsheet control be {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/save-as-blobdata-cs1" %} +### Save Workbook as JSON + +Our Spreadsheet component allows you to export an entire workbook as a JSON object. This JSON output includes all workbook details such as sheets, cell values, formulas, styles, and formatting. + +You can optionally pass serialization options to the [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to exclude specific features from the exported JSON. For example, you can choose to ignore styles, formulas, number formats, images, or conditional formatting. These options are fully optional—if they are not provided, the method exports the workbook with all details preserved by default. + +The following example demonstrates how to save a workbook as JSON from the Spreadsheet component. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/save-as-json-cs1" %} + ### Save Excel files to a server By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. 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 000000000..7cb12bb8f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { jsonData } from './datasource'; + +function App() { + const spreadsheetRef = React.useRef(null); + + const handleOpenFromJson = React.useCallback(() => { + if (!spreadsheetRef.current) return; + spreadsheetRef.current.openFromJson({ file: jsonData }); + }, []); + + return ( +
    +
    +
    + +
    +
    + +
    +
    +
    + ); +} + +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 000000000..163641a75 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; +import { jsonData } from './datasource'; + +function App(): React.ReactElement { + const spreadsheetRef = React.useRef(null); + + const handleOpenFromJson = React.useCallback((): void => { + if (!spreadsheetRef.current) return; + spreadsheetRef.current.openFromJson({ file: jsonData }); + }, []); + + 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 000000000..59ce2f383 --- /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 000000000..eb843a1d1 --- /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 000000000..28da99041 --- /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 000000000..9290509c4 --- /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/paste-values-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx new file mode 100644 index 000000000..e3b77918d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx @@ -0,0 +1,39 @@ +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) => { + // If the user is pasting, force paste to values only. + if (args.action === "clipboard") { + args.args.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 000000000..1336861ae --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.tsx @@ -0,0 +1,39 @@ +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 => { + // If the user is pasting, force paste to values only. + if (args.action === "clipboard") { + args.args.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 000000000..184714d7b --- /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 000000000..c06d063a0 --- /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 000000000..8b6e01643 --- /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 000000000..9290509c4 --- /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'); + + + 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 000000000..b86cad199 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx @@ -0,0 +1,46 @@ +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; + const result = await spreadsheetRef.current.saveAsJson(); + const content = JSON.stringify(jsonObject, null, 2); + setSavedJson(content); + }, []); + + return ( +
    +
    +
    + +
    + +
    + +
    + + {savedJson && ( +
    + Saved JSON + 
    +              {savedJson}
+
    +
    + )} +
    +
    + ); +} + +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 000000000..570b53895 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } 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; + const result: any = await spreadsheetRef.current.saveAsJson(); + const content: string = JSON.stringify(result, null, 2); + setSavedJson(content); + }, []); + + return ( +
    +
    +
    + +
    + +
    + +
    + + {savedJson && ( +
    + Saved JSON + 
    +              {savedJson}
+
    +
    + )} +
    +
    + ); +} + +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/index.html b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/index.html new file mode 100644 index 000000000..28da99041 --- /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 000000000..9290509c4 --- /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'); + + +