Merge pull request #2432 from syncfusion-content/EJ2-1011820-master

documentation(EJ2-1011820): Changed the code snippets to React

Author: sridhar-alagirisamy

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

@@ -39,7 +39,7 @@ The following sample shows the `Open` option by using the [`openUrl`](https://ej
 
 Please find the below table for the [beforeOpen](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforeopen) event arguments.
 
-## BeforeOpenEventArgs – Properties
+**BeforeOpenEventArgs – Properties**
 
 | **Property**          | **Type**                          | **Description** |
 |-------------------|-------------------------------|-------------|

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

@@ -3,7 +3,7 @@ layout: post
 title: Save Excel Files in React Spreadsheet component | Syncfusion
 description: Learn here all about Saving Excel files in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
 platform: document-processing
-control: Open 
+control: Save 
 documentation: ug
 ---
 
@@ -24,20 +24,26 @@ For a quick walkthrough on how the save functionality works, refer to the follow
 
 In user interface, you can save Spreadsheet data as Excel document by clicking `File > Save As` menu item in ribbon.
 
-The following sample shows the `Save` option by using the [`saveUrl`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#saveurl) property in the Spreadsheet control. You can also use the [`beforeSave`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#beforesave) event to customize or cancel the save action which gets triggered before saving the Spreadsheet as an Excel file.
+The following sample shows the `Save` option by using the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) property in the Spreadsheet control. You can also use the [`beforeSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforesave) event to customize or cancel the save action which gets triggered before saving the Spreadsheet as an Excel file.
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/javascript-es6/open-save-cs5/index.ts %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/open-save-cs5/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/open-save-cs5/app/app.tsx %}
 {% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/javascript-es6/open-save-cs5/index.html %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/spreadsheet/react/open-save-cs5/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/spreadsheet/react/open-save-cs5/app/datasource.tsx %}
 {% endhighlight %}
 {% endtabs %}
-        
-{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/open-save-cs5" %}
 
-Please find the below table for the [`beforeSave`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#beforesave)  event arguments.
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/open-save-cs5" %}
+
+Please find the below table for the [`beforeSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforesave) event arguments.
 
 | **Parameter** | **Type** | **Description** |
 | ----- | ----- | ----- |
@@ -51,14 +57,14 @@ Please find the below table for the [`beforeSave`](https://ej2.syncfusion.com/do
 
 > * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file.
 
-> * The default value of [allowSave](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#allowsave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#allowsave) property in previous code snippet.
+> * The default value of [allowSave](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowsave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowsave) property in previous code snippet.
 > * Demo purpose only, we have used the online web service url link.
 
 ## Save Excel files programmatically
 
 To save Excel files programmatically in the Spreadsheet, you can use the [`save`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#save) method of the Spreadsheet component. Before invoking this method, ensure that the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) property is properly configured, as it is required for processing and generating the file on the server.
 
-Please find the below table for the [`save`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#save) method arguments.
+Please find the below table for the [`save`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#save) method arguments.
 
 | **Parameter**             | **Type**                   | **Description**                                                      |
 |-----------------------|------------------------|------------------------------------------------------------------|
@@ -105,7 +111,6 @@ const root = createRoot(document.getElementById('spreadsheet'));
 root.render(<App />);
 ```
 
-
 ## Supported Excel file formats for Save
 
 The following file formats are supported when saving the Spreadsheet component:
@@ -119,20 +124,20 @@ The following file formats are supported when saving the Spreadsheet component:
 
 ### Save Excel files as Blob
 
-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 as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#savecomplete) event. You can then post the blob data to the server endpoint for saving.
+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 as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#savecomplete) event. You can then post the blob data to the server endpoint for saving.
 
 Please find below the code to retrieve blob data from the Spreadsheet control below.
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/javascript-es6/save-as-blobdata-cs1/index.ts %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/save-as-blobdata-cs1/app/app.jsx %}
 {% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/javascript-es6/save-as-blobdata-cs1/index.html %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/save-as-blobdata-cs1/app/app.tsx %}
 {% endhighlight %}
 {% endtabs %}
-        
-{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/save-as-blobdata-cs1" %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/save-as-blobdata-cs1" %}
 
 ### Save Workbook as JSON
 
@@ -155,7 +160,7 @@ The following example demonstrates how to save a workbook as JSON from the Sprea
 
 ### 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.
+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/react/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.
 
 **Client Side**:
 
@@ -219,78 +224,77 @@ Before proceeding with the save process, you should deploy the spreadsheet open/
 
 [How to deploy a spreadsheet open and save web API service to AWS Lambda](https://support.syncfusion.com/kb/article/17184/how-to-deploy-a-spreadsheet-open-and-save-web-api-service-to-aws-lambda)
 
-After deployment, you will get the AWS service URL for the open and save actions. Before saving the Excel file with this hosted save URL, you need to prevent the default save action to avoid getting a corrupted excel file on the client end. The save service returns the file stream as a result to the client, which can cause the file to become corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeSave`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#beforesave) event. After that, convert the spreadsheet data into JSON format using the [saveAsJson](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#saveasjson) method in the `beforeSave` event and send it to the save service endpoint URL using a fetch request.
+After deployment, you will get the AWS service URL for the open and save actions. Before saving the Excel file with this hosted save URL, you need to prevent the default save action to avoid getting a corrupted excel file on the client end. The save service returns the file stream as a result to the client, which can cause the file to become corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforesave) event. After that, convert the spreadsheet data into JSON format using the [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method in the `beforeSave` event and send it to the save service endpoint URL using a fetch request.
 
 On the server side, the save service will take the received JSON data, pass it to the workbook `Save` method, and return the result as a base64 string. The fetch success callback will receive the Excel file in base64 string format on the client side. Finally, you can then convert the base64 string back to a file on the client end to obtain a non-corrupted Excel file.
 
 The following code example shows how to save an Excel file using a hosted web service in AWS Lambda, as mentioned above.
 
-```ts
-import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
-
-let saveInitiated: boolean;
-//Initialize Spreadsheet component
-let spreadsheet: Spreadsheet = new Spreadsheet({
-    sheets: [
-    ],
-    saveUrl:'https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save',
-    beforeSave: (eventArgs) => {
+```js
+function Default() {
+    let spreadsheet;
+    let saveInitiated;
+    const beforeSaveHandler = (eventArgs) => {
         if (!saveInitiated) {
             eventArgs.cancel = true; // Preventing default save action.
             saveInitiated = true; // The "beforeSave" event will trigger for "saveAsJson" action also, so we are preventing for the "saveAsJson".
             saveAsExcel(eventArgs);
         }
-    }
-});
-const saveAsExcel = (eventArgs) => {
-    // Convert the spreadsheet workbook to JSON data.
-    spreadsheet.saveAsJson().then(Json => {
-        saveInitiated = false;
-        const formData = new FormData();
-        // Passing the JSON data to server to perform save operation.
-        formData.append('JSONData', JSON.stringify(Json.jsonObject.Workbook));
-        formData.append('saveType', 'Xlsx');
-        formData.append('fileName', 'Worksheet');
-        formData.append('pdfLayoutSettings', '{"fitSheetOnOnePage":false,"orientation":"Portrait"}');
-        // Using fetch API to invoke the server for save processing.
-        fetch('https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save', {
-            method: 'POST', body: formData
-        }).then(response => {
-            if (response.ok) {
-                return response.blob();
-            }
-        }).then(data => {
-            const reader = new FileReader();
-            reader.onload = function () {
-                //Converts the result of the file reading operation into a base64 string.
-                const textBase64Str = reader.result.toString();
-                //Converts the base64 string into a Excel base64 string.
-                const excelBase64Str = atob(textBase64Str.replace('data:text/plain;base64,', ''));
-                //Converts the Excel base64 string into byte characters.
-                const byteCharacters = atob(excelBase64Str.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', ''));
-                const byteArrays = [];
-                for (let i = 0; i < byteCharacters.length; i++) {
-                    byteArrays.push(byteCharacters.charCodeAt(i));
+    };
+    const saveAsExcel = (eventArgs) => {
+        // Convert the spreadsheet workbook to JSON data.
+        spreadsheet.saveAsJson().then(Json => {
+            saveInitiated = false;
+            const formData = new FormData();
+            // Passing the JSON data to server to perform save operation.
+            formData.append('JSONData', JSON.stringify(Json.jsonObject.Workbook));
+            formData.append('saveType', 'Xlsx');
+            formData.append('fileName', 'Worksheet');
+            formData.append('pdfLayoutSettings', '{"fitSheetOnOnePage":false,"orientation":"Portrait"}');
+            // Using fetch API to invoke the server for save processing.
+            fetch('https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save', {
+                method: 'POST', body: formData
+            }).then(response => {
+                if (response.ok) {
+                    return response.blob();
                 }
-                const byteArray = new Uint8Array(byteArrays);
-                //creates a blob data from the byte array with xlsx content type.
-                const blobData = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-                const blobUrl = URL.createObjectURL(blobData);
-                const anchor = document.createElement('a');
-                anchor.download = 'Sample.xlsx';
-                anchor.href = blobUrl;
-                document.body.appendChild(anchor);
-                anchor.click();
-                URL.revokeObjectURL(blobUrl);
-                document.body.removeChild(anchor);
-            }
-            reader.readAsDataURL(data);
-        });
-    });        
-};
-
-//Render initialized Spreadsheet component
-spreadsheet.appendTo('#spreadsheet');
+            }).then(data => {
+                const reader = new FileReader();
+                reader.onload = function () {
+                    //Converts the result of the file reading operation into a base64 string.
+                    const textBase64Str = reader.result.toString();
+                    //Converts the base64 string into a Excel base64 string.
+                    const excelBase64Str = atob(textBase64Str.replace('data:text/plain;base64,', ''));
+                    //Converts the Excel base64 string into byte characters.
+                    const byteCharacters = atob(excelBase64Str.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', ''));
+                    const byteArrays = [];
+                    for (let i = 0; i < byteCharacters.length; i++) {
+                        byteArrays.push(byteCharacters.charCodeAt(i));
+                    }
+                    const byteArray = new Uint8Array(byteArrays);
+                    //creates a blob data from the byte array with xlsx content type.
+                    const blobData = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+                    const blobUrl = URL.createObjectURL(blobData);
+                    const anchor = document.createElement('a');
+                    anchor.download = 'Sample.xlsx';
+                    anchor.href = blobUrl;
+                    document.body.appendChild(anchor);
+                    anchor.click();
+                    URL.revokeObjectURL(blobUrl);
+                    document.body.removeChild(anchor);
+                }
+                reader.readAsDataURL(data);
+            });
+        });        
+    };
+    return (<div className='control-pane'>
+            <div className='control-section spreadsheet-control'>
+                <SpreadsheetComponent saveUrl='https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save' ref={(ssObj) => { spreadsheet = ssObj; }} beforeSave={beforeSaveHandler}>
+                </SpreadsheetComponent>
+            </div>
+        </div>);
+}
+export default Default;
 ```
 
 ```csharp
@@ -305,20 +309,20 @@ public string Save([FromForm]SaveSettings saveSettings)
 
 In the Spreadsheet component, there is currently no direct option to save data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`. 
 
-> You can get the Spreadsheet data as blob in the [saveComplete](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#savecomplete) event when you set the  `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#beforesave) event.
+> You can get the Spreadsheet data as blob in the [saveComplete](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#savecomplete) event when you set the  `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforesave) event.
 
 The following code example shows how to save the spreadsheet data as base64 string.
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/javascript-es6/base-64-string/index.ts %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/base-64-string/app/app.jsx %}
 {% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/javascript-es6/base-64-string/index.html %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/base-64-string/app/app.tsx %}
 {% endhighlight %}
 {% endtabs %}
-        
-{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/base-64-string" %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/base-64-string" %}
 
 ## Advanced Save options