diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 5c297eb618..c580ba13fe 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5531,7 +5531,9 @@
  • Mobile Responsiveness
  • Features Availability
  • - +
  • + API Reference +
  • @@ -5586,7 +5588,9 @@
  • Mobile Responsiveness
  • Features Availability
  • - +
  • + API Reference +
  • @@ -5643,7 +5647,7 @@
  • Mobile Responsiveness
  • - +
  • API Reference
  • @@ -5678,7 +5682,7 @@
  • Performance Metrics
  • Accessibility
  • Events
  • - +
  • API Reference
  • @@ -5852,7 +5856,7 @@
  • Features Availability
  • Events
  • - +
  • API Reference
  • @@ -5908,7 +5912,7 @@
  • Mobile Responsiveness
  • Features Availability
  • - +
  • API Reference
  • @@ -5963,7 +5967,7 @@
  • Mobile Responsiveness
  • - +
  • API Reference
  • @@ -6019,7 +6023,7 @@
  • Mobile Responsiveness
  • - +
  • API Reference
  • diff --git a/Document-Processing/Excel/Spreadsheet/Vue/editing.md b/Document-Processing/Excel/Spreadsheet/Vue/editing.md index fcd9431722..2a20b1781e 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/editing.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/editing.md @@ -2,41 +2,41 @@ layout: post title: Editing in Vue Spreadsheet component | Syncfusion description: Learn here all about Editing in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Editing +control: Spreadsheet platform: document-processing documentation: ug --- # Editing in Vue Spreadsheet component -You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowediting) property to enable or disable the editing feature. +You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowediting) property to enable or disable the editing feature. ## Edit cell -You can start editing by one of the following ways, +You can start editing by one of the following ways: -* Double click a cell to start the edit mode. +* Double-click a cell to enter edit mode. * Press `F2` key to edit the active cell. * Use formula bar to perform editing. * Use `BACKSPACE` or `SPACE` key to clear the cell content and start the edit mode. -* Using the [`startEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#startedit) method. +* Using the [`startEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#startedit) method. ## Save cell -If the cell is in editable state, you can save the edited cell by one of the following ways, +If a cell is in edit mode, you can save the edited cell by one of the following ways: -* Perform mouse click on any other cell rather than the current editing cell. +* Perform a mouse click on any other cell other than the currently editing cell. * Press `Enter` or `Tab` keys to save the edited cell content. -* Using the [`endEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#endedit) method. +* Using the [`endEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#endedit) method. ## Cancel editing -To cancel the editing without saving the changes, you can use one of the following ways, +To cancel editing without saving the changes, you can use one of the following ways: -* Press `ESCAPE` key, this will remove the editable state and update the unchanged cell content. -* Using the [`closeEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#closeedit) method. +* Press `Escape` key to exit edit mode and restore the unchanged cell content. +* Using the [`closeEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#closeedit) method. -The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#closeedit) method in spreadsheet. +The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#closeedit) method in spreadsheet. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/Excel/Spreadsheet/Vue/feature-list.md b/Document-Processing/Excel/Spreadsheet/Vue/feature-list.md index 9accbfa298..6d0896bac9 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/feature-list.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/feature-list.md @@ -7,7 +7,7 @@ platform: document-processing documentation: ug --- -# Feature list in Vue Spreadsheet component +# Feature list in Vue Spreadsheet Component The following table compares Excel functionality with the availability of EJ1 and EJ2 Spreadsheet features. @@ -16,7 +16,7 @@ The following table compares Excel functionality with the availability of EJ1 an | Ribbon | Yes | Yes | - | | Formula bar | Yes | Yes | - | | Sheet tab | Yes | Yes | - | -| Show / Hide gridlines and header | Yes | Yes | - | +| Show/Hide gridlines and header | Yes | Yes | - | | Scrolling | Partially | Yes | - | | Selection | Yes | Yes | - | | Editing | Yes | Yes | - | @@ -30,16 +30,16 @@ The following table compares Excel functionality with the availability of EJ1 an | Sorting | Yes | Yes | - | | Filtering | Yes | Yes | - | | Hyperlink | Yes | Yes | - | -| Undo & redo | Yes | Yes | - | +| Undo/redo | Yes | Yes | - | | Open and Save | Yes | Yes | - | -| Resize / Autofit | Yes | Yes | - | +| Resize/Autofit | Yes | Yes | - | | Clipboard | Yes | Yes | - | | Collaborative editing | No | Yes | - | | Wrap text | Yes | Yes | - | | Template | No | Yes | - | | Merge cells | Yes | Yes | - | -| Show / Hide rows and columns | Yes | Yes | - | -| Sheet customizations | Yes | Partially | Move or copy sheet is not supported in EJ2 spreadsheet. | +| Show/Hide rows and columns | Yes | Yes | - | +| Sheet customizations | Yes | Partially | Move or copy sheet is not supported in EJ2 Spreadsheet. | | Data Validation | Yes | Yes | - | | Table | Yes | No | - | | Chart | Yes | Yes | - | @@ -52,7 +52,7 @@ The following table compares Excel functionality with the availability of EJ1 an | Autofill | Yes | No | - | | Auto Sum | Yes | Yes | - | | Format painter | Yes | No | - | -| Cell Style | Yes | Partially | We can only customize the cell style in EJ2 Spreadsheet through API. | +| Cell Style | Yes | Partially | Cell style in EJ2 Spreadsheet can be customized only through the API. | | Protection | Yes | Partially | Custom encryption is not supported in EJ2 Spreadsheet's protect workbook. | | Find and replace | Yes | Yes | - | | Drag and Drop | Yes | No | - | diff --git a/Document-Processing/Excel/Spreadsheet/Vue/filter.md b/Document-Processing/Excel/Spreadsheet/Vue/filter.md index f8ed97c380..2d35cb4482 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/filter.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/filter.md @@ -9,7 +9,7 @@ documentation: ug # Filter in Vue Spreadsheet component -Filtering helps you to view specific rows in the spreadsheet by hiding the other rows. You can use the [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowfiltering) property to enable or disable filtering functionality. +Filtering helps you to view specific rows in the spreadsheet by hiding the other rows. You can use the [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowfiltering) property to enable or disable filtering functionality. > * The default value for `allowFiltering` property is `true`. @@ -19,19 +19,19 @@ By default, the `Filter` module is injected internally into Spreadsheet to perfo In the active sheet, select a range of cells to filter by value of the cell. The filtering can be done by any of the following ways: -* Select the filter item in the Ribbon toolbar. -* Right-click the sheet, select the filter item in the context menu. -* Use the [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#applyfilter) method programmatically. +* Select the `Filter` item in the Ribbon toolbar. +* Right-click the sheet and select the `Filter` item in the context menu. +* Use the [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#applyfilter) method programmatically. * Use `Ctrl + Shift + L` keyboard shortcut to apply the filter. > * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog. ## Filter by criteria -The [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments. +The [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments. -> * The [`beforeFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforefilter) event will be triggered before filtering the specified range. -> * The [`filterComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#filtercomplete) event will be triggered after the filter action is completed successfully. +> * The [`beforeFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#beforefilter) event will be triggered before filtering the specified range. +> * The [`filterComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#filtercomplete) event will be triggered after the filter action is completed successfully. The following code example shows `filter` functionality in the Spreadsheet control. @@ -54,33 +54,33 @@ To apply a filter for a cell value, right-click the cell and choose filter -> `F After applying filter to a certain column, you may want to clear it to make all filtered rows visible again. It can be done in the following ways, -* Choose `Clear` option in ribbon toolbar under `Filter and Sort`. It clears the filters applied in the spreadsheet for all fields. +* Choose `Clear` in the Ribbon toolbar under `Filter and Sort`. This clears the filters applied in the spreadsheet for all fields. -* Use the [`clearFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields. +* Use the [`clearFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#clearfilter) method programmatically to clear the applied filters in the spreadsheet for all fields. ## Clear filter on a field After filtering, you can clear/reset the filter for a field alone. It can be done in the following ways, * Click filter icon in the column’s header and then choose `Clear Filter` option from the filter dialog. -* You can right-click on a filtered column cell and choose `Clear Filter from .` option from the context menu. -* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the filter in a particular column. +* Right-click a filtered column cell and choose `Clear Filter from .` option from the context menu. +* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the filter in a particular column. ## Reapply filter -When you want to reapply the filter after some changes happened in the rows. It can be done in the following ways, +When you want to reapply the filter after changes have been made to the rows, It can be done in the following ways, -* You can choose `Reapply` option in ribbon toolbar under `Filter and Sort` to reapply the filtered columns again. -* You can right-click on a filtered cell and choose `Reapply` option from the context menu. It reapplies the filters again in the Spreadsheet for all the fields. +* Choose `Reapply` option in ribbon toolbar under `Filter and Sort` to reapply the filtered columns. +* Right-click a filtered cell and choose `Reapply` from the context menu. This reapplies the filters in the Spreadsheet for all fields. ## Known error validations The following errors have been handled for filtering, -* *Out of range validation:* When the selected range is not a used range of the active sheet, it is considered as invalid and the out of range alert with the message `Select a cell or range inside the used range and try again` will be displayed. No filter will be performed if the range is invalid. +* *Out of range validation:* When the selected range is not within the used range of the active sheet, it is considered invalid and the out-of-range alert with the message `Select a cell or range inside the used range and try again` is displayed. No filter is performed if the range is invalid. ## Get data from filtered rows -Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object. +Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object. The following code example shows how to get the filtered rows. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/formatting.md b/Document-Processing/Excel/Spreadsheet/Vue/formatting.md index 12b1679b2d..4110f8956e 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/formatting.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/formatting.md @@ -9,7 +9,7 @@ documentation: ug # Formatting in Vue Spreadsheet component -Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are, +Formatting options make your data easier to view and understand. The Spreadsheet supports the following types of formatting: * Number Formatting * Text Formatting * Cell Formatting @@ -18,7 +18,7 @@ Formatting options make your data easier to view and understand. The different t ## Number Formatting -Number formatting provides a type for your data in the Spreadsheet. Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet. The different types of number formatting supported in Spreadsheet are, +Number formatting provides a type for your data in the Spreadsheet. Use the [`allowNumberFormatting`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allownumberformatting) property to enable or disable the number formatting option in the Spreadsheet. The default value of `allowNumberFormatting` is `true`. The types of number formatting supported in the Spreadsheet are: | Types | Format Code | Format ID | |---------|---------|---------| @@ -34,10 +34,10 @@ Number formatting provides a type for your data in the Spreadsheet. Use the [`al | Scientific |`0.00E+00` | 11 | | Text | `@` | 49 | -Number formatting can be applied in following ways, +Number formatting can be applied in the following ways: * Using the `format` property in `cell`, you can set the desired format to each cell at initial load. -* Using the [`numberFormat`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#numberformat) method, you can set the number format to a cell or range of cells. -* Selecting the number format option from ribbon toolbar. +* Using the [`numberFormat`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#numberformat) method to set the number format on a cell or range of cells. +* Select the number format option from the ribbon toolbar. The following code example shows the number formatting in cell data. @@ -64,7 +64,7 @@ The spreadsheet allows customization of formats in the custom format dialog usin Compared to Excel, the date, time, currency, and accounting formats vary across different cultures. For example, when an Excel file with the date format `'m/d/yyyy'` is imported in the `en-US` culture, the spreadsheet displays the date in that format. However, when the same file is imported in the German culture, the date format changes to `'dd.MM.yyyy'`, which is the default for that region. The default number format ID for the date is 14. To customize the date format based on the culture, you should map the default number format ID to the appropriate culture-specific format code, like this: `{ id: 14, code: 'dd.MM.yyyy' }` in the `configureLocalizedFormat` method. -> The format code should use the default decimal separator (.) and group separator (,). +> The format code should use the default decimal separator (`.`) and group separator (`,`). The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German (de)` culture. @@ -123,19 +123,19 @@ Various font formats supported in the spreadsheet are font-family, font-size, bo ### Text Alignment -You can align text in a cell either vertically or horizontally using the `textAlign` and `verticalAlign` property. +You can align text in a cell either vertically or horizontally using the `textAlign` and `verticalAlign` properties. ### Indents -To enhance the appearance of text in a cell, you can change the indentation of a cell content using `textIndent` property. +To enhance the appearance of text in a cell, change the indentation of a cell's content using the `textIndent` property. ### Fill color -To highlight cell or range of cells from whole workbook you can apply background color for a cell using `backgroundColor` property. +To highlight a cell or range of cells from the whole workbook, apply a background color using the `backgroundColor` property. ### Borders -You can add borders around a cell or range of cells to define a section of worksheet or a table. The different types of border options available in the spreadsheet are, +You can add borders around a cell or range of cells to define a section of a worksheet or a table. The border options available in the Spreadsheet are: | Types | Actions | |-------|---------| @@ -144,13 +144,13 @@ You can add borders around a cell or range of cells to define a section of works | Right Border | Specifies the right border of a cell or range of cells.| | Bottom Border | Specifies the bottom border of a cell or range of cells.| | No Border | Used to clear the border from a cell or range of cells.| -| All Border | Specifies all border of a cell or range of cells.| +| All Border | Specifies all borders of a cell or range of cells.| | Horizontal Border | Specifies the top and bottom border of a cell or range of cells.| | Vertical Border | Specifies the left and right border of a cell or range of cells.| | Outside Border | Specifies the outside border of a range of cells.| | Inside Border | Specifies the inside border of a range of cells.| -You can also change the color, size, and style of the border. The size and style supported in the spreadsheet are, +You can also change the color, size, and style of the border. The size and style supported in the Spreadsheet are: | Types | Actions | |-------|---------| @@ -195,7 +195,7 @@ Conditional formatting helps you to format a cell or range of cells based on the ### Apply Conditional Formatting -You can apply conditional formatting by using one of the following ways, +You can apply conditional formatting by using one of the following ways: * Select the conditional formatting icon in the Ribbon toolbar under the Home Tab. * Using the [`conditionalFormat()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#conditionalformat) method to define the condition. @@ -245,7 +245,7 @@ The following options can be given for the color scales as type, ### Icon Sets -Icon sets will help you to visually represent your data with icons. Every icon represents a range of values. In the Three Arrows(colored) icon, the green arrow icon represents the values greater than 67%, the yellow arrow icon represents the values between 33% to 67%, and the red arrow icon represents the values less than 33%. +Icon sets will help you to visually represent your data with icons. Every icon represents a range of values. In the Three Arrows(colored) icon, the green arrow icon represents values greater than 67%, the yellow arrow icon represents values from 33% to 67%, and the red arrow icon represents values less than 33%. The following options can be given for the icon sets as type, @@ -261,9 +261,9 @@ In the MAY and JUN columns, we have applied conditional formatting custom format ### Clear Rules -You can clear the defined rules by using one of the following ways, +You can clear the defined rules by using one of the following ways: -* Using the “Clear Rules” option in the Conditional Formatting button of HOME Tab in the ribbon to clear the rule from selected cells. +* Using the **Clear Rules** option in the **Conditional Formatting** button of the **Home** tab in the ribbon to clear the rule from the selected cells. * Using the [`clearConditionalFormat()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#clearconditionalformat) method to clear the defined rules. {% tabs %} @@ -310,7 +310,7 @@ To apply these formats, use the `verticalAlign` property within the style of a r You can apply subscript and superscript formatting in the following ways: -1. Select the desired portion of text within a cell, then click the Subscript or Superscript option in the ribbon to apply the formatting. +1. Select the desired portion of text within a cell, then click the **Subscript** or **Superscript** option in the **Home** tab of the ribbon to apply the formatting. ![Subscript and superscript in Spreadsheet](./images/spreadsheet_richtext.gif) diff --git a/Document-Processing/Excel/Spreadsheet/Vue/formulas.md b/Document-Processing/Excel/Spreadsheet/Vue/formulas.md index 92086f1520..7894947a92 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/formulas.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/formulas.md @@ -2,14 +2,14 @@ layout: post title: Formulas in Vue Spreadsheet component | Syncfusion description: Learn here all about Formulas in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Formulas +control: Formulas platform: document-processing documentation: ug --- # Formulas in Vue Spreadsheet component -Formulas are used for calculating the data in a worksheet. You can refer the cell reference from same sheet or from different sheets. +Formulas are used to calculate the data in a worksheet. You can refer to a cell reference from the same sheet or from different sheets. ## Usage @@ -17,8 +17,8 @@ You can set formula for a cell in the following ways, * Using the `formula` property from `cell`, you can set the formula or expression to each cell at initial load. * Set the formula or expression through data binding. -* You can set formula for a cell by [`editing`](./editing). -* Using the [`updateCell`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#updatecell) method, you can set or update the cell formula. +* You can set formula for a cell using [`editing`](./editing). +* Using the [`updateCell`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#updatecell) method, you can set or update the cell formula. ## Culture-Based Argument Separator @@ -26,7 +26,7 @@ Previously, although you could import culture-based Excel files into the Spreads > Before importing culture-based Excel files, ensure that the Spreadsheet component is rendered with the corresponding culture. Additionally, launch the import/export services with the same culture to ensure compatibility. -When loading spreadsheet data with culture-based formula argument separators using cell data binding, local/remote data, or JSON, ensure to set the [listSeparator](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#listseparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#listseparator) property will be updated based on the culture of the launched import/export service. +When loading spreadsheet data with culture-based formula argument separators using cell data binding, local/remote data, or JSON, ensure to set the [listSeparator](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#listseparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#listseparator) property will be updated based on the culture of the launched import/export service. In the example below, the Spreadsheet component is rendered with the `German culture (de)`. Additionally, you can find references on how to set the culture-based argument separator and culture-based formatted numeric value as arguments to the formulas. @@ -45,7 +45,7 @@ In the example below, the Spreadsheet component is rendered with the `German cul The Spreadsheet includes a number of built-in formulas. For your convenience, a list of supported formulas can be found [here](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/formulas#supported-formulas). -You can define and use an unsupported formula, i.e. a user defined/custom formula, in the spreadsheet by using the [addCustomFunction](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#addcustomfunction) function. Meanwhile, remember that you should define a user defined/custom formula whose results should only return a single value. If a user-defined/custom formula returns an array, it will be time-consuming to update adjacent cell values. +You can define and use an unsupported formula, i.e., a user-defined/custom formula, in the spreadsheet by using the [addCustomFunction](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#addcustomfunction) function. Remember that you must define a user-defined/custom formula whose result returns a single value. If a user-defined/custom formula returns an array, it will be time-consuming to update adjacent cell values. The following code example shows an unsupported formula in the spreadsheet. @@ -60,7 +60,7 @@ The following code example shows an unsupported formula in the spreadsheet. {% previewsample "/document-processing/code-snippet/spreadsheet/vue/formula-cs1" %} -Second, if you want to directly compute any formula or expression, you can use the [computeExpression](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#computeexpression) method. This method will work for both built-in and used-defined/custom formula. +Second, if you want to directly compute any formula or expression, you can use the [computeExpression](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#computeexpression) method. This method works for both built-in and user-defined/custom formulas. The following code example shows how to use `computeExpression` method in the spreadsheet. @@ -77,15 +77,15 @@ The following code example shows how to use `computeExpression` method in the sp ## Formula bar -Formula bar is used to edit or enter cell data in much easier way. By default, the formula bar is enabled in the spreadsheet. Use the [`showFormulaBar`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#showformulabar) property to enable or disable the formula bar. +Formula bar is used to edit or enter cell data in much easier way. By default, the formula bar is enabled in the spreadsheet. Use the [`showFormulaBar`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#showformulabar) property to enable or disable the formula bar. ## Named Ranges -You can define a meaningful name for a cell range and use it in the formula for calculation. It makes your formula much easier to understand and maintain. You can add named ranges to the Spreadsheet in the following ways, +You can define a meaningful name for a cell range and use it in the formula for calculation. This makes your formula much easier to understand and maintain. You can add named ranges to the Spreadsheet in the following ways, -* Using the [`definedNames`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#definednames) collection, you can add multiple named ranges at initial load. -* Use the [`addDefinedName`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#adddefinedname) method to add a named range dynamically. -* You can remove an added named range dynamically using the [`removeDefinedName`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#removedefinedname) method. +* Using the [`definedNames`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#definednames) collection, you can add multiple named ranges at initial load. +* Use the [`addDefinedName`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#adddefinedname) method to add a named range dynamically. +* You can remove an added named range dynamically using the [`removeDefinedName`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#removedefinedname) method. * Select the range of cells, and then enter the name for the selected range in the name box. The following code example shows the usage of named ranges support. @@ -108,13 +108,13 @@ The Spreadsheet provides a `Calculation Mode` feature like the calculation optio * `Automatic`: Formulas are recalculated instantly whenever a change occurs in the dependent cells. * `Manual`: Formulas are recalculated only when triggered explicitly by the user using options like `Calculate Sheet` or `Calculate Workbook`. -You can configure the calculate mode using the [`calculationMode`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#calculationmode) property of the Spreadsheet. These modes offer flexibility to balance real-time updates and performance optimization. +You can configure the calculate mode using the [`calculationMode`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#calculationmode) property of the Spreadsheet. These modes let you balance real-time updates with performance optimization. ### Automatic Mode In Automatic Mode, formulas are recalculated instantly whenever a dependent cell is modified. This mode is perfect for scenarios where real-time updates are essential, ensuring that users see the latest results without additional actions. -For example, consider a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, `C1` updates immediately without requiring any user intervention. You can enable this mode by setting the [`calculationMode`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#calculationmode) property to `Automatic`. +For example, consider a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, `C1` updates immediately without requiring any user intervention. You can enable this mode by setting the [`calculationMode`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#calculationmode) property to `Automatic`. The following code example demonstrates how to set the Automatic calculation mode in a Spreadsheet. @@ -133,7 +133,7 @@ The following code example demonstrates how to set the Automatic calculation mod In Manual Mode, formulas are not recalculated automatically when cell values are modified. Instead, recalculations must be triggered explicitly. This mode is ideal for scenarios where performance optimization is a priority, such as working with large datasets or computationally intensive formulas. -For example, imagine a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, the value in `C1` will not update automatically. Instead, the recalculation must be initiated manually using either the `Calculate Sheet` or `Calculate Workbook` option. To manually initiate recalculation, the Spreadsheet provides two options: +For example, imagine a spreadsheet where cell `C1` contains the formula `=A1+B1`. When the value in `A1` or `B1` changes, the value in `C1` will not update automatically. Instead, the recalculation must be triggered manually using either the `Calculate Sheet` or `Calculate Workbook` option. To manually trigger recalculation, the Spreadsheet provides two options: * `Calculate Sheet`: Recalculates formulas for the active sheet only. * `Calculate Workbook`: Recalculates formulas across all sheets in the workbook. @@ -153,7 +153,7 @@ The following code example demonstrates how to set the Manual calculation mode i ## Supported Formulas -The list of supported formulas can be find in following [`link`](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es6/formulas#supported-formulas). +The list of supported formulas can be found at the following [`link`](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/formulas#supported-formulas). ## Formula Error Dialog @@ -175,11 +175,10 @@ If you enter an invalid formula in a cell, an error dialog with an error message ## Note -You can refer to our [Vue Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Vue Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/vue/#/tailwind3/spreadsheet/default.html) to knows how to present and manipulate data. +You can refer to our [Vue Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/vue-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Vue Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/vue/#/tailwind3/spreadsheet/default.html) to see how to present and manipulate data. ## See Also +* [Open and Save](./open-save) * [Editing](./editing) * [Formatting](./formatting) -* [Open](./open-save) -* [Save](./open-save) diff --git a/Document-Processing/Excel/Spreadsheet/Vue/freeze-pane.md b/Document-Processing/Excel/Spreadsheet/Vue/freeze-pane.md index c7e6e44822..d10e4e54af 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/freeze-pane.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/freeze-pane.md @@ -2,14 +2,14 @@ layout: post title: Freeze pane in Vue Spreadsheet component | Syncfusion description: Learn here all about Freeze pane in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Freeze pane +control: Freeze pane platform: document-processing documentation: ug --- # Freeze pane in Vue Spreadsheet component -Freeze Panes helps you to keep particular rows or columns visible when scrolling the sheet content in the spreadsheet. You can specify the number of frozen rows and columns using the [`frozenRows`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#frozenrows) and [`frozenColumns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#frozencolumns) properties inside the [`Sheet`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#sheets) property. +Freeze Panes helps you to keep particular rows or columns visible when scrolling the sheet content in the spreadsheet. You can specify the number of frozen rows and columns using the [`frozenRows`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#frozenrows) and [`frozenColumns`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#frozencolumns) properties inside the [`Sheet`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#sheets) property. ## Apply freezepanes on UI @@ -18,7 +18,7 @@ Freeze Panes helps you to keep particular rows or columns visible when scrolling In the active spreadsheet, click the cell where you want to create freeze panes. Freeze panes can be done in any of the following ways: * Select the View tab in the Ribbon toolbar and choose the `Freeze Panes` item. -* Use the [`freezePanes`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#freezepanes) method programmatically. +* Use the [`freezePanes`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#freezepanes) method programmatically. ## FrozenRows diff --git a/Document-Processing/Excel/Spreadsheet/Vue/global-local.md b/Document-Processing/Excel/Spreadsheet/Vue/global-local.md index bcb64f6b46..a8444ff44d 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/global-local.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/global-local.md @@ -11,8 +11,8 @@ documentation: ug ## Localization -The [`Localization`](https://ej2.syncfusion.com/vue/documentation/common/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet has static text on some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the -[`locale`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#locale) value and translation object. +The [`Localization`](https://ej2.syncfusion.com/vue/documentation/common/localization) library allows you to localize the default text content of the Spreadsheet. The Spreadsheet contains static text for some features (cell formatting, Merge, Data validation, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the +[`locale`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#locale) value and a translation object. The following list of properties and their values are used in the Spreadsheet. @@ -137,7 +137,7 @@ RADIANS | Converts degrees into radians. MATCH | Returns the relative position of a specified value in the given range. DefineNameExists | This name already exists try a different name. CircularReference | When a formula refers to one or more circular references this may result in an incorrect calculation. -ShowRowsWhere | Show rows where | +ShowRowsWhere | Show rows where CustomFilterDatePlaceHolder | Choose a date CustomFilterPlaceHolder | Enter the value CustomFilter | Custom Filter @@ -190,19 +190,19 @@ UnprotectSheet | Unprotect Sheet SelectCells | Select cells FormatCells | Format cells FormatRows | Format rows -Format Columns | Format columns +FormatColumns | Format columns InsertLinks | Insert links ProtectContent | Protect the contents of locked cells -ProtectAllowUser | Allow all users of this worksheet to | +ProtectAllowUser | Allow all users of this worksheet to EditAlert | The cell you're trying to change is protected. To make a change, unprotect the sheet. FindReplaceTooltip | Find & Replace InsertingEmptyValue | Reference value is not valid. -ByRow | By Row +ByRow | By Row ByColumn | By Column MatchExactCellElements | Match Exact Cell Contents EntercellAddress | Enter Cell Address FindAndReplace | Find and Replace -ReplaceAllEnd | matches replaced with. +ReplaceAllEnd | matches replaced with. FindNextBtn | Find Next FindPreviousBtn | Find Previous ReplaceBtn | Replace @@ -394,7 +394,7 @@ The following example demonstrates the Spreadsheet in `French` culture. In the b ## Internationalization -The Internationalization library is used to globalize number, date, and time values in the spreadsheet component. +The Internationalization library is used to globalize number, date, and time values in the Spreadsheet component. The following example demonstrates the Spreadsheet in French [ `fr-CH`] culture. In the below sample we have globalized the Date(Date column), Time(Time column), and Currency(Amount column) formats. @@ -603,11 +603,11 @@ export default { {% endhighlight %} {% endtabs %} -Internalization [`sample link`](https://codesandbox.io/s/vue-template-forked-cthq7?file=/src/App.vue) +Internalization [`sample link`](https://codesandbox.io/p/sandbox/vue-template-forked-cthq7) ## Right to left (RTL) -RTL provides an option to switch the text direction and layout of the Spreadsheet component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Spreadsheet, set the [`enableRtl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#enablertl) to true. +RTL provides an option to switch the text direction and layout of the Spreadsheet component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Spreadsheet, set the [`enableRtl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#enablertl) to true. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/Excel/Spreadsheet/Vue/illustrations.md b/Document-Processing/Excel/Spreadsheet/Vue/illustrations.md index efb7e0d4f1..07a93eb6f0 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/illustrations.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/illustrations.md @@ -2,7 +2,7 @@ layout: post title: Illustrations in Vue Spreadsheet component | Syncfusion description: Learn here all about Illustrations in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more. -control: Illustrations +control: Spreadsheet platform: document-processing documentation: ug --- @@ -13,7 +13,7 @@ Illustrations help you to insert an image, shapes, and graphic objects in the Es ## Image -Adding images to a spreadsheet can enhance the visual appeal and help to convey information more clearly. +Adding images to a spreadsheet can enhance visual appeal and convey information more clearly. >* The default value for the `allowImage` property is `true`. @@ -83,14 +83,14 @@ Image feature allows you to view and insert an image in a spreadsheet, and you c The following features have some limitations in Image: -* Corner resizing option in the image element. -* Copy and paste the external image. +* Corner resizing option in the image element is not supported. +* Copying and pasting external images is not supported. ## Chart -A chart is a graphical representation of data, that organizes and represents a set of numerical or qualitative data. It mostly displays the selected range of data in terms of `x`-axis and `y`-axis. You can use the [`allowChart`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowchart) property to enable or disable the chart functionality. +A chart is a graphical representation of data, that organizes and represents a set of numerical or qualitative data. It mostly displays the selected range of data in terms of `x`-axis and `y`-axis. You can use the [`allowChart`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowchart) property to enable or disable the chart functionality. ->* The default value for the [`allowChart`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowchart) property is `true`. +>* The default value for the [`allowChart`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowchart) property is `true`. ### Types of chart @@ -108,9 +108,9 @@ The following types of charts are available in the Spreadsheet. You can insert the chart by using one of the following ways, * Select the chart icon in the Ribbon toolbar under the Insert Tab. -* Use the [`insertChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#insertchart) method programmatically. +* Use the [`insertChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#insertchart) method programmatically. -The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#insertchart) method is, +The available parameter in the [`insertChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#insertchart) method is, | Parameter | Type | Description | |-----|------|----| @@ -139,9 +139,9 @@ The available arguments in the `ChartModel` are: ### Delete Chart * If you want to delete the chart, just select the chart, and then press the Delete key. -* Use the [`deleteChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#deletechart) method programmatically. +* Use the [`deleteChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#deletechart) method programmatically. -The available parameter in the [`deleteChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#deletechart) method is, +The available parameter in the [`deleteChart()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#deletechart) method is, | Parameter | Type | Description | |-----|------|----| @@ -168,7 +168,7 @@ Chart feature allows you to view and insert a chart in a spreadsheet, and you ca #### Customization of line chart markers -Using the [`actionBegin`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction. +Using the [`actionBegin`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#actionbegin) event, you can change the shape, size, fill color, and border of the line chart marker. In the following example, you can see the modified marker appearance, such as shape and size, while creating the line chart with UI interaction. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/Excel/Spreadsheet/Vue/keyboard-shortcuts.md b/Document-Processing/Excel/Spreadsheet/Vue/keyboard-shortcuts.md index 54341893a3..6c97452127 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/keyboard-shortcuts.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/keyboard-shortcuts.md @@ -15,13 +15,13 @@ The keyboard shortcuts supported in the Spreadsheet are, |-------|---------| | Ctrl + O | Displays dialog to open a file. | | Ctrl + S / Alt + F2 | Saves the workbook. | -| Ctrl + P | Print the active worksheet when the spreadsheet is in focus. | +| Ctrl + P | Prints the active worksheet when the spreadsheet is in focus. | | F2 | Enables edit mode. | | ESC | Cancel edit mode and discard the changes. | | Backspace and SPACE | Clears content of the active cell and enables edit mode. | | Ctrl + C | Copies the selected cells. | | Ctrl + X | Cuts the selected cells. | -| Ctrl + V | Paste the clipboard(cut or copied) content in the new selected range. | +| Ctrl + V | Pastes the clipboard(cut or copied) content in the new selected range. | | Ctrl + B | Applies or removes **bold** formatting. | | Ctrl + I | Applies or removes *italic* formatting. | | Ctrl + U | Applies or removes `underline`. | diff --git a/Document-Processing/Excel/Spreadsheet/Vue/link.md b/Document-Processing/Excel/Spreadsheet/Vue/link.md index a9f37df51a..7c8021b882 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/link.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/link.md @@ -9,9 +9,9 @@ documentation: ug # Link in Vue Spreadsheet component -Hyperlink is used to navigate to web links or cell reference within the sheet or to other sheets in Spreadsheet. You can use the [`allowHyperlink`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowHyperlink) property to enable or disable hyperlink functionality. +Hyperlink is used to navigate to a web links or cell reference within the sheet or to other sheets in Spreadsheet. You can use the [`allowHyperlink`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowHyperlink) property to enable or disable the hyperlink functionality. -> * The default value for `allowHyperlink` property is `true`. +> * The default value of the `allowHyperlink` property is `true`. ## Insert Link @@ -24,7 +24,7 @@ In the active spreadsheet, click the cell where you want to create a hyperlink. * Select the INSERT tab in the Ribbon toolbar and choose the `Link` item. * Right-click the cell and then click Hyperlink item in the context menu. * Use `Ctrl + K` keyboard shortcut to apply the hyperlink. -* Use the [`addHyperlink`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#addhyperlink) method programmatically. +* Use the [`addHyperlink`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#addhyperlink) method programmatically. ## Edit Hyperlink @@ -47,7 +47,7 @@ Performing this operation remove a single hyperlink without losing the display t In the active spreadsheet, click the cell where you want to remove a hyperlink. remove hyperlink can be done by any of the following ways: * Right-click the cell and then click Remove Hyperlink item in the context menu. -* Use the [`removeHyperlink()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#removehyperlink) method programmatically. +* Use the [`removeHyperlink()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#removehyperlink) method programmatically. ## How to change target attribute @@ -66,7 +66,7 @@ There is an event named `beforeHyperlinkClick` which triggers only on clicking h ## Limitations -* Inserting hyperlink not supported for multiple ranges. +* Inserting a hyperlink is not supported for multiple ranges. ## Note diff --git a/Document-Processing/Excel/Spreadsheet/Vue/notes.md b/Document-Processing/Excel/Spreadsheet/Vue/notes.md index 509873d212..81f6de434a 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/notes.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/notes.md @@ -66,7 +66,7 @@ The note will be removed from the cell, and the red triangle indicator will be r ## Navigating between notes -The Syncfusion Spreadsheet provides intuitive navigation to quickly move between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab. +The Syncfusion Spreadsheet provides navigation to move quickly between cells containing notes in your worksheet. These options are accessible through the **Notes** dropdown in the **Review** tab. ![Navigating between notes in Spreadsheet](./images/spreadsheet_next_previous_note.gif) @@ -75,7 +75,7 @@ The Syncfusion Spreadsheet provides intuitive navigation to quickly move between To navigate to the previous note: * In the **Review** tab, open the **Notes** dropdown and select **Previous Note**. -* The Spreadsheet will automatically select the previous note in the current worksheet, searching leftward and then upward. +* The Spreadsheet automatically selects the previous note in the current worksheet, searching leftward and then upward. * If no prior note exists in the sheet, the search continues to the previous worksheet in order. * If the workbook contains no notes, the selection remains on the current cell. @@ -83,8 +83,8 @@ To navigate to the previous note: To navigate to the next note: -* In the **Review** tab, open the **Notes** dropdown and select **Next Note**. -* The Spreadsheet will automatically select the next note in the current worksheet, searching rightward and then downward. +* In the **Review** tab, open the **Notes** dropdown and select **Next Note**. +* The Spreadsheet automatically selects the next note in the current worksheet, searching rightward and then downward. * If no subsequent note exists in the sheet, the search continues to the next worksheet in order. * If the workbook contains no notes, the selection remains on the current cell. @@ -114,7 +114,7 @@ To activate: * Navigate to the **Review** tab, click the **Notes** dropdown, and select **Show All Notes**. -All notes in the worksheet will appear as floating text boxes near their respective cells. +All notes in the worksheet appear as floating text boxes near their respective cells. > **Note**: After using Show All Notes, you can hide individual notes selectively via the **Show/Hide Note** option. Additionally, any new notes added to the worksheet will automatically appear as visible sticky notes when Show All Notes is active. diff --git a/Document-Processing/Excel/Spreadsheet/Vue/open-save.md b/Document-Processing/Excel/Spreadsheet/Vue/open-save.md index 18d52efa8d..d906b5ae59 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/open-save.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/open-save.md @@ -7,19 +7,19 @@ platform: document-processing documentation: ug --- -# Open save in Vue Spreadsheet component +# Open and Save in Vue Spreadsheet component The native data format for Spreadsheet is `JSON`. When you open an excel file, it needs to be read and converted to client side Spreadsheet model. The converted client side Spreadsheet model is sent as JSON which is used to render Spreadsheet. Similarly, when you save the Spreadsheet, the client Spreadsheet model is sent to the server as JSON for processing and saved as Excel file formats. [`Server configuration`](./open-save#server-configuration) is used for this process. ## Open -The Spreadsheet control opens an Excel document with its data, style, format, and more. To enable this feature, set [`allowOpen`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowopen) as `true` and assign service url to the [`openUrl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#openurl) property. +The Spreadsheet control opens an Excel document with its data, style, format, and more. To enable this feature, set [`allowOpen`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowopen) as `true` and assign service url to the [`openUrl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#openurl) property. **User Interface**: -In user interface you can open an Excel document by clicking `File > Open` menu item in ribbon. +In the user interface, you can open an Excel document by clicking `File > Open` menu item in ribbon. -The following sample shows the `Open` option by using the [`openUrl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#openurl) property in the Spreadsheet control. You can also use the [`beforeOpen`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforeopen) event to trigger before opening an Excel file. +The following sample shows the `Open` option by using the [`openUrl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#openurl) property in the Spreadsheet control. You can also use the [`beforeOpen`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#beforeopen) event to trigger before opening an Excel file. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -32,7 +32,7 @@ The following sample shows the `Open` option by using the [`openUrl`](https://ej {% previewsample "/document-processing/code-snippet/spreadsheet/vue/open-cs1" %} -Please find the below table for the beforeOpen event arguments. +Please find the below table for the `beforeOpen` event arguments. | **Parameter** | **Type** | **Description** | | ----- | ----- | ----- | @@ -41,11 +41,11 @@ Please find the below table for the beforeOpen event arguments. | requestData | object | To provide the Form data. | > * Use `Ctrl + O` keyboard shortcut to open Excel documents. -> * The default value of the [allowOpen](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowopen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowopen) property in previous code snippet. +> * The default value of the [allowOpen](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowopen) property is `true`. For demonstration purposes, we have showcased the [allowOpen](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowopen) property in the previous code snippet. -### Open an excel file using a file uploader +### Open an Excel file using a file uploader -If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/vue/documentation/api/uploader/#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#open) method to see the appropriate output. +If you explore your machine to select and upload an Excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/vue/documentation/api/uploader#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#open) method to see the appropriate output. The following code example shows how to import an excel document using file uploader in spreadsheet. @@ -60,9 +60,9 @@ The following code example shows how to import an excel document using file uplo {% previewsample "/document-processing/code-snippet/spreadsheet/vue/open-uploader-cs1" %} -### Open an external URL excel file while initial load +### Open an external URL Excel file on initial load -You can achieve to access the remote excel file by using the [`created`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#created) event. In this event you can fetch the excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#open) this file by using Spreadsheet component open method. +You can achieve to access the remote excel file by using the [`created`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#created) event. In this event you can fetch the excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#open) this file by using Spreadsheet component open method. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -75,11 +75,11 @@ You can achieve to access the remote excel file by using the [`created`](https:/ {% previewsample "/document-processing/code-snippet/spreadsheet/vue/open-cs2" %} -### Open an excel file from blob data +### Open an Excel file from Blob data -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 open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the [open](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#open) method in the Spreadsheet component to load that `File` object. +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 open an Excel file from Blob data, you need to fetch the Blob data from the server or another source and convert this Blob data into a `File` object. Then, you can use the [open](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#open) method in the Spreadsheet component to load that `File` object. -Please find the code to fetch the blob data and load it into the Spreadsheet component below. +Please find the code to fetch the Blob data and load it into the Spreadsheet component below. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -94,7 +94,7 @@ Please find the code to fetch the blob data and load it into the Spreadsheet com ### Open an Excel file located on a server -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/vue/documentation/api/spreadsheet/#openfromjson) method to load that `JSON data` into the Spreadsheet component. +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/vue/documentation/api/spreadsheet#openfromjson) method to load that `JSON data` into the Spreadsheet component. **Server Endpoint**: @@ -147,15 +147,15 @@ You can find the server endpoint code to fetch and process the Excel file in thi fetch('https://localhost:{port number}/Home/Open') ``` -### Open an excel file using a hosted web service in AWS Lambda +### 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/vue/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. +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/vue/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/vue/documentation/api/spreadsheet/#openfromjson) method to load this JSON data into the spreadsheet component. +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/vue/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. @@ -333,9 +333,9 @@ export default { ```csharp public IActionResult Open(OpenOptions openOptions) { - // Convert the base64 string to bytes array. + // Convert the base64 string to a byte array. byte[] bytes = Convert.FromBase64String(openOptions.File); - // Loading the bytes array to stream. + // Loading the byte array into a stream. MemoryStream stream = new MemoryStream(bytes); OpenRequest open = new OpenRequest(); // Converting the stream into FormFile. @@ -354,9 +354,9 @@ public class OpenOptions } ``` -### Open an excel file from Base64 string data +### Open an Excel file from a Base64 string -In the 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. +In the 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 %} @@ -372,7 +372,7 @@ The following code example shows how to save the spreadsheet data as base64 stri ### 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 +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)" %} @@ -387,7 +387,7 @@ You can open excel file into a read-only mode by using the [`openComplete`](http ### 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. +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. @@ -458,7 +458,7 @@ public IActionResult Open(IFormCollection openRequest) When opening large Excel files with many features and data, the server response can become very large. This might cause memory issues or connection problems during data transmission. The `Chunk Response Processing` feature solves this by dividing the server response into smaller parts, called chunks, and sending them to the client in parallel. The client receives these chunks and combines them to load the Excel data smoothly into the spreadsheet. -You can enable this feature by setting the [`chunkSize`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/openSettings/#chunksize) property in the [`openSettings`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#opensettings) object. Set the [`chunkSize`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/openSettings/#chunksize) to a value greater than 0 (in bytes). The [`chunkSize`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/openSettings/#chunksize) defines how large each chunk will be. Make sure your server supports chunked responses to use this feature effectively. +You can enable this feature by setting the [`chunkSize`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/openSettings#chunksize) property in the [`openSettings`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#opensettings) object. Set the [`chunkSize`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/openSettings#chunksize) to a value greater than 0 (in bytes). The [`chunkSize`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/openSettings#chunksize) defines how large each chunk will be. Make sure your server supports chunked responses to use this feature effectively. > This feature reduces memory usage on both the server and client, ensuring that resources are managed efficiently during data transmission. By sending smaller parts of data, it prevents connection issues that could occur with large payloads, making the transmission process more reliable. Additionally, it allows large Excel files to be loaded smoothly into the spreadsheet, providing a seamless user experience even with extensive data. @@ -592,7 +592,7 @@ The [attachment](https://www.syncfusion.com/downloads/support/directtrac/general ### 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. +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)" %} @@ -625,7 +625,7 @@ public IActionResult Open(IFormCollection openRequest) ## Supported file formats -The following list of Excel file formats are supported in Spreadsheet: +The following list of Excel file formats are supported in the Spreadsheet for the **open** action: * MS Excel (.xlsx) * MS Excel 97-2003 (.xls) @@ -635,13 +635,13 @@ The following list of Excel file formats are supported in Spreadsheet: ## Save -The Spreadsheet control saves its data, style, format, and more as Excel file document. To enable this feature, set [`allowSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowsave) as `true` and assign service url to the [`saveUrl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveurl) property. +The Spreadsheet control saves its data, style, format, and more as Excel file document. To enable this feature, set [`allowSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowsave) as `true` and assign service url to the [`saveUrl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#saveurl) property. **User Interface**: 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/vue/documentation/api/spreadsheet/#saveurl) property in the Spreadsheet control. You can also use the [`beforeSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event to trigger before saving the Spreadsheet as an Excel file. +The following sample shows the `Save` option by using the [`saveUrl`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#saveurl) property in the Spreadsheet control. You can also use the [`beforeSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#beforesave) event to trigger before saving the Spreadsheet as an Excel file. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -654,11 +654,11 @@ The following sample shows the `Save` option by using the [`saveUrl`](https://ej {% previewsample "/document-processing/code-snippet/spreadsheet/vue/open-save-cs1" %} -Please find the below table for the beforeSave event arguments. +Please find the below table for the `beforeSave` event arguments. | **Parameter** | **Type** | **Description** | | ----- | ----- | ----- | -| url | string | Specifies the save url. | +| url | string | Specifies the save URL. | | fileName | string | Specifies the file name. | | saveType | SaveType | Specifies the saveType like Xlsx, Xls, Csv and Pdf. | | customParams | object | Passing the custom parameters from client to server while performing save operation. | @@ -667,12 +667,12 @@ Please find the below table for the beforeSave event arguments. | cancel | boolean | To prevent the save operations. | > * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file. -> * 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. +> * 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. ### Save an excel file as blob data -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. +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. @@ -689,7 +689,7 @@ Please find below the code to retrieve blob data from the Spreadsheet component ### 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. +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**: @@ -727,8 +727,8 @@ By default, the Spreadsheet component saves the Excel file and downloads it to t // 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. + // Using XlsIO, open the file stream and save the file on the server under the "Files" folder. + // You can also save the stream file to your own server location. IWorkbook workbook = application.Workbooks.Open(fileStream); string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx"; var file = System.IO.File.Create(basePath); @@ -754,13 +754,13 @@ You can find the server endpoint code to save the spreadsheet data as an Excel f fetch('https://localhost:{port number}/Home/Save') ``` -### Save an excel file using a hosted web service in AWS Lambda +### 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/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. +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. @@ -1004,9 +1004,9 @@ 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/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. +> You can get the Spreadsheet data as a Blob in the [saveComplete](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#savecomplete) event when you set the `needBlobData` to **true** and `isFullPost` to **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. +The following code example shows how to save the spreadsheet data as a Base64 string. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -1021,7 +1021,7 @@ The following code example shows how to save the spreadsheet data as base64 stri ### Configure JSON serialization options -Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#saveasjson) method, the entire workbook with all loaded features were processed and saved as a JSON object. +Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#saveasjson) method, the entire workbook with all loaded features were processed and saved as a JSON object. Now, you have the option to selectively ignore some features while saving the Spreadsheet as a JSON object by configuring serialization options and passing them as arguments to the `saveAsJson` method. This argument is optional, and if not configured, the entire workbook JSON object will be saved without ignoring any features. @@ -1058,7 +1058,7 @@ The following code snippet demonstrates how to configure the serialization optio ### Send and receive custom params from client to server -Passing the custom parameters from client to server by using [`beforeSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforesave) event. +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)" %} @@ -1084,7 +1084,7 @@ Server side code snippets: ### Add custom header during 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. +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. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -1099,7 +1099,7 @@ You can add your own custom header to the save action in the Spreadsheet. For pr ### Change the PDF orientation -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. +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: @@ -1119,7 +1119,7 @@ The possible values are: ### Supported file formats -The following list of Excel file formats are supported in Spreadsheet: +The following list of Excel file formats are supported by the Spreadsheet for the **save** action: * MS Excel (.xlsx) * MS Excel 97-2003 (.xls) @@ -1128,7 +1128,7 @@ The following list of Excel file formats are supported in Spreadsheet: ### Methods -To save the Spreadsheet document as an `xlsx, xls, csv, or pdf` file, by using [save](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#save) method should be called with the `url`, `fileName` and `saveType` as parameters. The following code example shows to save the spreadsheet file as an `xlsx, xls, csv, or pdf` in the button click event. +To save the Spreadsheet document as an `xlsx, xls, csv, or pdf` file, by using [save](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#save) method should be called with the `url`, `fileName` and `saveType` as parameters. The following code example shows to save the spreadsheet file as an `xlsx, xls, csv, or pdf` in the button click event. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -1150,7 +1150,7 @@ Import and export are processed in `server-side` using Spreadsheet server librar [Route("api/[controller]")] public class SpreadsheetController : Controller { - //To open excel file + // To open an Excel file [AcceptVerbs("Post")] [HttpPost] [EnableCors("AllowAllOrigins")] @@ -1162,7 +1162,7 @@ Import and export are processed in `server-side` using Spreadsheet server librar return Content(Workbook.Open(open)); } - //To save as excel file + // To save as an Excel file [AcceptVerbs("Post")] [HttpPost] [EnableCors("AllowAllOrigins")]