1003858: Created separate page for open-save deployment ug

Document-Processing-toc.html

@@ -5151,11 +5151,13 @@
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/getting-started">Getting Started</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/data-binding">Data Binding</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open-save">Open and Save</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open-save-deployment">Open and Save Deployment</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/docker-deployment">Docker Deployment</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/worksheet">Worksheet</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/cell-range">Cell Range</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/editing">Editing</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/formulas">Formulas</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/data-validation">Data Validation</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/formatting">Formatting</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/freeze-pane">Freeze Panes</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/context-menu">Context Menu</a></li>

Document-Processing/Excel/Spreadsheet/Javascript-ES6/cell-range.md

@@ -81,96 +81,6 @@ The following features have some limitations in Merge:
 * Merge with filter.
 * Merge with wrap text.
 
-## Data Validation
-
-Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/documentation/api/spreadsheet/#allowdatavalidation) property to enable or disable data validation.
-
-> * The default value for `allowDataValidation` property is `true`.
-
-### Apply Validation
-
-You can apply data validation to restrict the type of data or the values that users enter into a cell.
-
-You can apply data validation by using one of the following ways,
-
-* Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item.
-* Use the [`addDataValidation()`](https://ej2.syncfusion.com/documentation/api/spreadsheet/#adddatavalidation) method programmatically.
-
-### Clear Validation
-
-Clear validation feature is used to remove data validations from the specified ranges or the whole worksheet.
-
-You can clear data validation rule by one of the following ways,
-
-* Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item.
-* Use the [`removeDataValidation()`](https://ej2.syncfusion.com/documentation/api/spreadsheet/#removedatavalidation) method programmatically.
-
-### Highlight Invalid Data
-
-Highlight invalid data feature is used to highlight the previously entered invalid values.
-
-You can highlight an invalid data by using one of the following ways,
-
-* Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item.
-* Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/documentation/api/spreadsheet/#addinvalidhighlight) method programmatically.
-
-### Clear Highlighted Invalid Data
-
-Clear highlight feature is used to remove the highlight from invalid cells.
-
-You can clear the highlighted invalid data by using the following ways,
-
-* Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item.
-* Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/documentation/api/spreadsheet/#removeinvalidhighlight) method programmatically.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/javascript-es6/data-validation-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/javascript-es6/data-validation-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/data-validation-cs1" %}
-
-### Custom Data validation
-
-The Spreadsheet supports custom data validation, allowing users to define their own validation rules for specific cells or ranges. This feature enables you to set conditions that the entered data must meet, making it particularly useful when predefined validation options, such as numbers, dates, or lists, are insufficient.
-
-With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet.
-
-For example, consider a scenario where you want to ensure that a cell contains a number between 10 and 100. To achieve this, define a validation rule using a formula that checks if the entered value is greater than 10 and less than 100. The formula for this validation is =AND(A1>10, A1<100), where A1 refers to the cell being validated.
-
-When this rule is applied, the Spreadsheet evaluates the entered value against the formula. If a user enters a value outside the specified range, an alert notifies them of the invalid input. This helps users correct errors efficiently and ensures that only desired values are accepted.
-
-You can apply custom data validation using two methods.
-
-* The first is through the Data Validation dialog in the Ribbon toolbar. Navigate to the Data tab, select the Data Validation option, and choose the Custom type from the Allow dropdown menu.
-* The second method is programmatically, using the [`addDataValidation()`](https://ej2.syncfusion.com/documentation/api/spreadsheet/#adddatavalidation) method, which allows developers to set custom rules dynamically via code.
-
-The following code example demonstrates how to add custom data validation with a formula in a Spreadsheet.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/javascript-es6/data-validation-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/javascript-es6/data-validation-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/data-validation-cs3" %}
-
-### Limitations of Data validation
-
-The following features have some limitations in Data Validation:
-
-* Entire row data validation.
-* Insert row between the data validation.
-* Copy/paste with data validation.
-* Delete cells between data validation applied range.
-
 ## Auto Fill
 
 Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use `allowAutoFill` property to enable/disable the auto fill support. You can also use `showFillOptions` property to enable/disable the fill option and `fillType` property to change the default auto fill option which is available in `autoFillSettings`.

Document-Processing/Excel/Spreadsheet/Javascript-ES6/open-save-deployment.md

@@ -0,0 +1,199 @@
+---
+layout: post
+title: Deployment Options for Open and Save in EJ2 TypeScript Spreadsheet | Syncfusion
+description: Learn how to deploy Open and Save functionality in Syncfusion EJ2 TypeScript Spreadsheet using AWS Lambda.
+platform: document-processing
+control: Open Save Deployment
+documentation: ug
+---
+
+# Open-Save Deployment in EJ2 TypeScript Spreadsheet Control
+
+When using Open and Save functionality in the Spreadsheet control, certain scenarios require server-side processing for better scalability and security. Instead of handling file operations directly on the client, you can deploy hosted services that process Excel files and return the converted data to the client.
+
+To achieve this, Syncfusion provides options to host Open and Save services on different platforms. These services receive the Spreadsheet model as JSON, process it, and return the required Excel file formats.
+
+## Open
+
+When using deployed Open services, the Spreadsheet control can open Excel files through a hosted backend instead of processing them entirely on the client.
+
+### Open an excel file using a hosted web service in AWS Lambda
+
+Before proceeding with the opening process, you should deploy the spreadsheet open/save web API service in AWS Lambda. To host the open/save web service in the AWS Lambda environment, please refer to the following KB documentation.
+
+[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 opening the Excel file with this hosted open URL, you need to prevent the default file opening process to avoid getting a corrupted file on the open service end. The spreadsheet component appends the file to the `formData` and sends it to the open service, which causes the file to get corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeOpen`](https://ej2.syncfusion.com/documentation/api/spreadsheet/#beforeopen) event. After that, you will get the selected file in the `beforeOpen` event argument. Then, convert this file into a base64 string and send it to the open service URL using a fetch request.
+
+On the open service end, convert the base64 string back to a file and pass it as an argument to the workbook `Open` method. The open service will process the file and return the spreadsheet data in JSON format. You will then receive this JSON data in the fetch success callback. Finally, use the [openFromJson](https://ej2.syncfusion.com/documentation/api/spreadsheet/#openfromjson) method to load this JSON data into the spreadsheet component.
+
+The following code example shows how to open an Excel file using a hosted web service in AWS Lambda, as mentioned above.
+
+```ts
+import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
+
+//Initialize Spreadsheet component
+let spreadsheet: Spreadsheet = new Spreadsheet({
+    sheets: [
+    ],
+    openUrl: 'https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open',
+    beforeOpen: (eventArgs) => {
+        eventArgs.cancel = true; // To prevent the default open action.
+        if (eventArgs.file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(eventArgs.file);
+            reader.onload = () => {
+                // Removing the xlsx file content-type.
+                const base64Data: any = reader.result.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', '');
+                openExcel({
+                    file: base64Data,
+                    extension: eventArgs.file.name.slice(eventArgs.file.name.lastIndexOf('.') + 1),
+                    password: eventArgs.password || ''
+                });
+            };
+        }
+    }
+});
+const openExcel = (requestData) => {
+    // Fetch call to AWS server for open processing.
+    fetch('https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open', {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json, text/plain',
+            'Content-Type': 'application/json;charset=UTF-8'
+        },
+        body: JSON.stringify(requestData)
+    }).then((response) => {
+        if (response.ok) {
+            return response.json();
+        }
+    }).then((data) => {
+        // Loading the JSON data into our spreadsheet.
+        if (data.Workbook && data.Workbook.sheets) {
+            spreadsheet.openFromJson({ file: data });
+        }
+    }).catch((error) => {
+        console.log(error);
+    });
+};
+
+//Render initialized Spreadsheet component
+spreadsheet.appendTo('#spreadsheet');
+
+```
+
+```csharp
+public IActionResult Open(OpenOptions openOptions)
+{
+    // Convert the base64 string to bytes array.
+    byte[] bytes = Convert.FromBase64String(openOptions.File);
+    // Loading the bytes array to stream.
+    MemoryStream stream = new MemoryStream(bytes);
+    OpenRequest open = new OpenRequest();
+    // Converting the stream into FormFile.
+    open.File = new FormFile(stream, 0, bytes.Length, "Sample", "Sample." + openOptions.Extension);
+    if (string.IsNullOrEmpty(openOptions.Password))
+        open.Password = openOptions.Password;
+    var result = Workbook.Open(open);
+    return Content(result);
+}
+
+public class OpenOptions
+{
+    public string File { get; set; } = string.Empty;
+    public string Password { get; set; } = string.Empty;
+    public string Extension { get; set; } = string.Empty;
+}
+```
+
+## Save
+
+When using deployed Save services, the Spreadsheet control can save Excel files through a hosted backend instead of processing and generating the file entirely on the client.
+
+### Save an excel file using a hosted web service in AWS Lambda
+
+Before proceeding with the save process, you should deploy the spreadsheet open/save web API service in AWS Lambda. To host the open/save web service in the AWS Lambda environment, please refer to the following KB documentation.
+
+[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/#beforesave) event. After that, convert the spreadsheet data into JSON format using the [saveAsJson](https://ej2.syncfusion.com/documentation/api/spreadsheet/#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) => {
+        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 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');
+```
+
+```csharp
+public string Save([FromForm]SaveSettings saveSettings)
+{
+    // This will return the Excel in base64 string format.
+    return Workbook.Save<string>(saveSettings);
+}
+```