diff --git a/ej2-vue/code-snippet/grid/select/selection-column-existing/app-composition.vue b/ej2-vue/code-snippet/grid/select/selection-column-existing/app-composition.vue index 3ab115f81..feee68e40 100644 --- a/ej2-vue/code-snippet/grid/select/selection-column-existing/app-composition.vue +++ b/ej2-vue/code-snippet/grid/select/selection-column-existing/app-composition.vue @@ -8,7 +8,7 @@
- @@ -29,11 +29,11 @@ import { data } from "./datasource.js"; import { ref } from "vue"; const textbox = ref(null); const grid = ref(null); -const selectionOptions = { type: "Multiple", mode: "Cell" }; +const selectionOptions = { allowColumnSelection: true, mode: "Cell" }; const onClick = function () { - const startIndex = parseInt(textbox.value.value, 10); + const startIndex = parseInt(textbox.value.ej2Instances.value, 10); if (!isNaN(startIndex)) - grid.value.selectColumnWithExisting(startIndex); + grid.value.ej2Instances.selectionModule.selectColumnWithExisting(startIndex); }; + {% endhighlight %} + {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/open-from-blobdata-cs1/app.vue %} + + + + + + + +{% endhighlight %} +{% endtabs %} + +```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; +} +``` + +### Open an excel file from Base64 string data + +In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#open) method in the spreadsheet. + +The following code example shows how to save the spreadsheet data as base64 string. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/base-64-string/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/base-64-string/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/spreadsheet/open-from-blobdata-cs1" %} +{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %} + +### Open excel file into a read-only mode + +You can open excel file into a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#lockcells) methods + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/open-readonly-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/open-readonly-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/open-readonly-cs1" %} + +### Configure JSON deserialization options + +Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet. + +Now, you have the option to selectively ignore some features during the opening of the JSON object by configuring deserialization options and passing them as arguments to the `openFromJson` method. This argument is optional, and if not configured, the entire workbook JSON object will be loaded without ignoring any features. + +```ts +spreadsheet.openFromJson({ file: file }, { ignoreStyle: true }); +``` + +| Options | Description | +| ----- | ----- | +| onlyValues | If **true**, only the cell values will be loaded. | +| ignoreStyle | If **true**, styles will be excluded when loading the JSON data. | +| ignoreFormula | If **true**, formulas will be excluded when loading the JSON data. | +| ignoreFormat | If **true**, number formats will be excluded when loading the JSON data. | +| ignoreConditionalFormat | If **true**, conditional formatting will be excluded when loading the JSON data. | +| ignoreValidation | If **true**, data validation rules will be excluded when loading the JSON data. | +| ignoreFreezePane | If **true**, freeze panes will be excluded when loading the JSON data. | +| ignoreWrap | If **true**, text wrapping settings will be excluded when loading the JSON data. | +| ignoreChart | If **true**, charts will be excluded when loading the JSON data. | +| ignoreImage | If **true**, images will be excluded when loading the JSON data. | +| ignoreNote | If **true**, notes will be excluded when loading the JSON data. | + +The following code snippet demonstrates how to configure the deserialization options and pass them as arguments to the openFromJson method: + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/open-from-json/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/open-from-json/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/open-from-json" %} + +### Add custom header during open + +You can add your own custom header to the open action in the Spreadsheet. For processing the data, it has to be sent from server to client side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`beforeOpen`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforeopen) event, the custom header can be added to the request during open action. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/custom-header-cs1/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/custom-header-cs1/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/custom-header-cs1" %} ### External workbook confirmation dialog @@ -297,66 +502,352 @@ Please find the below table for the beforeSave event arguments. > * The default value of [allowSave](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowsave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowsave) property in previous code snippet. > * Demo purpose only, we have used the online web service url link. -### To send and receive custom params from client to server +### Save an excel file as blob data -Passing the custom parameters from client to server by using [`beforeSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event. +By default, the Spreadsheet component 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/vue/documentation/api/spreadsheet/#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#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 component below. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/open-save-cs2/app-composition.vue %} +{% include code-snippet/spreadsheet/save-as-blobdata-cs1/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/open-save-cs2/app.vue %} +{% include code-snippet/spreadsheet/save-as-blobdata-cs1/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/spreadsheet/open-save-cs2" %} +{% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-blobdata-cs1" %} -Server side code snippets: +### Save an Excel file to a server -```c# +By default, the Spreadsheet component 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/vue/documentation/api/spreadsheet/#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. - public IActionResult Save(SaveSettings saveSettings, string customParams) +**Client Side**: + +```js + + // Convert the spreadsheet workbook to JSON data. + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); + formData.append('FileName', "Sample"); + formData.append('saveType', 'Xlsx'); + // Passing the JSON data to perform the save operation. + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); + formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false })); + // Using fetch to invoke the save process. + fetch('https://localhost:{{Your port number}}/Home/Save', { + method: 'POST', + body: formData + }).then((response) => { + console.log(response); + }); + }); + +``` + +**Server Endpoint**: + +```csharp + + public string Save(SaveSettings saveSettings) + { + ExcelEngine excelEngine = new ExcelEngine(); + IApplication application = excelEngine.Excel; + try { - Console.WriteLine(customParams); // you can get the custom params in controller side - return Workbook.Save(saveSettings); + + // Save the workbook as stream. + Stream fileStream = Workbook.Save(saveSettings); + // Using XLSIO, we are opening the file stream and saving the file in the server under "Files" folder. + // You can also save the stream file in your server location. + IWorkbook workbook = application.Workbooks.Open(fileStream); + string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx"; + var file = System.IO.File.Create(basePath); + fileStream.Seek(0, SeekOrigin.Begin); + // To convert the stream to file options. + fileStream.CopyTo(file); + file.Dispose(); + fileStream.Dispose(); + return string.Empty; } + catch (Exception ex) + { + return ex.Message; + } + } + ``` -### To add custom header during save +You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below. -You can add your own custom header to the save action in the Spreadsheet. For processing the data, it has to be sent from client to server side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`fileMenuItemSelect`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#filemenuitemselect) event, the custom header can be added to the request during save action. +```js +//To save an Excel file to the server. +fetch('https://localhost:{port number}/Home/Save') +``` + +### 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. + +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/vue/documentation/api/spreadsheet/#beforesave) event. After that, convert the spreadsheet data into JSON format using the [saveAsJson](https://ej2.syncfusion.com/vue/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. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/custom-header-cs2/app-composition.vue %} + + + + + + + {% endhighlight %} + {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/custom-header-cs2/app.vue %} + + + + + + + {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/spreadsheet/custom-header-cs2" %} -### To change the PDF orientation +```csharp +public string Save([FromForm]SaveSettings saveSettings) +{ + // This will return the Excel in base64 string format. + return Workbook.Save(saveSettings); +} +``` -By default, the PDF document is created in **Portrait** orientation. You can change the orientation of the PDF document by using the `args.pdfLayoutSettings.orientation` argument settings in the [`beforeSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event. +### Save data as a Base64 string -The possible values are: +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`. -* **Portrait** - Used to display content in a vertical layout. -* **Landscape** - Used to display content in a horizontal layout. +> You can get the Spreadsheet data as blob in the [saveComplete](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#savecomplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event. + +The following code example shows how to save the spreadsheet data as base64 string. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/open-save-cs3/app-composition.vue %} +{% include code-snippet/spreadsheet/base-64-string/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/open-save-cs3/app.vue %} +{% include code-snippet/spreadsheet/base-64-string/app.vue %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/spreadsheet/open-save-cs3" %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %} ### Configure JSON serialization options @@ -395,108 +886,66 @@ The following code snippet demonstrates how to configure the serialization optio {% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-json" %} -### To save data as a Base64 string - -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`. +### Send and receive custom params from client to server -> You can get the Spreadsheet data as blob in the [saveComplete](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#savecomplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event. - -The following code example shows how to save the spreadsheet data as base64 string. +Passing the custom parameters from client to server by using [`beforeSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/base-64-string/app-composition.vue %} +{% include code-snippet/spreadsheet/open-save-cs2/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/base-64-string/app.vue %} +{% include code-snippet/spreadsheet/open-save-cs2/app.vue %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %} - -### To save an Excel file to a server - -By default, the Spreadsheet component 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/vue/documentation/api/spreadsheet/#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**: - -```js - - // Convert the spreadsheet workbook to JSON data. - spreadsheet.saveAsJson().then((json) => { - const formData = new FormData(); - formData.append('FileName', "Sample"); - formData.append('saveType', 'Xlsx'); - // Passing the JSON data to perform the save operation. - formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); - formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false })); - // Using fetch to invoke the save process. - fetch('https://localhost:{{Your port number}}/Home/Save', { - method: 'POST', - body: formData - }).then((response) => { - console.log(response); - }); - }); - -``` +{% previewsample "page.domainurl/code-snippet/spreadsheet/open-save-cs2" %} -**Server Endpoint**: +Server side code snippets: -```csharp +```c# - public string Save(SaveSettings saveSettings) - { - ExcelEngine excelEngine = new ExcelEngine(); - IApplication application = excelEngine.Excel; - try - { - - // Save the workbook as stream. - Stream fileStream = Workbook.Save(saveSettings); - // Using XLSIO, we are opening the file stream and saving the file in the server under "Files" folder. - // You can also save the stream file in your server location. - IWorkbook workbook = application.Workbooks.Open(fileStream); - string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx"; - var file = System.IO.File.Create(basePath); - fileStream.Seek(0, SeekOrigin.Begin); - // To convert the stream to file options. - fileStream.CopyTo(file); - file.Dispose(); - fileStream.Dispose(); - return string.Empty; - } - catch (Exception ex) + public IActionResult Save(SaveSettings saveSettings, string customParams) { - return ex.Message; + Console.WriteLine(customParams); // you can get the custom params in controller side + return Workbook.Save(saveSettings); } - } - ``` -You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below. +### Add custom header during save -```js -//To save an Excel file to the server. -fetch('https://localhost:{port number}/Home/Save') -``` +You can add your own custom header to the save action in the Spreadsheet. For processing the data, it has to be sent from client to server side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`fileMenuItemSelect`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#filemenuitemselect) event, the custom header can be added to the request during save action. -### To save an excel file as blob data +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/custom-header-cs2/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/spreadsheet/custom-header-cs2/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/custom-header-cs2" %} -By default, the Spreadsheet component 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/vue/documentation/api/spreadsheet/#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#savecomplete) event. You can then post the blob data to the server endpoint for saving. +### Change the PDF orientation -Please find below the code to retrieve blob data from the Spreadsheet component below. +By default, the PDF document is created in **Portrait** orientation. You can change the orientation of the PDF document by using the `args.pdfLayoutSettings.orientation` argument settings in the [`beforeSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event. + +The possible values are: + +* **Portrait** - Used to display content in a vertical layout. +* **Landscape** - Used to display content in a horizontal layout. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/save-as-blobdata-cs1/app-composition.vue %} +{% include code-snippet/spreadsheet/open-save-cs3/app-composition.vue %} {% endhighlight %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} -{% include code-snippet/spreadsheet/save-as-blobdata-cs1/app.vue %} +{% include code-snippet/spreadsheet/open-save-cs3/app.vue %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-blobdata-cs1" %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/open-save-cs3" %} ### Supported file formats