diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md index 97a493c27e..8d74ec17ef 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md @@ -110,3 +110,9 @@ The Spreadsheet control followed the [keyboard interaction](https://www.w3.org/W The Spreadsheet control's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. The accessibility compliance of the Spreadsheet control is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/spreadsheet.html) in a new window to evaluate the accessibility of the Spreadsheet control with accessibility tools. + +{% previewsample "https://ej2.syncfusion.com/accessibility/spreadsheet.html" %} + +## See also + +* [Accessibility in Syncfusion® ASP.NET Core components](https://ej2.syncfusion.com/aspnetcore/documentation/common/accessibility) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/cell-range.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/cell-range.md index 5fa7c090e2..e8c5a58365 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/cell-range.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/cell-range.md @@ -81,92 +81,6 @@ The following features have some limitations in Merge: * Merge with filter. * Merge with wrap text. -## Data Validation - -Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowDataValidation) property to enable or disable data validation. - -N> * The default value for `allowDataValidation` property is `true`. - -### Apply Validation - -You can apply data validation to restrict the type of data or the values that users enter into a cell. - -You can apply data validation by using one of the following ways, - -* Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item. -* Use the `addDataValidation()` method programmatically. - -### Clear Validation - -Clear validation feature is used to remove data validations from the specified ranges or the whole worksheet. - -You can clear data validation rule by one of the following ways, - -* Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item. -* Use the `removeDataValidation()` method programmatically. - -### Highlight Invalid Data - -Highlight invalid data feature is used to highlight the previously entered invalid values. - -You can highlight an invalid data by using one of the following ways, - -* Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item. -* Use the `addInvalidHighlight()` method programmatically. - -### Clear Highlighted Invalid Data - -Clear highlight feature is used to remove the highlight from invalid cells. - -You can clear the highlighted invalid data by using the following ways, - -* Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item. -* Use the `removeInvalidHighlight()` method programmatically. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/asp-net-core/data-validation/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="DataValidation.cs" %} -{% include code-snippet/spreadsheet/asp-net-core/data-validation/dataValidation.cs %} -{% endhighlight %} -{% endtabs %} - -### Custom Data validation - -The Spreadsheet supports custom data validation, allowing users to define their own validation rules for specific cells or ranges. This feature enables you to set conditions that the entered data must meet, making it particularly useful when predefined validation options, such as numbers, dates, or lists, are insufficient. - -With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet. - -For example, consider a scenario where you want to ensure that a cell contains a number between 10 and 100. To achieve this, define a validation rule using a formula that checks if the entered value is greater than 10 and less than 100. The formula for this validation is =AND(A1>10, A1<100), where A1 refers to the cell being validated. - -When this rule is applied, the Spreadsheet evaluates the entered value against the formula. If a user enters a value outside the specified range, an alert notifies them of the invalid input. This helps users correct errors efficiently and ensures that only desired values are accepted. - -You can apply custom data validation using two methods. - -* The first is through the Data Validation dialog in the Ribbon toolbar. Navigate to the Data tab, select the Data Validation option, and choose the Custom type from the Allow dropdown menu. -* The second method is programmatically, using the `addDataValidation()` method, which allows developers to set custom rules dynamically via code. - -The following code example demonstrates how to add custom data validation with a formula in a Spreadsheet. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/asp-net-core/data-validation-cs2/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="DataValidation.cs" %} -{% include code-snippet/spreadsheet/asp-net-core/data-validation-cs2/dataValidation.cs %} -{% endhighlight %} -{% endtabs %} - -### Limitations of Data validation - -The following features have some limitations in Data Validation: - -* Entire row data validation. -* Insert row between the data validation. -* Copy/paste with data validation. -* Delete cells between data validation applied range. - ## Auto Fill Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use [`allowAutoFill`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowAutoFill) property to enable/disable the auto fill support. You can also use `showFillOptions` property to enable/disable the fill option and `fillType` property to change the default auto fill option which is available in [`autoFillSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AutoFillSettings). diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/data-validation.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/data-validation.md new file mode 100644 index 0000000000..96490c8fe4 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/data-validation.md @@ -0,0 +1,96 @@ +--- +layout: post +title: Data validation in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn here all about Data validation in Syncfusion EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Data validation +documentation: ug +--- + +# Data validation in ASP.NET Core Spreadsheet component + +Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowDataValidation) property to enable or disable data validation. + + +> * The default value for `allowDataValidation` property is `true`. + +## Apply Validation + +You can apply data validation to restrict the type of data or the values that users enter into a cell. + +* **Ribbon UI:** Select the **Data** tab, then choose **Data Validation**. +* **Programmatically:** Use the [`addDataValidation`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#adddatavalidation) method. + + +## Clear Validation + +Clear validation using one of these methods: + +* **Ribbon UI:** Select the **Data** tab, then choose **Clear Validation**. +* **Programmatically:** Use the [`removeDataValidation`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#removedatavalidation) method. + + +## Highlight Invalid Data + +Highlight invalid data feature is used to highlight the previously entered invalid values. + +* **Ribbon UI:** Select the **Data** tab, then choose **Highlight Invalid Data**. +* **Programmatically:** Use the [`addInvalidHighlight`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#addinvalidhighlight) method. + + +## Clear Highlighted Invalid Data + +Clear highlight feature is used to remove the highlight from invalid cells. + +* **Ribbon UI:** Select the **Data** tab, then choose **Clear Highlight**. +* **Programmatically:** Use the [`removeInvalidHighlight`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#removeinvalidhighlight) method. + + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/data-validation/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="DataValidation.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/data-validation/dataValidation.cs %} +{% endhighlight %} +{% endtabs %} + +## Custom Data validation + +The Spreadsheet supports custom data validation, allowing users to define their own validation rules for specific cells or ranges. This feature enables you to set conditions that the entered data must meet, making it particularly useful when predefined validation options, such as numbers, dates, or lists, are insufficient. + +With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet. + +**Example:** Validate a number between 10 and 100 using the formula `=AND(A1>10, A1<100)`, where A1 is the cell being validated. The Spreadsheet evaluates entered values against the formula and displays an alert if validation fails. + +You can apply custom data validation using two methods. + +* **Ribbon UI:** Navigate to **Data** tab, select **Data Validation**, then choose **Custom** from the **Allow** dropdown. +* **Programmatically:** Use the [`addDataValidation`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#adddatavalidation) method. + +The following code example demonstrates how to add custom data validation with a formula in a Spreadsheet. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/data-validation-cs2/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="DataValidation.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/data-validation-cs2/dataValidation.cs %} +{% endhighlight %} +{% endtabs %} + +## Limitations of Data validation + +The following features have some limitations in Data Validation: + +* Entire row data validation. +* Insert row between the data validation. +* Copy/paste with data validation. +* Delete cells between data validation applied range. + +## See Also + +* [Formatting](./formatting) +* [Rows and columns](./rows-and-columns) +* [Hyperlink](./link) +* [Sorting](./sort) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/editing.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/editing.md index e3188b3266..9f737331cd 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/editing.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/editing.md @@ -12,6 +12,10 @@ documentation: ug 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowEditing) property to enable or disable the editing feature. +To get start quickly with Editing, you can check on this video: + +{% youtube "https://www.youtube.com/watch?v=o3hsPhqaZzY" %} + ## Edit cell You can start editing by one of the following ways, @@ -20,7 +24,7 @@ You can start editing by one of the following ways, * 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` method. +* Using the [`startEdit`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#startedit) method. ## Save cell @@ -28,16 +32,16 @@ If the cell is in editable state, you can save the edited cell by one of the fol * Perform mouse click on any other cell rather than the current editing cell. * Press `Enter` or `Tab` keys to save the edited cell content. -* Using the `endEdit` method. +* Using the [`endEdit`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#endedit) method. ## Cancel editing To cancel the 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` method. +* Using the [`closeEdit`](https://ej2.syncfusion.com/javascript/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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_CellEdit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeCellSave) and use `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/javascript/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/javascript/documentation/api/spreadsheet/#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#closeedit) method in spreadsheet. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -54,6 +58,10 @@ The following sample shows how to prevent the editing and cell save. Here `E` co * Text overflow in cells is not supported in Editing. +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. + ## See Also * [Cell range](./cell-range) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/events.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/events.md new file mode 100644 index 0000000000..ab7c5f4c4c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/events.md @@ -0,0 +1,152 @@ +--- +layout: post +title: Events in EJ2 ASP.NET Core Spreadsheet component | Syncfusion +description: Learn here all about the events in Syncfusion EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Events +platform: document-processing +documentation: ug +--- + +# Events in ASP.NET Core Spreadsheet Component + +The Spreadsheet component triggers events for creation, data binding, selection, editing, clipboard actions, sorting, filtering, formatting, row and column insertion or deletion, context menu and ribbon interactions, and import/export operations—enabling integration of custom logic into application workflows. + +## Action Events + +The `actionBegin` and `actionComplete` events are the primary action events in the Spreadsheet. + +The `actionBegin` event triggers when any action begins in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type, prevent specific actions from executing, and apply custom logic at the initiation of an action. + +The `actionComplete` event triggers when any action completes in the Spreadsheet and fires for all user-initiated actions, enabling you to identify the action type and apply custom logic after an action has successfully completed. + +You can identify the type of action being triggered by using the `args.action` property during both the action events. + +The following table represents the action names for which the `actionBegin` and `actionComplete` events are triggered in the Spreadsheet: + +| **Action** | **ActionBegin** | **ActionComplete** | +|--------|-------------|----------------| +| Add Data Validation | validation | validation | +| Add Defined Name | - | addDefinedName | +| Autofill | autofill | autofill | +| Autofit | resizeToFit | resizeToFit | +| Cell Delete | cellDelete | cellDelete | +| Cell Save (Edit) | cellSave | cellSave | +| Chart Design | chartDesign | chartDesign | +| Chart Deletion | deleteChart | deleteChart | +| Chart Insertion | beforeInsertChart | insertChart | +| Chart (Resize/Drag and Drop) | - | chartRefresh | +| Clear | beforeClear | clear | +| Clear Conditional Formatting | - | clearCF | +| Clear Validation | removeValidation | removeValidation | +| Clear Highlight | removeHighlight | removeHighlight | +| Clipboard (Copy) | copy | - | +| Clipboard (Cut) | cut | - | +| Clipboard (Paste) | clipboard | clipboard | +| Comment | addComment | addComment | +| Conditional Formatting | conditionalFormat | conditionalFormat | +| Delete | delete | delete | +| Delete Comment | deleteComment | deleteComment | +| Delete (Rows/Columns) | delete | delete | +| Filter | filter | filter | +| Formatting (Cell/Number) | format | format | +| Freeze Panes | freezePanes | freezePanes | +| Gridlines | gridlines | gridlines | +| Headers | headers | headers | +| Hide (Row/Column) | hideShow | hideShow | +| Highlight Invalid Data | addHighlight | addHighlight | +| Hyperlink | hyperlink | hyperlink | +| Image Deletion | deleteImage | deleteImage | +| Image Insertion | beforeInsertImage | insertImage | +| Image (Resize/Drag and Drop) | - | imageRefresh | +| Insert (Row/Column/Sheet) | insert | insert | +| Merge | merge | merge | +| Open | beforeOpen | import | +| Protect Sheet | protectSheet | protectSheet | +| Read-Only | readonly | readonly | +| Remove Defined Name | - | removeDefinedName | +| Replace | beforeReplace | replace | +| Replace All | beforeReplaceAll | replaceAll | +| Resize (Row/Column) | - | resize | +| Save | beforeSave | - | +| Sort | beforeSort | sorting | +| Sheet Duplicate | duplicateSheet | duplicateSheet | +| Sheet Hide | hideSheet | hideSheet | +| Sheet Move | moveSheet | moveSheet | +| Sheet Rename | renameSheet | renameSheet | +| Wrap | beforeWrap | wrap | + + +The following code example demonstrates how to bind the `actionBegin` and `actionComplete` events in the Spreadsheet. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/events/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="EventsController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/events/EventsController.cs %} +{% endhighlight %} +{% endtabs %} + +## Clipboard + +When performing clipboard operations such as **Cut**, **Copy**, or **Paste**, the Spreadsheet triggers specific events that allow you to monitor and manage these actions effectively. The following sections outline the event sequence and their roles. + +### Cut / Copy + +For **Cut** or **Copy** actions, only the [`actionBegin`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actionbegin) event is triggered. You can identify the action type and access the copied range by using the following properties: + +* `args.action === 'cut'` → Indicates a Cut action +* `args.action === 'copy'` → Indicates a Copy action +* `args.args.copiedRange` → Provides the range of copied cells + +### Paste + +During a **Paste** operation, events are triggered in the following sequence: + +> actionBegin → beforeCellUpdate → cellSave → actionComplete + +The table below describes each event and its role in the paste process: + +| **Event** | **Description** | **Event Arguments** | +|-----------|------------------|----------------------| +| [`actionBegin`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actionbegin) | Triggers when the paste action starts. | [`ActionBeginEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actionbegin) | +| [`beforeCellUpdate`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#beforecellupdate) | Triggers for each cell in the pasted range before it is updated, allowing you to modify cell properties or cancel the `paste` action. | [`BeforeCellUpdateArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/beforecellupdateargs) | +| [`cellSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#cellsave) | Triggers for each cell in the pasted range after the modified cell is saved. | [`CellSaveEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/cellsaveeventargs) | +| [`actionComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actioncomplete) | Triggers after all pasted cells are fully saved. | [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actioncomplete) | + +### Accessing copied and pasted ranges + +You can access the copied and pasted ranges during paste operations by using the [`actionBegin`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actionbegin) and [`actionComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actioncomplete) events. Verify the action type using: + +* `args.action === 'clipboard'` → Indicates a paste action + +Once verified, you can access the following properties: + +* `args.eventArgs.copiedRange` → The range of cells that were copied +* `args.eventArgs.pastedRange` → The range of cells where content was pasted + +## Editing + +When a cell is edited manually—such as by **double-clicking the cell**, **pressing the F2 key**, or **modifying it through the formula bar**—the Spreadsheet triggers a series of events. These events allow you to monitor and manage the entire editing process, from initiation to completion. + +The sequence of events during manual cell editing is: + +> cellEdit → cellEditing → actionBegin → beforeCellUpdate → beforeCellSave → cellSave → cellEdited → actionComplete + +The table below describes each event and its role in the editing process: + +| **Event** | **Description** | **Event Arguments** | +|-----------|------------------|----------------------| +| [`cellEdit`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#celledit) | Triggers before the cell enters edit mode. | [`CellEditEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/cellediteventargs) | +| [`cellEditing`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#cellediting) | Triggers while editing is in progress; fires for each change made to the cell content. | [`CellEditingEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/cellediteventargs) | +| [`actionBegin`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actionbegin) | Triggers when the edit action starts. | [`ActionBeginEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actionbegin) | +| [`beforeCellUpdate`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#beforecellupdate) | Triggers before any cell property (style, value, formula, etc.) is modified. | [`BeforeCellUpdateArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/beforecellupdateargs) | +| [`beforeCellSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#beforecellsave) | Triggers before the cell value is saved. | [`BeforeCellSaveEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/cellediteventargs) | +| [`cellSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#cellsave) | Triggers when the modified cell value is saved. | [`CellSaveEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/cellsaveeventargs) | +| [`cellEdited`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#celledited) | Triggers after the editing process completes. | [`CellEditedEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/cellediteventargs) | +| [`actionComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actioncomplete) | Triggers once the entire edit operation is completed. | [`ActionCompleteEventArgs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#actioncomplete) | + +## See Also + +* [Editing](./editing.md) +* [Clipboard](./clipboard.md) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/feature-list.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/feature-list.md index f2eacf9d6e..9d69c91ea5 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/feature-list.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/feature-list.md @@ -7,63 +7,70 @@ control: Feature List documentation: ug --- - # Comparison between EJ1 & EJ2 ASP.NET Core Spreadsheet features The following table compares Excel functionality with the availability of EJ1 and EJ2 Spreadsheet features. -| **Features** | **Available in EJ1 Spreadsheet** | **Available in EJ2 Spreadsheet** | **Comments** | -| --- | --- | --- | --- | -| Ribbon | Yes | Yes | - | -| Formula bar | Yes | Yes | - | -| Sheet tab | Yes | Yes | - | -| Show / Hide gridlines and header | Yes | Yes | - | -| Scrolling | Partially | Yes | - | -| Selection | Yes | Yes | - | -| Editing | Yes | Yes | - | -| Formulae | Yes | Partially | EJ2 supports limited number of [`most used formulas`](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/formulas#supported-formulas) | -| Named range | Yes | Partially | EJ2 Spreadsheet Named range supports only in workbook scope | -| Data Binding | Yes | Yes | - | -| Formatting | Yes | Yes | - | -| Context menu | Yes | Yes | - | -| Keyboard navigation | Yes | Yes | - | -| Keyboard shortcuts | Yes | Yes | - | -| Sorting | Yes | Yes | - | -| Filtering | Yes | Yes | - | -| Hyperlink | Yes | Yes | - | -| Undo & redo | Yes | Yes | - | -| Open and Save | 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. | -| Data Validation | Yes | Yes | - | -| Table | Yes | No | - | -| Chart | Yes | Yes | - | -| Image | Yes | Yes | - | -| Conditional formatting | Yes | Yes | - | -| Freeze Pane | Yes | Yes | - | -| Scaling | No | No | - | -| Print | Yes | No | - | -| Grouping | No | No | - | -| 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. | -| Protection | Yes | Partially | Custom encryption is not supported in EJ2 Spreadsheet's protect workbook. | -| Find and replace | Yes | Yes | - | -| Drag and Drop | Yes | No | - | -| Notes | Yes | No | - | -| Comments | No | No | - | -| Pivot table | Yes | No | - | -| Sparklines | Yes | No | - | -| Form controls | Yes | No | - | -| Shapes | No | No | - | -| Clear | Yes | Yes | - | +| **Features** | **Available in EJ2 Spreadsheet** | **Comments** | +| --- | --- | --- | +| Ribbon | Yes | - | +| Formula bar | Yes | - | +| Sheet tab | Yes | - | +| Show / Hide gridlines and header | Yes | - | +| Scrolling | Yes | - | +| Selection | Yes | - | +| Editing | Yes | - | +| Formulae | Partially | EJ2 supports limited number of [`most used formulas`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/formulas#supported-formulas) | +| Named range | Yes | - | +| Data Binding | Yes | - | +| Cell Formatting | Yes | - | +| Number Formatting | Yes | - | +| Context menu | Yes | - | +| Keyboard navigation | Yes | - | +| Keyboard shortcuts | Yes | - | +| Sorting | Yes | - | +| Filtering | Yes | - | +| Hyperlink | Yes | - | +| Undo & redo | Yes | - | +| Import | Yes | - | +| Export | Yes | - | +| Resize / Autofit | Yes | - | +| Clipboard | Yes | - | +| Collaborative editing | No | - | +| Wrap text | Yes | - | +| Template | Yes | - | +| Merge cells | Yes | - | +| Show / Hide rows and columns | Yes | - | +| Sheet customizations | Yes | - | +| Data Validation | Yes | - | +| Table | No | - | +| Chart | Yes | - | +| Image | Yes | - | +| Conditional formatting | Yes | - | +| Freeze Pane | Yes | - | +| Scaling | No | - | +| Print | Yes | - | +| Grouping | No | - | +| Autofill | Yes | - | +| Auto Sum | Yes | - | +| Format painter | No | - | +| Cell Style | Yes | - | +| Protection | Yes | - | +| Find and replace | Yes | - | +| Drag and Drop | Partially | EJ2 spreadsheet supports drag and drop of images and charts | +| Notes | Yes | - | +| Comments | Yes | - | +| Pivot table | No | - | +| Sparklines | No | - | +| Form controls | No | - | +| Shapes | No | - | +| Clear | Yes | - | +| Insert / Delete rows, columns and sheets | Yes | - | +| Sheet Visibility | Yes | - | +| Ribbon Customization | Yes | - | +| Theme and style options | Yes | - | +| Accessibility | Yes | - | +| Touch-Friendly Interactions | Yes | - | ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/filter.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/filter.md index 4c809f5cf2..aa49eebe4e 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/filter.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/filter.md @@ -12,27 +12,27 @@ documentation: ug Filtering helps you to view specific rows in the spreadsheet by hiding the other rows. You can use the [`allowFiltering`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property to enable or disable filtering functionality. -N> * The default value for `allowFiltering` property is `true`. +> * The default value for `allowFiltering` property is `true`. -By default, the `filter` module is injected internally into Spreadsheet to perform filtering. +By default, the `Filter` module is injected internally into Spreadsheet to perform filtering. ## Apply filter on UI -In the active Spreadsheet, select a range of cells to filter by value of the cell. The filtering can be done by any of the following ways: +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()` method programmatically. +* Use the [`applyFilter`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#applyfilter) method programmatically. * Use `Ctrl + Shift + L` keyboard shortcut to apply the filter. -N> * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog. +> * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog. ## Filter by criteria -The `applyFilter()` method will apply the filter UI, based on the predicate and range given in the arguments. +The [`applyFilter`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments. -N> * The `beforeFilter` event will be triggered before filtering the specified range. -
* The `filterComplete` event will be triggered after the filter action is completed successfully. +> * The [`beforeFilter`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforefilter) event will be triggered before filtering the specified range. +> * The [`filterComplete`](https://ej2.syncfusion.com/javascript/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. @@ -45,8 +45,6 @@ The following code example shows `filter` functionality in the Spreadsheet contr {% endhighlight %} {% endtabs %} - - ## Filter by cell value To apply a filter for a cell value, right-click the cell and choose filter -> `Filter By Selected Cell's Value` option from the menu. It applies the filter based on the value of the selected cell in the current sheet. @@ -57,7 +55,7 @@ After applying filter to a certain column, you may want to clear it to make all * Choose `Clear` option in ribbon toolbar under `Filter and Sort`. It clears the filters applied in the spreadsheet for all fields. -* Use the `clearFilter()` method programmatically, to clear the applied filters in spreadsheet for all fields. +* Use the [`clearFilter`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields. ## Clear filter on a field @@ -65,7 +63,7 @@ After filtering, you can clear/reset the filter for a field alone. It can be don * 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)` method programmatically, to clear the filter in a particular column. +* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the filter in a particular column. ## Reapply filter @@ -81,7 +79,7 @@ The following errors have been handled for filtering, ## Get data from filtered rows -Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [allowFiltering](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [allowFiltering](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property and `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://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property and [`applyFilter`](https://ej2.syncfusion.com/javascript/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. @@ -101,9 +99,14 @@ The following features have some limitations in Filter: * Insert/delete row/column between the filter applied cells. * Merge cells with filter. * Copy/cut paste the filter applied cells. +* Filter by color is not supported. + +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. ## See Also * [Sorting](./sort) * [Hyperlink](./link) -* [Undo Redo](./undo-redo) \ No newline at end of file +* [Undo Redo](./undo-redo) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formatting.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formatting.md index 7c548442fc..82565bda18 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formatting.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formatting.md @@ -7,15 +7,16 @@ control: Formatting documentation: ug --- - # Formatting in ASP.NET Core Spreadsheet Control Formatting options make your data easier to view and understand. The different types of formatting options in the Spreadsheet are, * Number Formatting * Text Formatting * Cell Formatting -* Conditional Formatting -* Rich Text Formatting + +To get start quickly with Formatting, you can check on this video: + +{% youtube "https://www.youtube.com/watch?v=AyHLgzNq6_w" %} ## Number Formatting @@ -36,13 +37,13 @@ Number formatting provides a type for your data in the Spreadsheet. Use the [`al | Text | `@` | 49 | Number formatting can be applied in following ways, -* Using the `format` property in `cell`, you can set the desired format to each cell at initial load. -* Using the `numberFormat` method, you can set the number format to a cell or range of cells. +* Using the [format](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/cell#format) property in `cell`, you can set the desired format to each cell at initial load. +* Using the [`numberFormat`](https://ej2.syncfusion.com/javascript/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. ### Custom Number Formatting -Spreadsheet supports custom number formats to display your data as numbers, dates, times, percentages, and currency values. If the pre-defined number formats do not meet your needs, you can set your own custom formats using custom number formats dialog or `numberFormat` method. +Spreadsheet supports custom number formats to display your data as numbers, dates, times, percentages, and currency values. If the pre-defined number formats do not meet your needs, you can set your own custom formats using custom number formats dialog or [`numberFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#numberformat) method. The different types of custom number format populated in the custom number format dialog are, @@ -86,7 +87,7 @@ The different types of custom number format populated in the custom number forma | Accounting | `_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)` | 43 | Custom Number formatting can be applied in following ways, -* Using the `numberFormat` method, you can set your own custom number format to a cell or range of cells. +* Using the [`numberFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#numberformat) method, you can set your own custom number format to a cell or range of cells. * Selecting the custom number format option from custom number formats dialog or type your own format in dialog input and then click apply button. It will apply the custom format for selected cells. The following code example shows the number formatting in cell data. @@ -100,11 +101,11 @@ The following code example shows the number formatting in cell data. {% endhighlight %} {% endtabs %} -## Configure culture-based custom format +## Configure Culture-specific Custom format -Previously, the custom format dialog always displayed formats using the English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version `27.1.*`, the custom format dialog will now display formats according to the applied culture. You can select a culture-based number format from the dialog or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. Then, click "Apply" to apply the culture-specific custom format to the selected cells. +Earlier, the custom format dialog always showed formats using English settings (group separator, decimal separator, and currency symbol were not updated based on the applied culture). Starting from version **27.1.\***, the dialog now displays formats according to the applied culture. You can select a culture-based number format or enter your own format using the culture-specific decimal separator, group separator, and currency symbol. After that, click **Apply** to apply the culture-specific custom format to the selected cells. -The spreadsheet allows customization of formats in the custom format dialog using the `configureLocalizedFormat` method. In this method, you need to pass a collection containing the default number format IDs and their corresponding format codes as arguments. Based on this collection, the custom format dialog will display the customized formats. You can refer to the [default number format IDs](https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.numberingformat?view=openxml-2.8.1) from the Excel built-in number format reference. +The Spreadsheet supports customizing formats in the dialog using the `configureLocalizedFormat` method. In this method, you pass a collection of default number format IDs along with their corresponding format codes. The dialog will then display the customized formats. You can refer to the [default number format IDs](https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.spreadsheet.numberingformat?view=openxml-2.8.1) from the Excel built-in number format reference. 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. @@ -113,35 +114,39 @@ Compared to Excel, the date, time, currency, and accounting formats vary across The code below illustrates how culture-based format codes are mapped to their corresponding number format ID for the `German` culture. ```csharp -List deLocaleFormats = new List() -{ - new { id = 37, code = @"#,##0;-#,##0" }, - new { id = 38, code = @"#,##0;[Red]-#,##0" }, - new { id = 39, code = @"#,##0.00;-#,##0.00" }, - new { id = 40, code = @"#,##0.00;[Red]-#,##0.00" }, - new { id = 5, code = @"#,##0 ""€"";-#,##0 ""€""" }, - new { id = 6, code = @"#,##0 ""€"";[Red]-#,##0 ""€""" }, - new { id = 7, code = @"#,##0.00 ""€"";-#,##0.00 ""€""" }, - new { id = 8, code = @"#,##0.00 ""€"";[Red]-#,##0.00 ""€""" }, - new { id = 41, code = @"_-* #,##0_-;-* #,##0_-;_-* ""-""_-;_-@_-" }, - new { id = 42, code = @"_-* #,##0 ""€""_-;-* #,##0 ""€""_-;_-* ""-"" ""€""_-;_-@_-" }, - new { id = 43, code = @"_-* #,##0.00_-;-* #,##0.00_-;_-* ""-""??_-;_-@_-" }, - new { id = 44, code = @"_-* #,##0.00 ""€""_-;-* #,##0.00 ""€""_-;_-* ""-""?? ""€""_-;_-@_-" }, - new { id = 14, code = @"dd.MM.yyyy" }, - new { id = 15, code = @"dd. MMM yy" }, - new { id = 16, code = @"dd. MMM" }, - new { id = 17, code = @"MMM yy" }, - new { id = 20, code = @"hh:mm" }, - new { id = 21, code = @"hh:mm:ss" }, - new { id = 22, code = @"dd.MM.yyyy hh:mm" } -}; -ViewBag.deLocaleFormats = deLocaleFormats; + // Culture-specific formats for "de" locale + List deLocaleFormats = new List() + { + new { id = 14, code = @"dd.MM.yyyy" }, + new { id = 15, code = @"dd. MMM yy" }, + new { id = 16, code = @"dd. MMM" }, + new { id = 17, code = @"MMM yy" }, + new { id = 20, code = @"hh:mm" }, + new { id = 21, code = @"hh:mm:ss" }, + new { id = 22, code = @"dd.MM.yyyy hh:mm" }, + new { id = 37, code = @"#,##0;-#,##0" }, + new { id = 38, code = @"#,##0;[Red]-#,##0" }, + new { id = 39, code = @"#,##0.00;-#,##0.00" }, + new { id = 40, code = @"#,##0.00;[Red]-#,##0.00" }, + new { id = 5, code = @"#,##0 ""€"";-#,##0 ""€""" }, + new { id = 6, code = @"#,##0 ""€"";[Red]-#,##0 ""€""" }, + new { id = 7, code = @"#,##0.00 ""€"";-#,##0.00 ""€""" }, + new { id = 8, code = @"#,##0.00 ""€"";[Red]-#,##0.00 ""€""" }, + new { id = 41, code = @"_-* #,##0_-;-* #,##0_-;_-* ""-""_-;_-@_-" }, + new { id = 42, code = @"_-* #,##0 ""€""_-;-* #,##0 ""€""_-;_-* ""-"" ""€""_-;_-@_-" }, + new { id = 43, code = @"_-* #,##0.00_-;-* #,##0.00_-;_-* ""-""??_-;_-@_-" }, + new { id = 44, code = @"_-* #,##0.00 ""€""_-;-* #,##0.00 ""€""_-;_-* ""-""?? ""€""_-;_-@_-" } + }; + + ViewBag.deLocaleFormats = deLocaleFormats; + + ``` The following code example demonstrates how to configure culture-based formats for different cultures in the spreadsheet. @@ -155,12 +160,14 @@ The following code example demonstrates how to configure culture-based formats f {% endhighlight %} {% endtabs %} -## Text and cell formatting +## Cell Styling and Text Formatting -Text and cell formatting enhances the look and feel of your cell. It helps to highlight a particular cell or range of cells from a whole workbook. You can apply formats like font size, font family, font color, text alignment, border etc. to a cell or range of cells. Use the [`allowCellFormatting`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowCellFormatting) property to enable or disable the text and cell formatting option in Spreadsheet. You can set the formats in following ways, -* Using the `style` property, you can set formats to each cell at initial load. -* Using the `cellFormat` method, you can set formats to a cell or range of cells. -* You can also apply by clicking the desired format option from the ribbon toolbar. +Text and cell formatting improves the appearance of your spreadsheet and helps highlight specific cells or ranges. You can apply formats such as font size, font family, font color, text alignment, borders, and more. Use the [`allowCellFormatting`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowCellFormatting) property to enable or disable text and cell formatting in the Spreadsheet. + +You can set formats in the following ways: +* Use the [style](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Cell.html#Syncfusion_EJ2_Spreadsheet_Cell_Style) property to apply formats to each cell during the initial load. +* Use the [`cellFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#cellformat) method to apply formats to a cell or range of cells dynamically. +* Apply formatting directly by clicking the desired format option from the ribbon toolbar. ### Fonts @@ -168,15 +175,15 @@ 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`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.TextAlign.html) and [verticalAlign](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.VerticalAlign.html) property. ### 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, you can change the indentation of a cell content using [textIndent](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.CellStyleModel.html#Syncfusion_EJ2_Spreadsheet_CellStyleModel_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 cell or range of cells from whole workbook you can apply background color for a cell using [backgroundColor](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.CellStyleModel.html#Syncfusion_EJ2_Spreadsheet_CellStyleModel_BackgroundColor) property. ### Borders @@ -184,32 +191,32 @@ You can add borders around a cell or range of cells to define a section of works | Types | Actions | |-------|---------| -| Top Border | Specifies the top border of a cell or range of cells.| -| Left Border | Specifies the left border of a cell or range of cells.| -| 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.| -| 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.| +| **Top Border** | Specifies the top border of a cell or range of cells.| +| **Left Border** | Specifies the left border of a cell or range of cells.| +| **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.| +| **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, | Types | Actions | |-------|---------| -| Thin | Specifies the `1px` border size (default).| -| Medium | Specifies the `2px` border size.| -| Thick | Specifies the `3px` border size.| -| Solid | Used to create the `solid` border (default).| -| Dashed | Used to create the `dashed` border.| -| Dotted | Used to create the `dotted` border.| -| Double | Used to create the `double` border.| +| **Thin** | Specifies the `1px` border size (default).| +| **Medium** | Specifies the `2px` border size.| +| **Thick** | Specifies the `3px` border size.| +| **Solid** | Used to create the `solid` border (default).| +| **Dashed** | Used to create the `dashed` border.| +| **Dotted** | Used to create the `dotted` border.| +| **Double** | Used to create the `double` border.| Borders can be applied in the following ways, * Using the `border`, `borderLeft`, `borderRight`, `borderBottom` properties, you can set the desired border to each cell at initial load. -* Using the `setBorder` method, you can set various border options to a cell or range of cells. +* Using the [setBorder](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#setborder) method, you can set various border options to a cell or range of cells. * Selecting the border options from ribbon toolbar. The following code example shows the style formatting in text and cells of the spreadsheet. @@ -223,8 +230,6 @@ The following code example shows the style formatting in text and cells of the s {% endhighlight %} {% endtabs %} - - ### Limitations of Formatting The following features are not supported in Formatting: @@ -234,16 +239,16 @@ The following features are not supported in Formatting: ## Conditional Formatting -Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the `allowConditionalFormat` property. +Conditional formatting helps you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the [`allowConditionalFormat`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowConditionalFormat) property. -N> * The default value for the `allowConditionalFormat` property is `true`. +> * The default value for the `allowConditionalFormat` property is `true`. ### Apply Conditional Formatting 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` method to define the condition. +* Using the [`conditionalFormat()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#conditionalformat) method to define the condition. * Using the `conditionalFormats` in sheets model. Conditional formatting has the following types in the spreadsheet, @@ -254,15 +259,15 @@ Highlight cells rules option in the conditional formatting enables you to highli The following options can be given for the highlight cells rules as type, -N>* 'GreaterThan', 'LessThan', 'Between', 'EqualTo', 'ContainsText', 'DateOccur', 'Duplicate', 'Unique'. +>* `GreaterThan`, `LessThan`, `Between`, `EqualTo`, `ContainsText`, `DateOccur`, `Duplicate`, `Unique`. The following preset colors can be used for formatting styles, -N>* `"RedFT"` - Light Red Fill with Dark Red Text, -
* `"YellowFT"` - Yellow Fill with Dark Yellow Text, -
* `"GreenFT"` - Green Fill with Dark Green Tex/t, -
* `"RedF"` - Red Fill, -
* `"RedT"` - Red Text. +>* `"RedFT"` - Light Red Fill with Dark Red Text, +>* `"YellowFT"` - Yellow Fill with Dark Yellow Text, +>* `"GreenFT"` - Green Fill with Dark Green Text, +>* `"RedF"` - Red Fill, +>* `"RedT"` - Red Text. ### Top bottom rules @@ -270,7 +275,7 @@ Top bottom rules option in the conditional formatting allows you to apply format The following options can be given for the top bottom rules as type, -N>* 'Top10Items', 'Bottom10Items', 'Top10Percentage', 'Bottom10Percentage', 'BelowAverage', 'AboveAverage'. +>* `Top10Items`, `Bottom10Items`, `Top10Percentage`, `Bottom10Percentage`, `BelowAverage`, `AboveAverage`. ### Data Bars @@ -278,7 +283,7 @@ You can apply data bars to represent the data graphically inside a cell. The lon The following options can be given for the data bars as type, -N>* 'BlueDataBar', 'GreenDataBar', 'RedDataBar', 'OrangeDataBar', 'LightBlueDataBar', 'PurpleDataBar'. +>* `BlueDataBar`, `GreenDataBar`, `RedDataBar`, `OrangeDataBar`, `LightBlueDataBar`, `PurpleDataBar`. ### Color Scales @@ -286,7 +291,7 @@ Using color scales, you can format your cells with two or three colors, where di The following options can be given for the color scales as type, -N>* 'GYRColorScale', 'RYGColorScale', 'GWRColorScale', 'RWGColorScale', 'BWRColorScale', 'RWBColorScale', 'WRColorScale', 'RWColorScale', 'GWColorScale', 'WGColorScale', 'GYColorScale', 'YGColorScale'. +>* `GYRColorScale`, `RYGColorScale`, `GWRColorScale`, `RWGColorScale`, `BWRColorScale`, `RWBColorScale`, `WRColorScale`, `RWColorScale`, `GWColorScale`, `WGColorScale`, `GYColorScale`, `YGColorScale`. ### Icon Sets @@ -294,22 +299,22 @@ Icon sets will help you to visually represent your data with icons. Every icon r The following options can be given for the icon sets as type, -N>* 'ThreeArrows', 'ThreeArrowsGray', 'FourArrowsGray', 'FourArrows', 'FiveArrowsGray', 'FiveArrows', 'ThreeTrafficLights1', 'ThreeTrafficLights2', 'ThreeSigns', 'FourTrafficLights', 'FourRedToBlack', 'ThreeSymbols', 'ThreeSymbols2', 'ThreeFlags', 'FourRating', 'FiveQuarters', 'FiveRating', 'ThreeTriangles', 'ThreeStars', 'FiveBoxes'. +>* `ThreeArrows`, `ThreeArrowsGray`, `FourArrowsGray`, `FourArrows`, `FiveArrowsGray`, `FiveArrows`, `ThreeTrafficLights1`, `ThreeTrafficLights2`, `ThreeSigns`, `FourTrafficLights`, `FourRedToBlack`, `ThreeSymbols`, `ThreeSymbols2`, `ThreeFlags`, `FourRating`, `FiveQuarters`, `FiveRating`, `ThreeTriangles`, `ThreeStars`, `FiveBoxes`. ### Custom Format -Using custom format for conditional formatting you can set cell styles like color, background color, font style, font weight and underline. +Using the custom format for conditional formatting you can set cell styles like color, background color, font style, font weight, and underline. In the MAY and JUN columns, we have applied conditional formatting custom format. -N> * In the Conditional format, custom format supported for Highlight cells rules and Top bottom rules. +>* In the Conditional format, custom format supported for **Highlight cell rules** and **Top bottom rules**. ### Clear Rules 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 `clearConditionalFormat` method to clear the defined rules. +* 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 [`clearConditionalFormat`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#clearconditionalformat) method to clear the defined rules. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -320,8 +325,6 @@ You can clear the defined rules by using one of the following ways, {% endhighlight %} {% endtabs %} - - ### Limitations of Conditional formatting The following features have some limitations in Conditional Formatting: @@ -331,79 +334,9 @@ The following features have some limitations in Conditional Formatting: * Copy and paste the conditional formatting applied cells. * Custom rule support. -## Rich Text Formatting - -Rich text formatting allows you to apply different styles to specific portions of text within a single cell to improve readability and presentation. Currently, subscript and superscript formatting are supported, and other rich text font styles are not supported. - -In the **ASP.NET Core Spreadsheet**, rich text formatting is supported through the `richText` property of the cell model. This property lets you define multiple text segments inside a cell, where each segment can have its own style. - -Each `richText` segment contains: - -- `text` – Specifies the content of the segment -- `style` – Defines formatting using the cell style model - -## Subscript and Superscript - -Subscript and superscript formatting are supported as part of rich text formatting and can be applied to specific portions of text within a cell. - -To apply these formats, use the `verticalAlign` property within the style of a rich text segment: - -Set `verticalAlign: 'super'` for superscript and `verticalAlign: 'sub'` for subscript. - -#### How to Apply Subscript and Superscript - -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. - -![Subscript and superscript in Spreadsheet](./images/spreadsheet_richtext.gif) - -2. You can define the `richText` property directly while initializing the Spreadsheet. This is useful when you want the formatting to be applied when the data is loaded. - -```csharp -cells: new List() -{ - new { - value = "H2O", - richText = new List() - { - new { text = "H" }, - new { text = "2", style = new { verticalAlign = "sub" } }, - new { text = "O" } - } - } -} -``` - -3. You can also apply subscript and superscript dynamically using the `updateCell` method. - -```csharp -spreadsheet.updateCell( -{ - value: 'X2', - richText: [ - { text: 'X' }, - { text: '2', style: { verticalAlign: 'super' } } - ] -}, -'A5' -); -``` - -The following code example shows the subscript and superscript formatting in cells of the spreadsheet. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/spreadsheet/asp-net-core/richtext-format/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="RichTextController.cs" %} -{% include code-snippet/spreadsheet/asp-net-core/richtext-format/richTextFormat.cs %} -{% endhighlight %} -{% endtabs %} +## Note -## Limitations -* **Limited formatting support:** Only subscript and superscript formatting are supported within rich text. Other formatting options such as font size, font color, and font weight are not supported. -* **Edit mode requirement:** Formatting can be applied only while the cell is in edit mode. Selecting text outside of edit mode does not support subscript or superscript formatting. +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formulas.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formulas.md index 481f40a2da..9d798092e8 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formulas.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formulas.md @@ -10,26 +10,26 @@ documentation: ug # Formulas in ASP.NET Core Spreadsheet control -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 perform calculations on data in a worksheet. You can refer the cell reference from same sheet or from different sheets. ## Usage -You can set formula for a cell in the following ways, +You can set a 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. +* Using the [formula](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Cell.html#Syncfusion_EJ2_Spreadsheet_Cell_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` method, you can set or update the cell formula. +* Using the [`updateCell`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#updatecell) method, you can set or update the cell formula. -## Culture-Based Argument Separator +## Culture-Specific Formula Separators -Previously, although you could import culture-based Excel files into the Spreadsheet control, the formulas wouldn't calculate correctly. This was due to the absence of culture-based argument separators and support for culture-based formatted numeric values as arguments. However, starting from version 25.1.35, you can now import culture-based Excel files into the Spreadsheet component. +In earlier versions, even though culture-based Excel files could be imported into the Spreadsheet component, formulas did not calculate correctly. This happened because culture-based argument separators and support for culture-based formatted numeric values were not available. Starting from version **25.1.35**, you can now import culture-based Excel files into the Spreadsheet component with proper support. -> Before importing culture-based Excel files, ensure that the Spreadsheet control is rendered with the corresponding culture. Additionally, launch the import/export services with the same culture to ensure compatibility. +> Before importing culture-based Excel files, make sure the Spreadsheet component is rendered with the matching culture. Also, start 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://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ListSeparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ListSeparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ListSeparator) property will be updated based on the culture of the launched import/export service. -In the example below, the Spreadsheet control 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. +In the example below, the Spreadsheet component is rendered with the **German culture[de]**. The example also shows how to set the culture-based argument separator and use culture-based formatted numeric values as arguments in formulas. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -42,11 +42,11 @@ In the example below, the Spreadsheet control is rendered with the `German cultu ## Create User Defined Functions / Custom Functions -The Spreadsheet includes a number of built-in formulas. For your convenience, a list of supported formulas can be found [here](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/formulas#supported-formulas). +The Spreadsheet includes a set of built-in formulas. For convenience, you can find the list of supported formulas [here](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/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` 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 also define and use formulas that are not supported by default, known as **user defined/custom formulas**, by using the [addCustomFunction](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#addcustomfunction) function. Keep in mind that a user defined/custom formula should return only a single value. If the formula returns an array, updating adjacent cell values will take more time and may affect performance. -The following code example shows an unsupported formula in the spreadsheet. +The following code example shows how to use an unsupported formula in the Spreadsheet. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -57,7 +57,7 @@ The following code example shows an unsupported formula in the spreadsheet. {% endhighlight %} {% endtabs %} -Second, if you want to directly compute any formula or expression, you can use the `computeExpression` method. This method will work for both built-in and used-defined/custom formula. +To directly compute a formula or expression, use the [computeExpression](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#computeexpression) method. This method will work for both built-in and used-defined/custom formula. The following code example shows how to use `computeExpression` method in the spreadsheet. @@ -70,20 +70,21 @@ The following code example shows how to use `computeExpression` method in the sp {% endhighlight %} {% endtabs %} -## Formula bar +## 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ShowFormulaBar) property to enable or disable the formula bar. +The formula bar is used to enter or edit cell data more easily. By default, the formula bar is enabled in the spreadsheet. Use the [`showFormulaBar`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_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 assign a meaningful name to a cell range and then use that name in formulas for calculation. This makes formulas easier to read, understand, and maintain. Named ranges can be added to the Spreadsheet in several ways: -* Using the [`definedNames`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_DefinedNames) collection, you can add multiple named ranges at initial load. -* Use the `addDefinedName` method to add a named range dynamically. -* You can remove an added named range dynamically using the `removeDefinedName` method. -* Select the range of cells, and then enter the name for the selected range in the name box. +* Use the [`definedNames`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_DefinedNames) collection to add multiple named ranges during the initial load. +* Use the [`addDefinedName`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#adddefinedname) method to add a named range dynamically at runtime. +* Remove a named range dynamically using the [`removeDefinedName`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#removedefinedname) method. +* Select a range of cells and enter a name for the selected range directly in the **Name Box**. + +The following code example demonstrates how named ranges can be defined and used in formulas within the Spreadsheet. -The following code example shows the usage of named ranges support. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -96,18 +97,20 @@ The following code example shows the usage of named ranges support. ## Calculation Mode -The Spreadsheet provides a `Calculation Mode` feature like the calculation options in online Excel. This feature allows you to control when and how formulas are recalculated in the spreadsheet. The available modes are: +The Spreadsheet provides a **Calculation Mode** feature similar to the calculation options in online Excel. This feature lets you control when and how formulas are recalculated in the spreadsheet. The available modes are: -* `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`. +* **Automatic**: Formulas recalculate instantly whenever a change is made in dependent cells. +* **Manual**: Formulas recalculate only when explicitly triggered by the user using options like **Calculate Sheet** or **Calculate Workbook**. -You can configure the calculate mode using the [`calculationMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_CalculationMode) property of the Spreadsheet. These modes offer flexibility to balance real-time updates and performance optimization. +You can configure the calculation mode using the [`calculationMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_CalculationMode) property of the Spreadsheet. These modes give flexibility to 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. +In **Automatic Mode**, formulas are recalculated immediately whenever a dependent cell is changed. This mode is ideal for situations where real-time updates are important, ensuring that users always see the latest results without needing extra steps. + +For example, if cell `C1` contains the formula `=A1+B1`, any change in `A1` or `B1` will instantly update the value in `C1`. No manual action is required. -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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_CalculationMode) property to `Automatic`. +You can enable this mode by setting the [`calculationMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_CalculationMode) property to `Automatic`. The following code example demonstrates how to set the Automatic calculation mode in a Spreadsheet. @@ -122,11 +125,12 @@ The following code example demonstrates how to set the Automatic calculation mod ### Manual Mode -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. +In **Manual Mode**, formulas are not recalculated automatically when cell values change. Instead, recalculation must be triggered explicitly. This mode is useful when performance optimization is important, such as working with large datasets or formulas that require heavy computation. -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, if cell `C1` contains the formula `=A1+B1`, changing the values in `A1` or `B1` will not update `C1` automatically. The recalculation must be initiated manually using either the `Calculate Sheet` or `Calculate Workbook` option. -* `Calculate Sheet`: Recalculates formulas for the active sheet only. +The Spreadsheet provides two manual recalculation options: +* `Calculate Sheet`: Recalculates formulas only in the active sheet. * `Calculate Workbook`: Recalculates formulas across all sheets in the workbook. The following code example demonstrates how to set the Manual calculation mode in a Spreadsheet. @@ -142,68 +146,25 @@ The following code example demonstrates how to set the Manual calculation mode i ## Supported Formulas -The following are the list of formulas supported in spreadsheet, +The Spreadsheet component supports a comprehensive set of built-in formulas organized by category. Each formula can be used for calculations, data analysis, text manipulation, date operations, and logical evaluations. + +### Math & Trigonometry | Formula | Description | -|-------|---------| +|---------|-------------| | ABS | Returns the value of a number without its sign. | -| ADDRESS | Returns a cell reference as text, given specified row and column numbers. | -| AND | Returns TRUE if all the arguments are TRUE, otherwise returns FALSE. | -| AVERAGE | Calculates average for the series of numbers and/or cells excluding text. | -| AVERAGEA | Calculates the average for the cells evaluating TRUE as 1, text and FALSE as 0. | -| AVERAGEIF | Clears content of the active cell and enables edit mode. | -| AVERAGEIFS | Calculates average for the cells based on specified conditions. | | CEILING | Rounds a number up to the nearest multiple of a given factor. | -| CHOOSE | Returns a value from list of values, based on index number. | -| CHAR | Returns the character from the specified number. | -| CODE | Returns the numeric code for the first character in a given string. | -| CONCAT | Concatenates a list or a range of text strings. | -| CONCATENATE | Combines two or more strings together. | -| COUNT | Counts the cells that contain numeric values in a range. | -| COUNTA | Counts the cells that contains values in a range. | -| COUNTBLANK | Returns the number of empty cells in a specified range of cells. | -| COUNTIF | Counts the cells based on specified condition. | -| COUNTIFS | Counts the cells based on specified conditions. | -| DATE | Returns the date based on given year, month, and day. | -| DATEVALUE | Converts a date string into date value. | -| DAY | Returns the day from the given date. | -| DAYS | Returns the number of days between two dates. | | DECIMAL | Converts a text representation of a number in a given base into a decimal number. | | DEGREES | Converts radians to degrees. | -| DOLLAR | Converts the number to currency formatted text. | -| EDATE | Returns a date with given number of months before or after the specified date. | -| EOMONTH | Returns the last day of the month that is a specified number of months before or after an initially supplied start date. | | EVEN | Rounds a positive number up and negative number down to the nearest even integer. | -| EXACT | Checks whether a two text strings are exactly same and returns TRUE or FALSE. | | EXP | Returns e raised to the power of the given number. | | FACT | Returns the factorial of a number. | -| FIND | Returns the position of a string within another string, which is case sensitive.| | FLOOR | Rounds a number down to the nearest multiple of a given factor. | -| HLOOKUP | Looks for a value in the top row of the array of values and then returns a value in the same column from a row in the array that you specify. | -| HOUR | Returns the number of hours in a specified time string. | -| IF | Returns value based on the given expression. | -| IFERROR | Returns value if no error found else it will return specified value. | -| IFS | Returns value based on the given multiple expressions. | -| INDEX | Returns a value of the cell in a given range based on row and column number. | | INT | Rounds a number down to the nearest integer. | -| INTERCEPT | Calculates the point of the Y-intercept line via linear regression. | -| ISNUMBER | Returns true when the value parses as a numeric value. | -| LARGE | Returns the `k-th` largest value in a given array. | -| LEN | Returns a number of characters in a given string. | | LN | Returns the natural logarithm of a number. | | LOG | Returns the logarithm of a number to the base that you specify. | -| LOOKUP | Looks for a value in a one-row or one-column range, then returns a value from the same position in a second one-row or one-column range. | -| MATCH | Returns the relative position of a specified value in given range. | -| MAX | Returns the largest number of the given arguments. | -| MEDIAN | Returns the median of the given set of numbers. | -| MINUTE | Returns the number of minutes in a specified time string. | -| MIN | Returns the smallest number of the given arguments. | | MOD | Returns a remainder after a number is divided by divisor. | -| MONTH | Returns the number of months in a specified date string. | -| NOT | Returns the inverse of a given logical expression. | -| NOW | Returns the current date and time. | | ODD | Rounds a positive number up and negative number down to the nearest odd integer. | -| OR | Returns TRUE if any of the arguments are TRUE, otherwise returns FALSE. | | PI | Returns the value of pi. | | POWER | Returns the result of a number raised to power. | | PRODUCT | Multiplies a series of numbers and/or cells. | @@ -213,24 +174,106 @@ The following are the list of formulas supported in spreadsheet, | ROUND | Rounds a number to the specified number of digits. | | ROUNDDOWN | Rounds a number down, toward zero. | | ROUNDUP | Rounds a number up, away from zero. | -| RSQ | Returns the square of the Pearson product moment correlation coefficient based on data points in known_y's and known_x's. | -| SECOND | Returns the number of seconds in a specified time string. | -| SMALL | Returns the `k-th` smallest value in a given array. | -| SLOPE | Returns the slope of the line from linear regression of the data points. | -| SORT | Sorts the contents of a column, range, or array in ascending or descending order. | | SQRT | Returns the square root of a positive number. | -| SUBTOTAL | Returns subtotal for a range using the given function number. | +| TRUNC | Truncates a supplied number to a specified number of decimal places. | + + +### Statistical & Aggregate + +| Formula | Description | +|---------|-------------| +| AVERAGE | Calculates average for the series of numbers and/or cells excluding text. | +| AVERAGEA | Calculates the average for the cells evaluating TRUE as 1, text and FALSE as 0. | +| AVERAGEIF | Calculates the average of cells that meet a specified condition. | +| AVERAGEIFS | Calculates average for cells based on multiple specified conditions. | +| COUNT | Counts the cells that contain numeric values in a range. | +| COUNTA | Counts the cells that contain values in a range. | +| COUNTBLANK | Returns the number of empty cells in a specified range of cells. | +| COUNTIF | Counts the cells based on a specified condition. | +| COUNTIFS | Counts the cells based on multiple specified conditions. | +| GEOMEAN | Returns the geometric mean of a given array or range of positive data. | +| INTERCEPT | Calculates the point of the Y-intercept line via linear regression. | +| LARGE | Returns the `k-th` largest value in a given array. | +| MAX | Returns the largest number of the given arguments. | +| MEDIAN | Returns the median of the given set of numbers. | +| MIN | Returns the smallest number of the given arguments. | +| RSQ | Returns the square of the Pearson product moment correlation coefficient based on data points. | +| SLOPE | Returns the slope of the line from linear regression of the data points. | +| SMALL | Returns the `k-th` smallest value in a given array. | | SUM | Adds a series of numbers and/or cells. | -| SUMIF | Adds the cells based on specified condition. | -| SUMIFS | Adds the cells based on specified conditions. | -| SUMPRODUCT | Returns the sum of the products of the corresponding array in given arrays. | -| T | Checks whether a value is text or not and returns the text. | -| TEXT | Converts the supplied value into text by using the user-specified format. | +| SUMIF | Adds the cells based on a specified condition. | +| SUMIFS | Adds the cells based on multiple specified conditions. | +| SUMPRODUCT | Returns the sum of the products of corresponding arrays in given arrays. | +| SUBTOTAL | Returns subtotal for a range using the given function number. | + + +### Date & Time + +| Formula | Description | +|---------|-------------| +| DATE | Returns the date based on given year, month, and day. | +| DATEVALUE | Converts a date string into date value. | +| DAY | Returns the day from the given date. | +| DAYS | Returns the number of days between two dates. | +| EDATE | Returns a date with given number of months before or after the specified date. | +| EOMONTH | Returns the last day of the month that is a specified number of months before or after a start date. | +| HOUR | Returns the number of hours in a specified time string. | +| MINUTE | Returns the number of minutes in a specified time string. | +| MONTH | Returns the number of months in a specified date string. | +| NOW | Returns the current date and time. | +| SECOND | Returns the number of seconds in a specified time string. | | TIME | Converts hours, minutes, seconds to the time formatted text. | | TODAY | Returns the current date. | -| TRUNC | Truncates a supplied number to a specified number of decimal places. | -| UNIQUE | Returns a unique values from a range or array. | -| VLOOKUP | Looks for a specific value in the first column of a lookup range and returns a corresponding value from a different column within the same row. | +| WEEKDAY | Returns the day of the week for a specified date. | + +### Logical + +| Formula | Description | +|---------|-------------| +| AND | Returns TRUE if all the arguments are TRUE, otherwise returns FALSE. | +| IF | Returns value based on the given expression. | +| IFERROR | Returns value if no error found; else returns specified value. | +| IFS | Returns value based on multiple given expressions. | +| NOT | Returns the inverse of a given logical expression. | +| OR | Returns TRUE if any of the arguments are TRUE, otherwise returns FALSE. | + + +### Lookup & Reference + +| Formula | Description | +|---------|-------------| +| ADDRESS | Returns a cell reference as text, given specified row and column numbers. | +| CHOOSE | Returns a value from list of values, based on index number. | +| HLOOKUP | Looks for a value in the top row of an array and returns a value in the same column from a specified row. | +| INDEX | Returns a value of the cell in a given range based on row and column number. | +| LOOKUP | Looks for a value in a one-row or one-column range, then returns a value from the same position in another range. | +| MATCH | Returns the relative position of a specified value in a given range. | +| SORT | Sorts the contents of a column, range, or array in ascending or descending order. | +| UNIQUE | Returns unique values from a range or array. | +| VLOOKUP | Looks for a value in the first column of a lookup range and returns a corresponding value from a different column. | + +### Text + +| Formula | Description | +|---------|-------------| +| CHAR | Returns the character from the specified number. | +| CODE | Returns the numeric code for the first character in a given string. | +| CONCAT | Concatenates a list or a range of text strings. | +| CONCATENATE | Combines two or more strings together. | +| DOLLAR | Converts the number to currency formatted text. | +| EXACT | Checks whether two text strings are exactly the same and returns TRUE or FALSE. | +| FIND | Returns the position of a string within another string (case sensitive). | +| LEN | Returns the number of characters in a given string. | +| PROPER | Converts text to proper case (first letter capitalized). | +| T | Checks whether a value is text or not and returns the text. | +| TEXT | Converts the supplied value into text by using the user-specified format. | + +### Information + +| Formula | Description | +|---------|-------------| +| ISNUMBER | Returns true when the value parses as a numeric value; otherwise returns false. | + ## Formula Error Dialog @@ -238,18 +281,22 @@ If you enter an invalid formula in a cell, an error dialog with an error message | Error Message | Reason | |-------|---------| -| We found that you typed a formula with an invalid arguments | Occurs when passing an argument even though it wasn't needed. | -| We found that you typed a formula with an empty expression | Occurs when passing an empty expression in the argument. | -| We found that you typed a formula with one or more missing opening or closing parenthesis | Occurs when an open parenthesis or a close parenthesis is missing. | -| We found that you typed a formula which is improper | Occurs when passing a single reference but a range was needed. | -| We found that you typed a formula with a wrong number of arguments | Occurs when the required arguments were not passed. | -| We found that you typed a formula which requires 3 arguments | Occurs when the required 3 arguments were not passed. | -| We found that you typed a formula with a mismatched quotes | Occurs when passing an argument with mismatched quotes. | -| We found that you typed a formula with a circular reference | Occurs when passing a formula with circular cell reference. | -| We found that you typed a formula which is invalid | Except in the cases mentioned above, all other errors will fall into this broad category. | +| `We found that you typed a formula with an invalid arguments` | Occurs when passing an argument even though it wasn't needed. | +| `We found that you typed a formula with an empty expression` | Occurs when passing an empty expression in the argument. | +| `We found that you typed a formula with one or more missing opening or closing parenthesis` | Occurs when an open parenthesis or a close parenthesis is missing. | +| `We found that you typed a formula which is improper` | Occurs when passing a single reference but a range was needed. | +| `We found that you typed a formula with a wrong number of arguments` | Occurs when the required arguments were not passed. | +| `We found that you typed a formula which requires 3 arguments` | Occurs when the required 3 arguments were not passed. | +| `We found that you typed a formula with a mismatched quotes` | Occurs when passing an argument with mismatched quotes. | +| `We found that you typed a formula with a circular reference` | Occurs when passing a formula with circular cell reference. | +| `We found that you typed a formula which is invalid` | Except in the cases mentioned above, all other errors will fall into this broad category. | ![Formula Alert Dialog](./images/formula-alert-dialog.png) +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. + ## See Also * [Editing](./editing) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/freeze-pane.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/freeze-pane.md index 3d753cc451..b569c8ad14 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/freeze-pane.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/freeze-pane.md @@ -10,7 +10,13 @@ documentation: ug # FreezePanes in ASP.NET Core Spreadsheet control -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` and `frozenColumns` properties inside the [`Sheet`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Sheets) property. +**Freeze Panes** helps you keep specific rows or columns visible while scrolling through the sheet content. This makes it easier to work with large spreadsheets without losing track of important headers or labels. + +You can set the number of frozen rows and columns using the [`frozenRows`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Sheet.html#Syncfusion_EJ2_Spreadsheet_Sheet_FrozenRows) and [`frozenColumns`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Sheet.html#Syncfusion_EJ2_Spreadsheet_Sheet_FrozenColumns) properties inside the [`Sheet`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Sheet.html) property. + +To quickly get started with Freeze Panes in ASP.NET Core Spreadsheet, you can check out this video tutorial: + +{% youtube "https://www.youtube.com/watch?v=TX4P6gFymwo" %} ## Apply freeze panes on UI @@ -19,7 +25,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` method programmatically. +* Use the [`freezePanes`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#freezepanes) method programmatically. ## FrozenRows @@ -38,12 +44,13 @@ It allows you to keep a certain number of columns visible while scrolling horizo **User Interface**: -In the active spreadsheet, select the cell where you want to create frozen columns. Frozen columns can be done in any one of the following ways: +In the active spreadsheet, you can freeze columns by selecting the cell where you want them to remain visible. Frozen columns can be applied in the following ways: + +* Go to the **View** tab in the Ribbon toolbar and choose the **Freeze Columns** option. +* Set the number of frozen columns using the [`frozenColumns`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Sheet.html#Syncfusion_EJ2_Spreadsheet_Sheet_FrozenColumns) property inside the [Sheet](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Sheet.html) property. -* Select the View tab in the Ribbon toolbar and choose the `Freeze Columns` item. -* You can specify the number of frozen columns using the `frozenColumns` property inside the `Sheet` property. +In this demo, `frozenColumns` is set to **2** and `frozenRows` is set to **2**. As a result, the first two columns on the left and the top two rows remain frozen while scrolling. -In this demo, the frozenColumns is set as ‘2’, and the frozenRows is set as ‘2’. Hence, the two columns on the left and the top two rows are frozen. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -54,15 +61,17 @@ In this demo, the frozenColumns is set as ‘2’, and the frozenRows is set as {% endhighlight %} {% endtabs %} - - ## Limitations -Freeze Panes feature is not compatible with all the features which are available in the spreadsheet. Below features are not compatible with Freeze Panes feature. +Here, we have listed out the limitations with Freeze Panes feature. -* Merging the cells between freeze and unfreeze area. +* Merging cells between the freeze and unfreeze areas is not supported. * If images and charts are added inside the freeze area cells, their portion in the unfreeze area will not move when scrolling. +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. + ## See Also * [Sorting](./sort) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/global-local.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/global-local.md index 96e2d1f3c0..b0ec5ed4ba 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/global-local.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/global-local.md @@ -11,372 +11,373 @@ documentation: ug ## Localization -The [Localization](https://ej2.syncfusion.com/aspnetcore/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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Locale) value and translation object. +The [`Localization`](https://ej2.syncfusion.com/aspnetcore/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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Locale) value and translation object. The following list of properties and their values are used in the Spreadsheet. -|Locale keywords|Text| -|---------------|----| -Cut | Cut -Copy | Copy -Paste | Paste -PasteSpecial | Paste Special -All | All -Values | Values -Formats | Formats -Font | Font -FontSize | Font Size -Bold | Bold -Italic | Italic -Underline | Underline -Strikethrough | Strikethrough -TextColor | Text Color -FillColor | Fill Color -HorizontalAlignment | Horizontal Alignment -AlignLeft | Align Left -AlignCenter | Center -AlignRight | Align Right -VerticalAlignment | Vertical Alignment -AlignTop | Align Top -AlignMiddle | Align Middle -AlignBottom | Align Bottom -InsertFunction | Insert Function -Insert | Insert -Delete | Delete -Rename | Rename -Hide | Hide -Unhide | Unhide -NameBox | Name Box -ShowHeaders | Show Headers -HideHeaders | Hide Headers -ShowGridLines | Show Gridlines -HideGridLines | Hide Gridlines -AddSheet | Add Sheet -ListAllSheets | List All Sheets -FullScreen | Full Screen -CollapseToolbar | Collapse Toolbar -ExpandToolbar | Expand Toolbar -CollapseFormulaBar | Collapse Formula Bar -ExpandFormulaBar | Expand Formula Bar -File | File -Home | Home -Formulas | Formulas -View | View -New | New -Open | Open -SaveAs | Save As -ExcelXlsx | Microsoft Excel -ExcelXls | Microsoft Excel 97-2003 -CSV | Comma-separated values -FormulaBar | Formula Bar -Ok | Ok -Close | Close -Cancel | Cancel -Apply | Apply -MoreColors | More Colors -StandardColors | Standard Colors -General | General -Number | Number -Currency | Currency -Accounting | Accounting -ShortDate | Short Date -LongDate | Long Date -Time | Time -Percentage | Percentage -Fraction | Fraction -Scientific | Scientific -Text | Text -NumberFormat | Number Format -MobileFormulaBarPlaceHolder | Enter value or Formula -PasteAlert | You can't paste it here because the copy area and paste area aren't in the same size. Try pasting in a different range. -DestroyAlert | Are you sure you want to destroy the current workbook without saving and create a new workbook? -SheetRenameInvalidAlert | Sheet name contains invalid character. -SheetRenameEmptyAlert | Sheet name cannot be empty. -SheetRenameAlreadyExistsAlert | Sheet name already exists. Enter another name. -DeleteSheetAlert | Are you sure you want to delete this sheet? -DeleteSingleLastSheetAlert | A Workbook must contain at least one visible worksheet. -PickACategory | Pick a category -Description | Description -UnsupportedFile | Unsupported File -InvalidUrl | Invalid Url -SUM | Adds a series of numbers and/or cells. -SUMIF | Adds the cells based on the specified condition. -SUMIFS | Adds the cells based on the specified conditions. -ABS | Returns the value of a number without its sign. -RAND | Returns a random number between 0 and 1. -RANDBETWEEN | Returns a random integer based on the specified values. -FLOOR | Rounds a number down to the nearest multiple of a given factor. -CEILING | Rounds a number up to the nearest multiple of a given factor. -PRODUCT | Multiplies a series of numbers and/or cells. -AVERAGE | Calculates average for the series of numbers and/or cells excluding text. -AVERAGEIF | Calculates average for the cells based on the specified criterion. -AVERAGEIFS | Calculates average for the cells based on the specified conditions. -AVERAGEA | Calculates the average for the cells evaluating TRUE as 1 text and FALSE as 0. -COUNT | Counts the cells that contain numeric values in a range. -COUNTIF | Counts the cells based on the specified condition. -COUNTIFS | Counts the cells based on specified conditions. -COUNTA | Counts the cells that contain values in a range. -MIN | Returns the smallest number of the given arguments. -MAX | Returns the largest number of the given arguments. -DATE | Returns the date based on the given year, month, and day. -DAY | Returns the day from the given date. -DAYS | Returns the number of days between two dates. -IF | Returns value based on the given expression. -IFS | Returns value based on the given multiple expressions. -AND | Returns TRUE if all the arguments are TRUE otherwise returns FALSE. -OR | Returns TRUE if any of the arguments are TRUE otherwise returns FALSE. -IFERROR | Returns value if no error found else it will return specified value. -CHOOSE | Returns a value from the list of values based on the index number. -INDEX | Returns the value of the cell in a given range based on row and column number. -FIND | Returns the position of a string within another string which is case sensitive. -CONCATENATE | Combines two or more strings together. -CONCAT | Concatenates a list or a range of text strings. -SUBTOTAL | Returns subtotal for a range using the given function number. -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 | -CustomFilterDatePlaceHolder | Choose a date -CustomFilterPlaceHolder | Enter the value -CustomFilter | Custom Filter -Between | Between -MatchCase | Match Case -DateTimeFilter | DateTime Filters -Undo | Undo -Redo | Redo -DateFilter | Date Filters -TextFilter | Text Filters -NumberFilter | Number Filters -ClearFilter | Clear Filter -NoResult | No Matches Found -FilterFalse | False -FilterTrue | True -Blanks | Blanks -SelectAll | Select All -GreaterThanOrEqual | Greater Than Or Equal -GreaterThan | Greater Than -LessThanOrEqual | Less Than Or Equal -LessThan | Less Than -NotEqual | Not Equal -Equal | Equal -Contains | Contains -EndsWith | Ends With -StartsWith | Starts With -ClearButton | Clear -FilterButton | Filter -CancelButton | Cancel -OKButton | OK -Search | Search -Link | Link -Hyperlink | Hyperlink -EditHyperlink | Edit Hyperlink -OpenHyperlink | Open Hyperlink -RemoveHyperlink | Remove Hyperlink -InsertLink | Insert Link -EditLink | Edit Link -WebPage | WEB PAGE -ThisDocument | THIS DOCUMENT -DisplayText | Display Text -Url | URL -CellReference | Cell Reference -Sheet | Sheet -DefinedNames | Defined Names -EnterTheTextToDisplay | Enter the text to display -EnterTheUrl | Enter the URL -ProtectSheet | Protect Sheet -UnprotectSheet | Unprotect Sheet -SelectCells | Select cells -FormatCells | Format cells -FormatRows | Format rows -Format Columns | Format columns -InsertLinks | Insert links -ProtectContent | Protect the contents of locked cells -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 -ByColumn | By Column -MatchExactCellElements | Match Exact Cell Contents -EntercellAddress | Enter Cell Address -FindAndReplace | Find and Replace -ReplaceAllEnd | matches replaced with. -FindNextBtn | Find Next -FindPreviousBtn | Find Previous -ReplaceBtn | Replace -ReplaceAllBtn | Replace All -GotoHeader | Go To -GotoSpecialHeader | Go To Special -SearchWithin | Search within -SearchBy | Search by -Reference | Reference -Workbook | Workbook -NoElements | We couldn’t find what you were looking for. -FindWhat | Find what -ReplaceWith | Replace with -EnterValue | Enter Value -DefineNameInValid | The name that you entered is not valid. -FindValue | Find Value -ReplaceValue | Replace Value -DataValidation | Data Validation -CLEARALL | CLEAR ALL -APPLY | APPLY -CellRange | Cell Range -Allow | Allow -Data | Data -Minimum | Minimum -Maximum | Maximum -IgnoreBlank | Ignore blank -WholeNumber | Whole Number -Decimal | Decimal -Date | Date -TextLength | Text Length -List | List -NotBetween | Not between -EqualTo | Equal to -NotEqualTo | Not equal to -Greaterthan | Greater than -Lessthan | Less than -GreaterThanOrEqaulTo | Greater than or eqaul to -LessThanOrEqualTo | Less than or equal to -InCellDropDown | In-cell-dropdown -Sources | Sources -Value | Value -Retry | Retry -DialogError | The list source must be a reference to a single row or column. -ValidationError | This value doesn't match the data validation restrictions defined for the cell. -HideRow | Hide Row -HideRows | Hide Rows -UnHideRows | UnHide Rows -HideColumn | Hide Column -HideColumns | Hide Columns -UnHideColumns | UnHide Columns -InsertRow | Insert Row -InsertRows | Insert Rows -InsertColumn | Insert Column -InsertColumns | Insert Columns -DeleteRow | Delete Row -DeleteRows | Delete Rows -DeleteColumn | Delete Column -DeleteColumns | Delete Columns -Borders | Borders -TopBorders | Top Borders -LeftBorders | Left Borders -RightBorders | Right Borders -BottomBorders | Bottom Borders -AllBorders | All Borders -HorizontalBorders | Horizontal Borders -VerticalBorders | Vertical Borders -OutsideBorders | Outside Borders -InsideBorders | Inside Borders -NoBorders | No Borders -BorderColor | Border Color -BorderStyle | Border Style -INTERCEPT | Calculates the point of the Y-intercept line via linear regression. -SLOPE | Returns the slope of the line from linear regression of the data points. -FreezePanes | Freeze Panes -FreezeRows | Freeze Rows -FreezeColumns | Freeze Columns -UnfreezePanes | Unfreeze Panes -UnfreezeRows | Unfreeze Rows -UnfreezeColumns | Unfreeze Columns -MergeCells | Merge Cells -MergeAll | Merge All -MergeHorizontally | Merge Horizontally -MergeVertically | Merge Vertically -Unmerge | Unmerge -UnmergeCells | Unmerge Cells -SortAscending | Ascending -SortDescending | Descending -CustomSort | Custom Sort -ClearAllFilter | Clear -ReapplyFilter | Reapply -Clear | Clear -ClearContents | Clear Contents -ClearAll | Clear All -ClearFormats | Clear Formats -ClearHyperlinks | Clear Hyperlinks -Image | Image -AddColumn | Add Column -SortBy | Sort by -ThenBy | Then by -Chart | Chart -Column | Column -Bar | Bar -Area | Area -Pie | Pie -Doughnut | Doughnut -PieAndDoughnut | Pie/Doughnut -Line | Line -Radar | Radar -Scatter | Scatter -ChartDesign | Chart Design -ClusteredColumn | Clustered Column -StackedColumn | Stacked Column -StackedColumn100 | 100% Stacked Column -ClusteredBar | Clustered Bar -StackedBar | Stacked Bar -StackedBar100 | 100% Stacked Bar -StackedArea | Stacked Area -StackedArea100 | 100% Stacked Area -StackedLine | Stacked Line -StackedLine100 | 100% Stacked Line -AddChartElement | Add Chart Element -Axes | Axes -AxisTitle | Axis Title -ChartTitle | Chart Title -DataLabels | Data Labels -Gridlines | Gridlines -Legends | Legends -PrimaryHorizontal | Primary Horizontal -PrimaryVertical | Primary Vertical -None | None -AboveChart | Above Chart -Center | Center -InsideEnd | Inside End -InsideBase | Inside Base -OutsideEnd | OutSide End -PrimaryMajorHorizontal | Primary Major Horizontal -PrimaryMajorVertical | Primary Major Vertical -PrimaryMinorHorizontal | Primary Minor Horizontal -PrimaryMinorVertical | Primary Minor Vertical -Right | Right -Left | Left -Bottom | Bottom -Top | Top -SwitchRowColumn | Switch Row/Column -ChartTheme | Chart Theme -ChartType | Chart Type -Material | Material -Fabric | Fabric -Bootstrap | Bootstrap -HighContrastLight | HighContrastLight -MaterialDark | MaterialDark -FabricDark | FabricDark -HighContrast | HighContrast -BootstrapDark | BootstrapDark -Bootstrap4 | Bootstrap4 -VerticalAxisTitle | Vertical Axis Title -HorizontalAxisTitle | Horizontal Axis Title -EnterTitle | Enter Title -ProtectWorkbook | Protect Workbook -Password | Password (optional) | -unProtectPassword | Password -EnterThePassword | Enter the password -ConfirmPassword | Confirm Password -EnterTheConfirmPassword | Re-enter your password -PasswordAlert | Confirmation password is not identical -UnProtectWorkbook | Unprotect Workbook -UnProtectPasswordAlert | The password you supplied is not correct. -InCorrectPassword | Unable to open the file or worksheet with the given password. -PasswordAlertMsg | Enter the password -ConfirmPasswordAlertMsg | Enter the confirm password -IsProtected | is protected +Locale keywords |Text +-----|----- +`Cut` | Cut +`Copy` | Copy +`Paste` | Paste +`PasteSpecial` | Paste Special +`All` | All +`Values` | Values +`Formats` | Formats +`Font` | Font +`FontSize` | Font Size +`Bold` | Bold +`Italic` | Italic +`Underline` | Underline +`Strikethrough` | Strikethrough +`TextColor` | Text Color +`FillColor` | Fill Color +`HorizontalAlignment` | Horizontal Alignment +`AlignLeft` | Align Left +`AlignCenter` | Center +`AlignRight` | Align Right +`VerticalAlignment` | Vertical Alignment +`AlignTop` | Align Top +`AlignMiddle` | Align Middle +`AlignBottom` | Align Bottom +`InsertFunction` | Insert Function +`Insert` | Insert +`Delete` | Delete +`Rename` | Rename +`Hide` | Hide +`Unhide` | Unhide +`NameBox` | Name Box +`ShowHeaders` | Show Headers +`HideHeaders` | Hide Headers +`ShowGridLines` | Show Gridlines +`HideGridLines` | Hide Gridlines +`AddSheet` | Add Sheet +`ListAllSheets` | List All Sheets +`FullScreen` | Full Screen +`CollapseToolbar` | Collapse Toolbar +`ExpandToolbar` | Expand Toolbar +`CollapseFormulaBar` | Collapse Formula Bar +`ExpandFormulaBar` | Expand Formula Bar +`File` | File +`Home` | Home +`Formulas` | Formulas +`View` | View +`New` | New +`Open` | Open +`SaveAs` | Save As +`ExcelXlsx` | Microsoft Excel +`ExcelXls` | Microsoft Excel 97-2003 +`CSV` | Comma-separated values +`FormulaBar` | Formula Bar +`Ok` | Ok +`Close` | Close +`Cancel` | Cancel +`Apply` | Apply +`MoreColors` | More Colors +`StandardColors` | Standard Colors +`General` | General +`Number` | Number +`Currency` | Currency +`Accounting` | Accounting +`ShortDate` | Short Date +`LongDate` | Long Date +`Time` | Time +`Percentage` | Percentage +`Fraction` | Fraction +`Scientific` | Scientific +`Text` | Text +`NumberFormat` | Number Format +`MobileFormulaBarPlaceHolder` | Enter value or Formula +`PasteAlert` | You can't paste it here because the copy area and paste area aren't in the same size. Please try pasting in a different range. +`DestroyAlert` | Are you sure you want to destroy the current workbook without saving and create a new workbook? +`SheetRenameInvalidAlert` | Sheet name contains invalid character. +`SheetRenameEmptyAlert` | Sheet name cannot be empty. +`SheetRenameAlreadyExistsAlert` | Sheet name already exists. Please enter another name. +`DeleteSheetAlert` | Are you sure you want to delete this sheet? +`DeleteSingleLastSheetAlert` | A Workbook must contain at least one visible worksheet. +`PickACategory` | Pick a category +`Description` | Description +`UnsupportedFile` | Unsupported File +`InvalidUrl` | Invalid Url +`SUM` | Adds a series of numbers and/or cells. +`SUMIF` | Adds the cells based on the specified condition. +`SUMIFS` | Adds the cells based on the specified conditions. +`ABS` | Returns the value of a number without its sign. +`RAND` | Returns a random number between 0 and 1. +`RANDBETWEEN` | Returns a random integer based on the specified values. +`FLOOR` | Rounds a number down to the nearest multiple of a given factor. +`CEILING` | Rounds a number up to the nearest multiple of a given factor. +`PRODUCT` | Multiplies a series of numbers and/or cells. +`AVERAGE` | Calculates average for the series of numbers and/or cells excluding text. +`AVERAGEIF` | Calculates average for the cells based on the specified criterion. +`AVERAGEIFS` | Calculates average for the cells based on the specified conditions. +`AVERAGEA` | Calculates the average for the cells evaluating TRUE as 1 text and FALSE as 0. +`COUNT` | Counts the cells that contain numeric values in a range. +`COUNTIF` | Counts the cells based on the specified condition. +`COUNTIFS` | Counts the cells based on specified conditions. +`COUNTA` | Counts the cells that contain values in a range. +`MIN` | Returns the smallest number of the given arguments. +`MAX` | Returns the largest number of the given arguments. +`DATE` | Returns the date based on the given year, month, and day. +`DAY` | Returns the day from the given date. +`DAYS` | Returns the number of days between two dates. +`IF` | Returns value based on the given expression. +`IFS` | Returns value based on the given multiple expressions. +`AND` | Returns TRUE if all the arguments are TRUE otherwise returns FALSE. +`OR` | Returns TRUE if any of the arguments are TRUE otherwise returns FALSE. +`IFERROR` | Returns value if no error found else it will return specified value. +`CHOOSE` | Returns a value from the list of values based on the index number. +`INDEX` | Returns the value of the cell in a given range based on row and column number. +`FIND` | Returns the position of a string within another string which is case sensitive. +`CONCATENATE` | Combines two or more strings together. +`CONCAT` | Concatenates a list or a range of text strings. +`SUBTOTAL` | Returns subtotal for a range using the given function number. +`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 | +`CustomFilterDatePlaceHolder` | Choose a date +`CustomFilterPlaceHolder` | Enter the value +`CustomFilter` | Custom Filter +`Between` | Between +`MatchCase` | Match Case +`DateTimeFilter` | DateTime Filters +`Undo` | Undo +`Redo` | Redo +`DateFilter` | Date Filters +`TextFilter` | Text Filters +`NumberFilter` | Number Filters +`ClearFilter` | Clear Filter +`NoResult` | No Matches Found +`FilterFalse` | False +`FilterTrue` | True +`Blanks` | Blanks +`SelectAll` | Select All +`GreaterThanOrEqual` | Greater Than Or Equal +`GreaterThan` | Greater Than +`LessThanOrEqual` | Less Than Or Equal +`LessThan` | Less Than +`NotEqual` | Not Equal +`Equal` | Equal +`Contains` | Contains +`EndsWith` | Ends With +`StartsWith` | Starts With +`ClearButton` | Clear +`FilterButton` | Filter +`CancelButton` | Cancel +`OKButton` | OK +`Search` | Search +`Link` | Link +`Hyperlink` | Hyperlink +`EditHyperlink` | Edit Hyperlink +`OpenHyperlink` | Open Hyperlink +`RemoveHyperlink` | Remove Hyperlink +`InsertLink` | Insert Link +`EditLink` | Edit Link +`WebPage` | WEB PAGE +`ThisDocument` | THIS DOCUMENT +`DisplayText` | Display Text +`Url` | URL +`CellReference` | Cell Reference +`Sheet` | Sheet +`DefinedNames` | Defined Names +`EnterTheTextToDisplay` | Enter the text to display +`EnterTheUrl` | Enter the URL +`ProtectSheet` | Protect Sheet +`UnprotectSheet` | Unprotect Sheet +`SelectCells` | Select cells +`FormatCells` | Format cells +`FormatRows` | Format rows +`Format` Columns | Format columns +`InsertLinks` | Insert links +`ProtectContent` | Protect the contents of locked cells +`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 +`ByColumn` | By Column +`MatchExactCellElements` | Match Exact Cell Contents +`EntercellAddress` | Enter Cell Address +`FindAndReplace` | Find and Replace +`ReplaceAllEnd` | matches replaced with. +`FindNextBtn` | Find Next +`FindPreviousBtn` | Find Previous +`ReplaceBtn` | Replace +`ReplaceAllBtn` | Replace All +`GotoHeader` | Go To +`GotoSpecialHeader` | Go To Special +`SearchWithin` | Search within +`SearchBy` | Search by +`Reference` | Reference +`Workbook` | Workbook +`NoElements` | We couldn’t find what you were looking for. +`FindWhat` | Find what +`ReplaceWith` | Replace with +`EnterValue` | Enter Value +`DefineNameInValid` | The name that you entered is not valid. +`FindValue` | Find Value +`ReplaceValue` | Replace Value +`DataValidation` | Data Validation +`CLEARALL` | CLEAR ALL +`APPLY` | APPLY +`CellRange` | Cell Range +`Allow` | Allow +`Data` | Data +`Minimum` | Minimum +`Maximum` | Maximum +`IgnoreBlank` | Ignore blank +`WholeNumber` | Whole Number +`Decimal` | Decimal +`Date` | Date +`TextLength` | Text Length +`List` | List +`NotBetween` | Not between +`EqualTo` | Equal to +`NotEqualTo` | Not equal to +`Greaterthan` | Greater than +`Lessthan` | Less than +`GreaterThanOrEqaulTo` | Greater than or eqaul to +`LessThanOrEqualTo` | Less than or equal to +`InCellDropDown` | In-cell-dropdown +`Sources` | Sources +`Value` | Value +`Retry` | Retry +`DialogError` | The list source must be a reference to a single row or column. +`ValidationError` | This value doesn't match the data validation restrictions defined for the cell. +`HideRow` | Hide Row +`HideRows` | Hide Rows +`UnHideRows` | UnHide Rows +`HideColumn` | Hide Column +`HideColumns` | Hide Columns +`UnHideColumns` | UnHide Columns +`InsertRow` | Insert Row +`InsertRows` | Insert Rows +`InsertColumn` | Insert Column +`InsertColumns` | Insert Columns +`DeleteRow` | Delete Row +`DeleteRows` | Delete Rows +`DeleteColumn` | Delete Column +`DeleteColumns` | Delete Columns +`Borders` | Borders +`TopBorders` | Top Borders +`LeftBorders` | Left Borders +`RightBorders` | Right Borders +`BottomBorders` | Bottom Borders +`AllBorders` | All Borders +`HorizontalBorders` | Horizontal Borders +`VerticalBorders` | Vertical Borders +`OutsideBorders` | Outside Borders +`InsideBorders` | Inside Borders +`NoBorders` | No Borders +`BorderColor` | Border Color +`BorderStyle` | Border Style +`INTERCEPT` | Calculates the point of the Y-intercept line via linear regression. +`SLOPE` | Returns the slope of the line from linear regression of the data points. +`FreezePanes` | Freeze Panes +`FreezeRows` | Freeze Rows +`FreezeColumns` | Freeze Columns +`UnfreezePanes` | Unfreeze Panes +`UnfreezeRows` | Unfreeze Rows +`UnfreezeColumns` | Unfreeze Columns +`MergeCells` | Merge Cells +`MergeAll` | Merge All +`MergeHorizontally` | Merge Horizontally +`MergeVertically` | Merge Vertically +`Unmerge` | Unmerge +`UnmergeCells` | Unmerge Cells +`SortAscending` | Ascending +`SortDescending` | Descending +`CustomSort` | Custom Sort +`ClearAllFilter` | Clear +`ReapplyFilter` | Reapply +`Clear` | Clear +`ClearContents` | Clear Contents +`ClearAll` | Clear All +`ClearFormats` | Clear Formats +`ClearHyperlinks` | Clear Hyperlinks +`Image` | Image +`AddColumn` | Add Column +`SortBy` | Sort by +`ThenBy` | Then by +`Chart` | Chart +`Column` | Column +`Bar` | Bar +`Area` | Area +`Pie` | Pie +`Doughnut` | Doughnut +`PieAndDoughnut` | Pie/Doughnut +`Line` | Line +`Radar` | Radar +`Scatter` | Scatter +`ChartDesign` | Chart Design +`ClusteredColumn` | Clustered Column +`StackedColumn` | Stacked Column +`StackedColumn100` | 100% Stacked Column +`ClusteredBar` | Clustered Bar +`StackedBar` | Stacked Bar +`StackedBar100` | 100% Stacked Bar +`StackedArea` | Stacked Area +`StackedArea100` | 100% Stacked Area +`StackedLine` | Stacked Line +`StackedLine100` | 100% Stacked Line +`AddChartElement` | Add Chart Element +`Axes` | Axes +`AxisTitle` | Axis Title +`ChartTitle` | Chart Title +`DataLabels` | Data Labels +`Gridlines` | Gridlines +`Legends` | Legends +`PrimaryHorizontal` | Primary Horizontal +`PrimaryVertical` | Primary Vertical +`None` | None +`AboveChart` | Above Chart +`Center` | Center +`InsideEnd` | Inside End +`InsideBase` | Inside Base +`OutsideEnd` | OutSide End +`PrimaryMajorHorizontal` | Primary Major Horizontal +`PrimaryMajorVertical` | Primary Major Vertical +`PrimaryMinorHorizontal` | Primary Minor Horizontal +`PrimaryMinorVertical` | Primary Minor Vertical +`Right` | Right +`Left` | Left +`Bottom` | Bottom +`Top` | Top +`SwitchRowColumn` | Switch Row/Column +`ChartTheme` | Chart Theme +`ChartType` | Chart Type +`Material` | Material +`Fabric` | Fabric +`Bootstrap` | Bootstrap +`HighContrastLight` | HighContrastLight +`MaterialDark` | MaterialDark +`FabricDark` | FabricDark +`HighContrast` | HighContrast +`BootstrapDark` | BootstrapDark +`Bootstrap4` | Bootstrap4 +`VerticalAxisTitle` | Vertical Axis Title +`HorizontalAxisTitle` | Horizontal Axis Title +`EnterTitle` | Enter Title +`ProtectWorkbook` | Protect Workbook +`Password` | Password (optional) | +`unProtectPassword` | Password +`EnterThePassword` | Enter the password +`ConfirmPassword` | Confirm Password +`EnterTheConfirmPassword` | Re-enter your password +`PasswordAlert` | Confirmation password is not identical +`UnProtectWorkbook` | Unprotect Workbook +`UnProtectPasswordAlert` | The password you supplied is not correct. +`InCorrectPassword` | Unable to open the file or worksheet with the given password. +`PasswordAlertMsg` | Please enter the password +`ConfirmPasswordAlertMsg` | Please enter the confirm password +`IsProtected` | is protected ### Loading translations -To load translation object in an application, use `load` function of the `L10n` class. +To load translation object in an application, use [`load`](https://ej2.syncfusion.com/aspnetcore/documentation/common/internationalization#loading-culture-data) function of the [`L10n`](https://ej2.syncfusion.com/aspnetcore/documentation/common/internationalization) class. The following example demonstrates the Spreadsheet in `French` culture. In the below sample we have translated the ribbon tab names and Home tab content (clipboard, cell style). @@ -389,8 +390,6 @@ The following example demonstrates the Spreadsheet in `French` culture. In the b {% endhighlight %} {% endtabs %} - - ## Internationalization The Internationalization library is used to globalize number, date, and time values in the spreadsheet component. @@ -406,8 +405,6 @@ The following example demonstrates the Spreadsheet in French [ `fr-CH`] culture. {% endhighlight %} {% endtabs %} - - ## 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableRtl) to true. @@ -421,7 +418,9 @@ RTL provides an option to switch the text direction and layout of the Spreadshee {% endhighlight %} {% endtabs %} +## Note +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/add-cell-icon.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/add-cell-icon.md new file mode 100644 index 0000000000..7b4f00640c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/add-cell-icon.md @@ -0,0 +1,23 @@ +--- +layout: post +title: Add icons inside cells in EJ2 ASP.NET Core Spreadsheet component | Syncfusion +description: Learn here all about adding icon inside cells using a custom template in Syncfusion EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Add Custom Icons to Cells in ASP.NET Core Spreadsheet + +In the Syncfusion Spreadsheet, you can render custom icons inside specific cells by defining a custom template property within the cell model. During the [beforeCellRender](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeCellRender) event, the icon element can be appended to the corresponding table cell (td) by checking whether the cell contains this template property. + +The following sample demonstrates how to add icons to cells by assigning the template property in the cell definition. Additionally, a custom ribbon item named "Add Icon" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts an icon into the currently active cell. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/add-icon-in-cell-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="AddIconController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/add-icon-in-cell-cs1/addIconController.cs %} +{% endhighlight %} +{% endtabs %} diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/add-dynamic-cell-template.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/add-dynamic-cell-template.md new file mode 100644 index 0000000000..49d9f7b05e --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/add-dynamic-cell-template.md @@ -0,0 +1,23 @@ +--- +layout: post +title: Dynamic cell template in EJ2 ASP.NET Core Spreadsheet component | Syncfusion +description: Render dropdown templates inside cells in Syncfusion EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Create Dynamic Cell Templates with Dropdowns in ASP.NET Core Spreadsheet + +You can add templates to cells in the Syncfusion Spreadsheet component by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the [beforeCellRender](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeCellRender) event to append the desired template element to the cell. + +The following sample demonstrates how to insert a [Syncfusion Dropdown component](https://www.npmjs.com/package/@syncfusion/ej2-dropdowns) into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="DynamicCellTemplateController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/dynamicCellTemplateController.cs %} +{% endhighlight %} +{% endtabs %} diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md index a5256c6ed4..505f8dc9f8 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/create-a-object-structure.md @@ -9,7 +9,7 @@ documentation: ug # Create an object structure in ASP.NET Core Spreadsheet Control -This topic guides you to construct a JSON structure that can be passed to the `openFromJson` method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#properties) of the spreadsheet as value. +This topic guides you to construct a JSON structure that can be passed to the [`openFromJson`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method to render the spreadsheet. The JSON structure is an object with the key as `Workbook` and the [`properties`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#properties) of the spreadsheet as value. ```js { Workbook: {} } @@ -175,4 +175,4 @@ In the following demo, the JSON structure is passed to the `openFromJson` method {% highlight c# tabtitle="OpenController.cs" %} {% include code-snippet/spreadsheet/asp-net-core/json-structure-cs1/OpenController.cs %} {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/customize-spreadsheet-like-grid.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/customize-spreadsheet-like-grid.md new file mode 100644 index 0000000000..d5c3b4972b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/customize-spreadsheet-like-grid.md @@ -0,0 +1,58 @@ +--- +layout: post +title: Customize Spreadsheet like a Grid in EJ2 ASP.NET Core Spreadsheet | Syncfusion +description: Customize the EJ2 ASP.NET Core Spreadsheet to look and behave like a data grid by hiding UI elements and adding checkboxes for grid-like selection. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Customize the Spreadsheet like a Grid in ASP.NET Core Spreadsheet + +The ASP.NET Core Spreadsheet component provides extensive customization options to make it behave and appear like a traditional data grid. This guide explains how to configure the Spreadsheet to mimic grid including hiding unnecessary UI elements and rendering checkboxes for a grid-like experience. + +## Steps to Customize Spreadsheet as a Grid + +**Step 1: Hide Unnecessary UI Elements** + +To make the Spreadsheet look and behave like a simple data grid, you can hide default UI elements such as the **ribbon**, **formula bar**, **sheet tabs**, and **row and column headers**. Assigning `false` to the following properties will hide the respective elements: + +- [`showRibbon`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ShowRibbon): Hides the ribbon toolbar. +- [`showFormulaBar`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ShowFormulaBar): Hides the formula bar. +- [`showSheetTabs`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ShowSheetTabs): Hides the sheet tabs. +- [`showHeaders`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.SheetModel.html#Syncfusion_EJ2_Spreadsheet_SheetModel_ShowHeaders): Hides the row and column headers in the sheet. + +**Example:** + +```js + + + + + + +``` +**Step 2: Render Checkboxes Like a Grid** + +Checkboxes can be rendered within cells of the first column using the [`beforeCellRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeCellRender) event, so that selection behaves like grid selection, allowing row selection based on the checkbox selection state. Additionally, you can bind custom functions to the checkbox click event as needed. + +The following code example demonstrates how to customize the Spreadsheet to behave like a grid: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/spreadsheet-like-grid-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="SpreadsheetGridController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/spreadsheet-like-grid-cs1/spreadsheetGridController.cs %} +{% endhighlight %} +{% endtabs %} + +## See Also + +* [Syncfusion ASP.NET Core Grid Component](https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core) +* [Syncfusion ASP.NET Core Checkbox Component](https://ej2.syncfusion.com/aspnetcore/documentation/check-box/getting-started) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/find-replace-in-range.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/find-replace-in-range.md new file mode 100644 index 0000000000..a7eb5accfc --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/find-replace-in-range.md @@ -0,0 +1,23 @@ +--- +layout: post +title: Find and replace in range in EJ2 ASP.NET Core Spreadsheet component | Syncfusion +description: Learn here all about performing find and replace limited to the range in Syncfusion EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Find and replace the text within the selected range of cells + +In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ActionBegin) event when the action is `beforeReplaceAll`. + +The following sample demonstrates how to limit the "Replace All" operation to the currently selected range. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/find-and-replace-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="FindReplaceController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/find-and-replace-cs1/findReplaceController.cs %} +{% endhighlight %} +{% endtabs %} diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/get-filtered-data.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/get-filtered-data.md new file mode 100644 index 0000000000..aa2315e55f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/get-filtered-data.md @@ -0,0 +1,23 @@ +--- +layout: post +title: Retrieve filtered row data in EJ2 ASP.NET Core Spreadsheet component | Syncfusion +description: Learn here all about getting filtered row data in Syncfusion EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Get filtered row data in ASP.NET Core Spreadsheet + +Filtering in the Syncfusion Spreadsheet allows you to display only the rows that match your criteria, hiding all others. You can enable filtering by setting the [allowFiltering](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFiltering) property, and apply filters either through the UI or programmatically using the [applyFilter](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#applyfilter) method. To identify which rows are filtered, iterate through the sheet's row collection and check the `isFiltered` property of each row object. This flag indicates whether a row is currently hidden due to filtering. + +The following example shows how to get the filtered rows from the Spreadsheet: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/filter-cs2/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="FilterController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/filter-cs2/filterController.cs %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/identify-the-context-menu-opened.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/identify-the-context-menu-opened.md index 76fe42f42b..60e7d4598c 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/identify-the-context-menu-opened.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/identify-the-context-menu-opened.md @@ -27,4 +27,3 @@ The following code example shows how to identify the context menu opened. {% include code-snippet/spreadsheet/asp-net-core/find-target-context-menu/tagHelper %} {% endhighlight %} {% endtabs %} - diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/paste-only-values-without-formatting.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/paste-only-values-without-formatting.md new file mode 100644 index 0000000000..92a87a90e7 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/paste-only-values-without-formatting.md @@ -0,0 +1,23 @@ +--- +layout: post +title: Paste Without Formatting in EJ2 ASP.NET Core Spreadsheet component | Syncfusion +description: Learn here about Paste only values without formatting during copy and paste in Syncfusion EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Paste Values Without Formatting and styles in ASP.NET Core Spreadsheet + +In the Syncfusion ASP.NET Core Spreadsheet, you can make the paste action insert only the raw values into the cells, without bringing any formatting or styles from the copied content. This can be done by using the [actionBegin](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ActionBegin) event, where the Spreadsheet provides the details of the action being performed. When the action is a clipboard operation, you can set the paste type to Values, ensuring that only plain values are pasted into the sheet. + +The following example shows how to paste values without formatting. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/paste-values-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="pasteValuesController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/paste-values-cs1/pasteValuesController.cs %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/prevent-actions.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/prevent-actions.md new file mode 100644 index 0000000000..413b461c9c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/how-to/prevent-actions.md @@ -0,0 +1,65 @@ +--- +layout: post +title: Prevent actions without read-only and sheet protection | Syncfusion +description: Learn here all about to prevent actions without read-only and sheet protection in EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Spreadsheet +platform: document-processing +documentation: ug +--- + +# Prevent actions without read-only and protection in ASP.NET Core Spreadsheet + +In Syncfusion ASP.NET Core Spreadsheet, the [**read-only**](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/protect-sheet#make-cells-read-only-without-protecting-worksheet) feature makes a range of cells, rows, or columns completely non-editable and restricts all spreadsheet actions on those cells. Similarly, the [**sheet protection**](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/protect-sheet#protect-sheet) feature locks the entire sheet and restricts all spreadsheet actions on the sheet. It does not allow actions such as formatting cells, rows, or columns, selecting cells, or inserting hyperlinks—unless these options are explicitly enabled in the [`protectSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.ProtectSettingsModel.html). + +If your requirement is to prevent actions (such as cut, paste, autofill, formatting, and validation) without locking the entire sheet using the [`protectSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#protectsheet) method or making the cells read-only via the [`setRangeReadOnly`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#setrangereadonly) method, you can achieve this through event-based customization. This approach allows you to restrict specific actions on selected cells while keeping the rest of the sheet fully interactive. + +**Events to Use** +To achieve this requirement, the following events can be used: + +* [`cellEdit`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_CellEdit) → To prevent editing for specific cells. +* [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ActionBegin)→ To prevent spreadsheet actions such as cut, paste, autofill, formatting, etc. + +## Prevent editing for specific cells + +To prevent editing for specific cells, use the [`cellEdit`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_CellEdit) event, which triggers whenever a cell enters edit mode. By checking the column index and setting `args.cancel = true`, you can prevent editing for those columns. This ensures that users cannot modify the cell content in those columns. + +```js +// Triggers when cell editing starts in the spreadsheet. + const cellEdit = (args: any) =>{ + var addressRange = getCellIndexes(args.address.split('!')[1]); + // preventing cellEditing from the readOnly columns + if (readOnlyColumns.includes(addressRange[1])) { + args.cancel = true; + } + } + + +``` + +## Prevent specific spreadsheet actions + +To prevent specific action after preventing the cell editing, you need to use the [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ActionBegin) event. This event triggers before any action starts (such as cut, paste, autofill, formatting, etc.). In this event: + +* Fetch the target address based on the type of action being performed using `args.action` property. +* Verify if the target range includes the restricted columns. +* If the column is in the restricted list, cancel the action by setting `cancel` property to `true`. + +This approach ensures that spreadsheet actions such as cut, paste, autofill, formatting, validation, and conditional formatting are prevented for specific cells without protecting the sheet or making the cells read-only. + +> **Note:** In this example, column indexes are used to restrict actions. You can also apply the same restrictions using row indexes or specific cell addresses. This is a purely component-level customization and, unlike sheet protection, it will not be preserved in the exported file. + +The following example demonstrates how to prevent actions such as cut, paste, autofill, formatting, validation, and conditional formatting for specific cells(in the first and third columns) in the spreadsheet without protecting the sheet or making the cells read-only. You can also restrict additional actions by following the same approach. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/prevent-actions-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="preventActionsController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/prevent-actions-cs1/preventActionsController.cs %} +{% endhighlight %} +{% endtabs %} + +## See Also + +* [Protection](../protect-sheet) +* [Events](../events) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/illustrations.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/illustrations.md index 0b5b716be7..7694dde52c 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/illustrations.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/illustrations.md @@ -10,22 +10,22 @@ documentation: ug # Illustrations in ASP.NET Core Spreadsheet control -Illustrations helps you to insert a image, shapes and graphic objects in the Essential JS 2 spreadsheet. +Illustrations allow you to insert images, shapes, and graphic objects into the Essential® JS 2 Spreadsheet. This feature helps to enhance the visual presentation of your worksheet by embedding graphical elements alongside your data. ## Image -Adding images to a spreadsheet can enhance the visual appeal and help convey information more clearly. +Adding images to a spreadsheet can enhance the visual appeal and help to convey information more clearly. -N> * The default value for [`allowImage`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowImage) property is `true`. +>* The default value for the [`allowImage`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowImage) property is `true`. ### Insert Image -You can insert the image by using one of the following ways, +You can insert an image by using one of the following ways: -* Selecting the Insert tab in the Ribbon toolbar, and then choose the Image tab. -* Use the `insertImage()` method programmatically. +* Select the **Insert** tab in the Ribbon toolbar, and then choose the **Image** option. +* Use the `insertImage` method programmatically. -The available parameters in `insertImage()` method are, +The available parameters in the `insertImage` method are, | Parameter | Type | Description | |-----|------|----| @@ -34,21 +34,22 @@ The available parameters in `insertImage()` method are, The available arguments in `ImageModel` are: -* src: Specifies the image source. -* id: Specifies image element id. -* height: Specifies the height of the image. -* width: Specifies the width of the image. -* top: Specifies the height of the image. -* left: Specifies the width of the image. - -N> * In spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF and JPEG files. +| Property | Description | +|----------|-------------| +| [src](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Image.html#Syncfusion_EJ2_Spreadsheet_Image_Src) | Specifies the image source. | +| [id](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Image.html#Syncfusion_EJ2_Spreadsheet_Image_Src) | Specifies the image element id. | +| [height](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Image.html#Syncfusion_EJ2_Spreadsheet_Image_Height) | Specifies the height of the image. | +| [width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Image.html#Syncfusion_EJ2_Spreadsheet_Image_Width) | Specifies the width of the image. | +| [top](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Image.html#Syncfusion_EJ2_Spreadsheet_Image_Top) | Specifies the top position of the image. | +| [left](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Image.html#Syncfusion_EJ2_Spreadsheet_Image_Left) | Specifies the left side of the image. | +>* In a spreadsheet, you can add many types of image files, including IMAGE, JPG, PNG, GIF, and JPEG formats. ### Delete Image -* If you want to delete the image, just select the image firstly, and then press the Delete key. -* Use the `deleteImage()` method programmatically. +* To delete an image, select the image and press the **Delete** key. +* You can also use the `deleteImage` method programmatically. -The available parameters in `deleteImage()` method are, +The available parameters in the `deleteImage` method are: | Parameter | Type | Description | |-----|------|----| @@ -57,17 +58,17 @@ The available parameters in `deleteImage()` method are, ### Image Customization -Image feature allows you to view and insert a image in a spreadsheet and you can change the height and width of the image by resizing and move it to another position. +The image feature allows you to view and insert an image in a spreadsheet. You can customize the image by resizing it to change the height and width, and by moving it to another position within the worksheet. #### Height and Width * You can change the height and width of the image by resizing. -* Use the `height` and `width` property in the `insertImage()` method programmatically. +* Use the `height` and `width` property in the `insertImage` method programmatically. #### Top and Left * You can change the position of the image by drag and drop. -* Use the `top` and `left` property in the `insertImage()` method programmatically. +* Use the `top` and `left` property in the `insertImage` method programmatically. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -78,8 +79,6 @@ Image feature allows you to view and insert a image in a spreadsheet and you can {% endhighlight %} {% endtabs %} - - ### Limitations of Image The following features have some limitations in Image: @@ -91,27 +90,27 @@ The following features have some limitations in Image: 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowChart) property to enable or disable the chart functionality. -N> * The default value for the [`allowChart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowChart) property is `true`. +>* The default value for the [`allowChart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowChart) property is `true`. ### Types of chart The following types of charts are available in the Spreadsheet. -N>* Column Chart -
* Bar Chart -
* Area Chart -
* Line Chart -
* Pie Chart -
* Scatter Chart +>* Column Chart +>* Bar Chart +>* Area Chart +>* Line Chart +>* Pie Chart +>* Scatter Chart ### Insert Chart -You can insert the chart by using one of the following ways, +You can insert a chart by using one of the following ways, -* Select the chart icon in the Ribbon toolbar under the Insert Tab. -* Use the `insertChart()`method programmatically. +* Select the chart icon in the Ribbon toolbar under the **Insert** tab. +* Use the [`insertChart`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#insertchart) method programmatically. -The available parameter in the `insertChart()` method is, +The available parameter in the [`insertChart`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#insertchart) method is, | Parameter | Type | Description | |-----|------|----| @@ -119,12 +118,21 @@ The available parameter in the `insertChart()` method is, The available arguments in the `ChartModel` are: -* type: Specifies the type of chart. -* theme: Specifies the theme of a chart. -* isSeriesInRows: Specifies to switch the row or a column. -* range: Specifies the selected range or specified range. -* id: Specifies the chart element id. -* markerSettings: Specifies the marker settings. The marker is used to provide information about the data points in the series and is currently only applicable to the line chart. +| Property | Type | Description | +|----------|------|-------------| +| [id](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_Id) | `string` | Specifies the chart element id. | +| [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_Type) | `ChartType` | Specifies the type of chart. | +| [theme](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_Theme) | `ChartTheme` | Specifies the theme of the chart. | +| [range](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_Range) | `string` | Specifies the selected or specified data range for the chart. | +| [isSeriesInRows](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_IsSeriesInRows) | `boolean` | Specifies whether series are organized in rows (true) or columns (false). | +| [title](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_Title) | `string` | Specifies the title of the chart. | +| [width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_Width) | `number` | Specifies the width of the chart. | +| [height](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_Height) | `number` | Specifies the height of the chart. | +| [dataLabelSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_DataLabelSettings) | `DataLabelSettingsModel` | Specifies the data label settings for the series. | +| [markerSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_MarkerSettings) | `MarkerSettingsModel` | Specifies the marker settings for the series (applicable to line charts). | +| [legendSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_LegendSettings) | `LegendSettingsModel` | Specifies options for customizing the chart legend. | +| [primaryXAxis](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_PrimaryXAxis) | `AxisModel` | Specifies options to configure the horizontal axis. | +| [primaryYAxis](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Chart.html#Syncfusion_EJ2_Spreadsheet_Chart_PrimaryYAxis) | `AxisModel` | Specifies options to configure the vertical axis. | {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -137,10 +145,10 @@ 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()`method programmatically. +* To delete a chart, simply select the chart and press the **Delete** key. +* You can also use the [`deleteChart`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#deletechart) method programmatically. -The available parameter in the `deleteChart()` method is, +The available parameter in the [`deleteChart`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#deletechart) method is, | Parameter | Type | Description | |-----|------|----| @@ -148,11 +156,13 @@ The available parameter in the `deleteChart()` method is, ### Chart Customization -Chart feature allows you to view and insert a chart in a spreadsheet, and you can change the height and width of the chart by resizing and moving it to another position. +The chart feature allows you to insert and manage charts in a spreadsheet with flexible customization options. You can adjust both the size and position of charts to better fit your worksheet layout: + +* **Resize** – Change the height and width of the chart by dragging its edges or corners. +* **Reposition** – Move the chart to a different location in the worksheet using drag-and-drop. -* You can change the height and width of the chart by resizing. +These customization options make it easy to organize charts alongside your data for clearer visualization and presentation. -* You can change the position of the chart by drag and drop. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -164,8 +174,14 @@ Chart feature allows you to view and insert a chart in a spreadsheet, and you ca {% endtabs %} #### Customization of line chart markers +You can customize line chart markers to improve their appearance and readability. By using the [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ActionBegin) event, you can modify properties such as: -Using the [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_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. +* **Shape** – Change the marker shape (e.g., circle, square, diamond). +* **Size** – Adjust the marker size for better visibility. +* **Fill Color** – Apply a custom fill color to highlight data points. +* **Border** – Customize the border style and color for distinction. + +In the following example, the marker appearance (shape and size) is modified while creating the line chart through UI interaction, demonstrating how flexible customization can enhance chart visualization. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -184,6 +200,10 @@ The following features have some limitations in the Chart: * Copy/paste into the chart data source will not reflect the chart. * Corner resizing option in chart element. +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. + ## See Also * [Formatting](./formatting) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/overview-banner.png b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/overview-banner.png deleted file mode 100644 index 458f1816f3..0000000000 Binary files a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/overview-banner.png and /dev/null differ diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet.PNG b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet.PNG index c885b458c3..354af75d2a 100644 Binary files a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet.PNG and b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet.PNG differ diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_richtext.gif b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_richtext.gif deleted file mode 100644 index f76c1bdf54..0000000000 Binary files a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/images/spreadsheet_richtext.gif and /dev/null differ diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/keyboard-shortcuts.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/keyboard-shortcuts.md index 69e77a4b9d..01013631d4 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/keyboard-shortcuts.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/keyboard-shortcuts.md @@ -13,7 +13,7 @@ documentation: ug The keyboard shortcuts supported in the spreadsheet are, | Shortcut | Description | -|-------|---------| +|----------|-------------| | 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. | @@ -40,20 +40,11 @@ The keyboard shortcuts supported in the spreadsheet are, | Alt + M | Go to `Formulas` tab. | | Alt + A | Go to `Data` tab. | | Alt + W | Go to `View` tab. | -| Tab | Navigate the active cell to the next cell in the same row. | -| Shift + Tab | Navigate the active cell to the previous cell in the same row. | -| Right or Left arrow| Move the focus to next or previous item in the tab if the focus is on ribbon tab.| -| Up arrow | When a menu is open, move focus to the next item. | -| Down arrow | When a menu is open, move focus to the previous item. | | Spacebar or Enter | Activate a selected button. | | Ctrl + F8 | Expand or collapse the ribbon content. | | Ctrl + Shift + U | Expand or collapse the formula bar. | | Ctrl + 9 | Hide the selected row. | | Ctrl + 0 | Hide the selected column. | -| Home | Moves the selection to starting column in worksheet. | -| Ctrl + Home | Move the selection to the first visible cell on a worksheet. | -| Ctrl + Shift + Home | Extend the selection of cells to the beginning of the worksheet. | -| Ctrl + End | Move to the last cell on a worksheet, right most last column and last row cell. | | Ctrl + & | Apply an outline border to the selected cells. | | Ctrl + Shift + & | Apply an outline border to the cells that you've chosen. | | Ctrl + Shift + ~ | Apply the `General` number format. | @@ -68,53 +59,21 @@ The keyboard shortcuts supported in the spreadsheet are, | Shift + Spacebar | Select an entire row in a worksheet. | | Shift + F3 | Opens `Insert Function` dialog. | | Ctrl + Alt + N | Opens new workbook. | -| Shift + Page Down | Perform page down by selecting all cells between. | -| Shift + Page Up | Perform page up by selecting all cells between. | -| Ctrl + Left | Navigate to the non-blank cell before the active cell in the same row. | -| Ctrl + Right | Navigate to the last non-blank cell in the same row as the active cell. | -| Ctrl + Up | Navigate to the first non-blank cell in the same row as the active cell. | -| Ctrl + Down | Navigate to the last cell that is not blank in the same column as the active cell. | -| Ctrl + Shift + Left | Extend the cell selection to the previous non-blank cell in the same row as the active cell. | -| Ctrl + Shift + Right | Extend the cell selection to the last non-blank cell in the same row as the active cell. | -| Ctrl + Shift + Up | Extend the selection of cells to the first non-blank cell in the same row as the active cell. | -| Ctrl + Shift + Down | Extend the selection of cells to the last non-blank cell in the same row as the active cell. | | Shift + Alt + K | Open the `List All Sheets` dropdown option. | -| Up arrow | Navigate from the active cell to the previous cell in the same column. | -| Down arrow | Navigate from the active cell to the next cell in the same column. | -| Left arrow | Navigate from the active cell to the previous cell in the same row. | -| Right arrow | Navigate from the active cell to the next cell in the same row. | -| Page Up | Move page up. | -| Page Down | Move page down. | -| Shift + Up | Extend the selection of cells to the previous row. | -| Shift + Down | Extend the selection of cells to the next row. | -| Shift + Left | Extend the selection of cells to the previous column. | -| Shift + Right | Extend the selection of cells to the next column. | -| Ctrl + Top | Navigate to the non-blank cell before the active cell in the same column. | -| Ctrl + Shift + Top | Extend the cell selection to the previous non-blank cell in the same column as the active cell. | -| Ctrl + Shift + Bottom | Extend the cell selection to the last non-blank cell in the same column as the active cell. | -| Enter | Navigate the active cell to the next cell in the same column. | -| Shift + Enter | Navigate to the previous cell in the same column from the active cell. | | Alt + Down | Open the list data validation menu and filter menu. | | Alt + Up | Close the list data validation menu and filter menu. | | Delete | Remove the contents of the cell. | -| Shift + Home | Extend the cell selection to the first column of a worksheet. | | Shift + F11 | Add a new sheet. | +| Shift + F2 | Open the dialog box to add or edit notes for the desired cells. Meanwhile, upon pressing the `Esc` key, the dialog box for notes, when in focus, will save and close. | | Ctrl + Shift + 9 | Unhide the selected rows. | | Ctrl + Shift + 0 | Unhide the selected columns. | | Ctrl + D | Fill the cell down. | | Ctrl + R | Fill the cell right. | -| Alt + Enter | While editing, add a new line. | -| Enter | Complete the cell editing and select the cell below in the same column. | -| Shift + Enter | Complete the cell editing and select the cell above in the same column. | -| Tab | Complete the cell editing and select the next cell in the same row. | -| Shift + Tab | Complete the cell editing and select the previous cell in the same row. | | Ctrl + Shift + F2 | Opens the comment editor for the active cell. Upon pressing the `Esc` key, the comment editor in focus will close. | -| Shift + F2 | Open the dialog box to add or edit notes for the desired cells. Meanwhile, upon pressing the `Esc` key, the dialog box for notes, when in focus, will save and close. | -| Alt | Focus on the active ribbon tab. | -| Left | Move the focus to the previous items in the ribbon content. | -| Right | Move the focus to the next items in the ribbon content. | -| Alt + Down | Open the ribbon dropdown menu. | -| Esc / Alt + Up | Close the ribbon dropdown menu. | + +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/link.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/link.md index fbc6e0253a..a409bab1d3 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/link.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/link.md @@ -12,7 +12,7 @@ documentation: ug 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowHyperlink) property to enable or disable hyperlink functionality. -N> * The default value for `allowHyperlink` property is `true`. +> * The default value for `allowHyperlink` property is `true`. ## Insert Link @@ -21,32 +21,38 @@ You can insert a hyperlink in a worksheet cell for quick access to related infor **User Interface**: In the active spreadsheet, click the cell where you want to create a hyperlink. Insert hyperlink can be done by any of the following ways: -* 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, or you can press Ctrl+K. -* Use the `addHyperlink()` method programmatically. +* 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, or you can press `Ctrl + K`. +* Use the [`addHyperlink`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#addhyperlink) method programmatically. ## Edit Hyperlink -You can change an existing hyperlink in your workbook by changing its destination or the text that is used to represent it. +You can update an existing hyperlink in your workbook by changing either: + +* **Destination Link** – Modify the link target (web address, cell reference, or sheet). +* **Display Text** – Change the text shown in the cell that represents the hyperlink. + **User Interface**: In the active spreadsheet, Select the cell that contains the hyperlink that you want to change. Editing the hyperlink while opening the dialog can be done by any one of the following ways: -* Select the INSERT tab in the Ribbon toolbar and choose the `Link` item. +* Select the **INSERT** tab in the Ribbon toolbar and choose the `Link` item. * Right-click the cell and then click Edit Hyperlink item in the context menu, or you can press Ctrl+K. In the Edit Link dialog box, make the changes that you want, and click UPDATE. ## Remove Hyperlink -Performing this operation remove a single hyperlink without losing the display text. +You can remove a hyperlink from a cell without losing the display text. +This operation clears only the link itself, leaving the text in the cell unchanged. **User Interface**: 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()` method programmatically. +* Use the [`removeHyperlink`](https://ej2.syncfusion.com/javascript +/documentation/api/spreadsheet#removehyperlink) method programmatically. ## How to change target attribute @@ -61,12 +67,14 @@ There is an event named `beforeHyperlinkClick` which triggers only on clicking h {% endhighlight %} {% endtabs %} - - ## Limitations * Inserting hyperlink not supported for multiple ranges. +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. + ## See Also * [Sorting](./sort) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md index 696bb0fa73..e676200fc7 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/notes.md @@ -11,7 +11,8 @@ documentation: ug The **Notes** feature is used to insert comments, provide feedback, suggest changes, or leave remarks on specific cells while reviewing documents in the Spreadsheet. You can enable or disable the notes functionality using the [enableNotes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property, which defaults to **true**. -When opening the Excel document with notes in the Spreadsheet, they will be displayed in the control. The cells containing notes will be indicated with a red colored triangle at the top-right corner. Hovering the mouse over these cells will display the content of the notes. +* When opening an Excel document with notes, they are displayed in the Spreadsheet control. +* Cells containing notes are marked with a small red triangle in the top-right corner. Hovering over these cells shows the note content. ![Adding, editing, and deleting a note in Spreadsheet](./images/spreadsheet_add_edit_delete_note.gif) @@ -61,31 +62,28 @@ You can remove notes from cells using the following ways: The note will be removed from the cell, and the red triangle indicator will be removed. -## Navigating between notes +## 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. ![Navigating between notes in Spreadsheet](./images/spreadsheet_next_previous_note.gif) ### Previous Note - 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. -* 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. +* Go to the **Review** tab, open the **Notes** dropdown, and select **Previous Note**. +* The Spreadsheet will highlight the previous note in the current worksheet, searching leftward and then upward. +* If no earlier note exists in the sheet, the search continues in the previous worksheet. +* If the workbook has no notes, the selection stays on the current cell. ### Next Note - To navigate to the next note: +* Go to the **Review** tab, open the **Notes** dropdown, and select **Next Note**. +* The Spreadsheet will highlight the next note in the current worksheet, searching rightward and then downward. +* If no later note exists in the sheet, the search continues in the next worksheet. +* If the workbook has no notes, the selection stays on the current cell. -* 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. -* 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. - -This functionality streamlines the process of reviewing notes across worksheets, ensuring efficient traversal and discovery. +This navigation feature streamlines reviewing by letting you jump directly between notes across worksheets. +It ensures efficient traversal, so you don’t miss any feedback or comments while working through your document. ## Show/Hide Note @@ -119,15 +117,28 @@ This functionality enhances workflow efficiency by providing flexible control ov ![Show/Hide notes in Spreadsheet](./images/spreadsheet_show_hide_note.gif) -## Saving the document with notes +## Saving the Document with Notes -The Spreadsheet data, including notes, can be saved and exported as an Excel document by selecting **File > Save As** in the ribbon menu. Exporting worksheets with notes is supported in Excel file formats such as Microsoft Excel (.xlsx) and Microsoft Excel 97-2003 (.xls). +You can save and export Spreadsheet data along with notes into an Excel document. +To do this, go to **File > Save As** in the ribbon menu. -> When exporting the Spreadsheet to file formats such as Comma Separated Values (.csv), Excel Macro-Enabled Workbook (.xlsm), Excel Binary Workbook (.xlsb), and PDF Document (.pdf), the notes will not be available. +Notes are preserved when exporting to: +* **Microsoft Excel (.xlsx)** +* **Microsoft Excel 97–2003 (.xls)** + +Notes are **not** included when exporting to: +* **Comma Separated Values (.csv)** +* **Excel Macro-Enabled Workbook (.xlsm)** +* **Excel Binary Workbook (.xlsb)** +* **PDF Document (.pdf)** ## Disabling notes -To disable the note functionality, you need to set the [enableNotes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property to **false**. After disabling, the notes in the document will not be shown when opened in the Spreadsheet. The **"Add Note"** option will not be shown in the context menu. The keyboard shortcuts for the note functionality will not work. +To disable the note functionality, you need to set the [enableNotes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_EnableNotes) property to **false**. + +* Notes in the document will not be displayed when opened in the Spreadsheet when `enableNotes` set to `false`. +* The **Add Note** option will be removed from the context menu. +* Keyboard shortcuts related to notes will no longer work. ![Spreadsheet with notes feature disabled](./images/spreadsheet_notes_disable.png) @@ -142,9 +153,14 @@ In the below example, the note functionality is disabled in the Spreadsheet. {% endhighlight %} {% endtabs %} -## Integrating notes during initial loading and using cell data binding +## Integrating Notes During Initial Loading and Using Cell Data Binding + +You can add notes to cells initially when the Spreadsheet loads by using **cell data binding**. +This is done through the `notes` property in the cell settings. -The notes can be added initially when the Spreadsheet loads using cell data binding. You need to use the `notes` property in the cell settings to add notes to the Spreadsheet. +* Define the `notes` property inside the cell configuration. +* When the Spreadsheet initializes, the notes will automatically appear in the specified cells. +* Each cell can have its own note content bound through the model. In the below example, you can navigate between notes using **Previous Note** and **Next Note** options, toggle individual note visibility with **Show/Hide Note**, display all notes at once using **Show All Notes** and see how notes are added using the `updateCell` method in the `created` event. diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-aws-s3-bucket.md new file mode 100644 index 0000000000..1d4250afff --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-aws-s3-bucket.md @@ -0,0 +1,176 @@ +--- +layout: post +title: Opening excel from AWS S3 in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from AWS S3 in EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: document-processing +control: Open file from AWS S3 +documentation: ug +--- + +# Open file from AWS S3 + +To load a file from AWS S3 in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in ASP.NET Core + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Amazon; +using Amazon.Runtime; +using Amazon.S3; +using Amazon.S3.Model; +using Amazon.S3.Transfer; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private IConfiguration _configuration; +public readonly string _accessKey; +public readonly string _secretKey; +public readonly string _bucketName; + +public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) +{ + _hostingEnvironment = hostingEnvironment; + _cache = cache; + _configuration = configuration; + _accessKey = _configuration.GetValue("AccessKey"); + _secretKey = _configuration.GetValue("SecretKey"); + _bucketName = _configuration.GetValue("BucketName"); +} + +``` + +5. Create the `OpenFromS3()` method to open the document from the AWS S3 bucket. + +```csharp + +[Route("api/[controller]")] +[ApiController] +public class SpreadsheetController : ControllerBase +{ + [HttpPost] + [Route("OpenFromS3")] + public async Task OpenFromS3([FromBody] FileOptions options) + { + try + { + //Set AWS region and credentials + var region = RegionEndpoint.USEast1; + var config = new AmazonS3Config { RegionEndpoint = region }; + var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); + //Create an S3 client to interact with AWS + using (var client = new AmazonS3Client(credentials, config)) + { + using (MemoryStream stream = new MemoryStream()) + { + //Get the full file name using input from the client + string bucketName = "your-bucket-name"; + string fileName = options.FileName + options.Extension; + //Download the file from S3 into memory + var response = await client.GetObjectAsync(new GetObjectRequest + { + BucketName = bucketName, + Key = fileName + }); + await response.ResponseStream.CopyToAsync(stream); + stream.Position = 0; // Reset stream position for reading + //Wrap the stream as a FormFile for processing + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + //Convert Excel file to JSON using Workbook.Open method. + var result = Workbook.Open(open); + //Return the JSON result to the client + return Content(result, "application/json"); + } + } + } + catch (Exception ex) + { + // Handle any errors and return a message + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } + } + + // To receive file details from the client. + public class FileOptions + { + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; + } +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "AccessKey": "Your Access Key from AWS S3", + "SecretKey": "Your Secret Key from AWS S3", + "BucketName": "Your Bucket name from AWS S3" +} + +``` + +N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the AWS S3 bucket into the client-side spreadsheet. + +```ts + + + +// Function to open a spreadsheet file from AWS S3 via an API call +const openFromS3 = () => { + spreadsheet.showSpinner(); + // Make a POST request to the backend API to fetch the file from S3. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + spreadsheet.hideSpinner(); + // Load the spreadsheet data into the UI. + spreadsheet.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); +}; + +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-azure-blob-storage.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-azure-blob-storage.md new file mode 100644 index 0000000000..ce426abca4 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-azure-blob-storage.md @@ -0,0 +1,154 @@ +--- +layout: post +title: Open excel from Azure Blob in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Azure Blob Storage in EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Azure Blob Storage +documentation: ug +--- + +# Open file from Azure Blob Storage + +To load a file from Azure Blob Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in ASP.NET Core + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using System; +using System.IO; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.Configuration; +using Syncfusion.EJ2.Spreadsheet; +using Azure.Storage.Blobs; +using Azure.Storage.Blobs.Specialized; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private readonly string _storageConnectionString; +private readonly string _storageContainerName; + +public SpreadsheetController(IConfiguration configuration) +{ + // Fetch values from appsettings.json + _storageConnectionString = configuration.GetValue("connectionString"); + _storageContainerName = configuration.GetValue("containerName"); +} + +``` + +5. Create the `OpenFromAzure()` method to open the document from the Azure Blob Storage. + +```csharp + +[HttpPost] +[Route("OpenFromAzure")] +public async Task OpenFromAzure([FromBody] FileOptions options) +{ + if (options == null || string.IsNullOrWhiteSpace(options.FileName) || string.IsNullOrWhiteSpace(options.Extension)) + return BadRequest("Invalid file options."); + + try + { + using (MemoryStream stream = new MemoryStream()) + { + string fileName = options.FileName + options.Extension; + + // Connect to Azure Blob Storage + BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); + BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); + BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName); + + // Download file into memory + await blockBlobClient.DownloadToAsync(stream); + stream.Position = 0; + + // Wrap stream as FormFile and convert to Spreadsheet-compatible JSON + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + + string result = Workbook.Open(open); + return Content(result, "application/json"); + } + } + catch (Exception ex) + { + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } +} + +// DTO that receives file details from the client +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "connectionString": "DefaultEndpointsProtocol=https;AccountName=yourAccount;AccountKey=yourKey;EndpointSuffix=core.windows.net", + "containerName": "your-container-name" +} + +``` +N> Note: Install the Azure.Storage.Blobs NuGet package in the service project. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Cloud Storage into the client-side spreadsheet. + +```ts + +; + +const openFromAzure = () => { + spreadsheet.showSpinner(); + + fetch("https://localhost:portNumber/api/spreadsheet/OpenFromAzure", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + FileName: fileInfo.name, // e.g., "Report" + Extension: fileInfo.extension // e.g., ".xlsx" + }) + }) + .then((res) => res.json()) + .then((data) => { + spreadsheet.hideSpinner(); + spreadsheet.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((err) => window.alert("Error importing file: " + err)); +}; + +``` \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-google-cloud-storage.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-google-cloud-storage.md new file mode 100644 index 0000000000..5ea75dc5a0 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-google-cloud-storage.md @@ -0,0 +1,145 @@ +--- +layout: post +title: Open excel from Google Cloud in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Google Cloud Storage in EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Google Cloud Storage +documentation: ug +--- + +# Open file from Google Cloud Storage + +To load a file from Google Cloud Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in ASP.NET Core + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Cloud.Storage.V1; +using Syncfusion.EJ2.Spreadsheet; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```Csharp + +private readonly string _bucketName; +private readonly StorageClient _storageClient; + +public SpreadsheetController(IConfiguration configuration) +{ + // Path of the JSON key downloaded from Google Cloud + string keyFilePath = configuration.GetValue("GoogleKeyFilePath"); + + // Create StorageClient with service-account credentials + var credentials = GoogleCredential.FromFile(keyFilePath); + _storageClient = StorageClient.Create(credentials); + + // Bucket that stores the Excel files + _bucketName = configuration.GetValue("BucketName"); +} + +``` + +5. Create the `OpenFromGoogleCloud()` method to open the document from the Google Cloud Storage. + +```Csharp + +[HttpPost] +[Route("OpenFromGoogleCloud")] +public IActionResult OpenFromGoogleCloud([FromBody] FileOptions options) +{ + try + { + using MemoryStream stream = new MemoryStream(); + + // / + string fileName = options.FileName + options.Extension; + + // Download the object into memory + _storageClient.DownloadObject(_bucketName, fileName, stream); + stream.Position = 0; + + // Feed the stream to Syncfusion to convert it into JSON + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + + string result = Workbook.Open(open); + return Content(result, "application/json"); + } + catch (Exception ex) + { + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } +} + +// DTO that receives file details from the client +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```Json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "GoogleKeyFilePath": "path/to/service-account-key.json", + "BucketName": "your-gcs-bucket-name" +} + +``` + +N> Note: Install the Google.Cloud.Storage.V1 NuGet package in the service project. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Cloud Storage into the client-side spreadsheet. + +```typescript +; + +const openFromGoogleCloud = () => { + spreadsheet.showSpinner(); + + fetch("https://localhost:portNumber/api/spreadsheet/OpenFromGoogleCloud", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + FileName: fileInfo.name, // e.g., "Report" + Extension: fileInfo.extension, // e.g., ".xlsx" + }), + }) + .then((res) => res.json()) + .then((data) => { + spreadsheet.hideSpinner(); + spreadsheet.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((err) => window.alert("Error importing file: " + err)); +}; +``` \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-google-drive.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-google-drive.md new file mode 100644 index 0000000000..0a162958c4 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-file/from-google-drive.md @@ -0,0 +1,188 @@ +--- +layout: post +title: Open excel from Google Drive in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Google Drive in EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Google Drive +documentation: ug +--- + +# Open file from Google Drive + +To load a file from Google Drive in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Set up Google Drive API + +You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/workspace/drive/api/guides/enable-sdk). + +**Step 2:** Create a Simple Spreadsheet Sample in ASP.NET Core + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. + +**Step 3:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +* Open the `SpreadsheetController.cs` file in your web service project. + +* Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Apis.Drive.v3; +using Google.Apis.Services; +using Syncfusion.EJ2.Spreadsheet; + +``` + +* Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +//variables for storing GDrive folderId, ApplicationName and Service-Accountkey credentials +public readonly string folderId; +public readonly string applicationName; +public readonly string credentialPath; + +//constructor for assigning credentials +public SpreadsheetController(IConfiguration configuration) +{ + folderId = configuration.GetValue("FolderId"); + credentialPath = configuration.GetValue("CredentialPath"); + applicationName = configuration.GetValue("ApplicationName"); +} + +``` + +* Create the `OpenExcelFromGoogleDrive()` method to open the document from the Google Drive. + +```csharp + +[HttpPost] +[Route("OpenExcelFromGoogleDrive")] +public async Task OpenExcelFromGoogleDrive([FromBody] FileOptions options) +{ +try +{ + // Create a memory stream to store file data + MemoryStream stream = new MemoryStream(); + + // Authenticate using Service Account + GoogleCredential credential; + // Load Google service account credentials + using (var streamKey = new FileStream(credentialPath, FileMode.Open, FileAccess.Read)) + { + credential = GoogleCredential.FromStream(streamKey) + .CreateScoped(DriveService.Scope.Drive); + } + + // Create Google Drive API service + var service = new DriveService(new BaseClientService.Initializer() + // Initialize Google Drive API client + { + HttpClientInitializer = credential, + ApplicationName = applicationName, + }); + + // List Excel files in Google Drive folder + var listRequest = service.Files.List(); + // Query Google Drive for Excel, CSV files in the specified folder + listRequest.Q = $"(mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' or mimeType='application/vnd.ms-excel' or mimeType='text/csv') and '{folderId}' in parents and trashed=false"; + listRequest.Fields = "files(id, name)"; + var files = await listRequest.ExecuteAsync(); + // Find the requested file + string fileIdToDownload = files.Files.FirstOrDefault(f => f.Name == options.FileName + options.Extension)?.Id; + // Get the file ID for the requested file name + if (string.IsNullOrEmpty(fileIdToDownload)) + // Get the file ID for the requested file name + return NotFound("File not found in Google Drive."); + // Download the file + var request = service.Files.Get(fileIdToDownload); + await request.DownloadAsync(stream); + // Download file content into memory stream + stream.Position = 0; + // Prepare file for Syncfusion Excel processing + OpenRequest open = new OpenRequest + // Wrap downloaded stream as FormFile for Syncfusion processing + { + File = new FormFile(stream, 0, stream.Length, options.FileName, options.FileName + options.Extension) + }; + + // Convert Excel file to JSON using Syncfusion XlsIO + var result = Workbook.Open(open); + return Content(result, "application/json"); +} +catch (Exception ex) +{ + return BadRequest("Error occurred while processing the file: " + ex.Message); +} +} + +// Class to store FileOptions +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +* Open the `appsettings.json` file in your web service project, add your Google Drive configuration details. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "CredentialPath": "path-to-your-service-account-key.json", + "FolderId": "your-google-drive-folder-id", + "ApplicationName": "YourAppName" +} + +``` + +N> Replace the **credential path**, **folderId** and **application name** in json file with your actual Google drive folder ID , your name for your application and the path for the JSON file. + +**Step 4:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and process the Excel file from the Google Drive and load the JSON result into the client-side spreadsheet using the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#openfromjson) method. + +```typescript + + +const openFromGoogleDrive = () => { + spreadsheet.showSpinner(); + // Make a POST request to the backend API to open the file from Google Drive. + // Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:your_port_number/api/spreadsheet/OpenExcelFromGoogleDrive', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension (.xlsx) + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + spreadsheet.hideSpinner(); + // Load the spreadsheet data into the UI + spreadsheet.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + spreadsheet.hideSpinner(); + window.alert('Error importing file from Google Drive: ' + error); + }); +}; +``` + +N> The Google.Apis.Drive.v3 NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-google-drive-integration) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-files.md new file mode 100644 index 0000000000..b940f06622 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/open-excel-files.md @@ -0,0 +1,543 @@ +--- +layout: post +title: Open Excel in EJ2 ASP.NET Core Spreadsheet Control | Syncfusion +description: Learn here all about Open Excel in Syncfusion EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Open +documentation: ug +--- + +# Open Excel Files in Syncfusion ASP.NET Core Spreadsheet Control + +The ASP.NET Core Spreadsheet component uses a server‑assisted workflow to import Excel files accurately and efficiently. When a user uploads an Excel file, the component sends the file to the server for parsing, ensuring smooth performance because the heavy processing workload is handled on the server side. + +On the server, the [`Syncfusion.EJ2.Spreadsheet library`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview), reads the Excel file and extracts all relevant details, including data, styles, formulas, formatting, and sheet structure. The server then converts this information into a Spreadsheet‑compatible JSON workbook. + +Once processing is complete, the JSON workbook is returned to the client, where the ASP.NET Core Spreadsheet component renders it in the browser. This workflow preserves the original Excel layout and ensures the imported content appears with full fidelity. + +To enable opening Excel files, set the [`allowOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowOpen) property to **true** and specify the service url using the [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) property. The control will send the uploaded file to this endpoint, where it is processed and returned as JSON for the Spreadsheet to render. + +For a quick walkthrough on how the open functionality works, refer to the following video: +{% youtube "https://www.youtube.com/watch?v=MpwiXmL1Z_o" %} + +## UI options to open Excel files + +In 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) property in the Spreadsheet control. You can also use the [`beforeOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeOpen) event to customize or cancel the import action, which gets triggered before opening an Excel file. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Opencontroller.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + +Please find the below table for the [beforeOpen](The following sample shows the `Open` option by using the [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) property in the Spreadsheet control. You can also use the [`beforeOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeOpen) event to trigger before opening an Excel file. +) event arguments. + +**BeforeOpenEventArgs – Properties** + +| **Property** | **Type** | **Description** | +|-------------------|-------------------------------|-------------| +| **cancel** | `boolean` | Specifies whether the open action should be canceled. | +| **file** | `FileList` \| `string` \| `File` | Specifies the file to be opened. | +| **parseOptions** | [`WorkbookParseOptions`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.WorkbookParseOptions.html) | Specifies the parsing options that control how the Excel file is interpreted during loading. | +| **password** | `string` | Specifies the password required to open the Excel file, if it is protected. | +| **requestData** | object | Specifies any additional data sent along with the open request. | +| **requestType** | `string` | Specifies the type of open request that triggered the **beforeOpen** event. Possible values:

• **initial** – The default request made when loading a workbook.
• **chunk** – A follow‑up request to load a portion of the workbook when chunking is enabled and the server provides a chunk plan.
• **thresholdLimitConfirmed** – A request made after the user confirms a threshold warning (such as *maximumDataLimit* or *maximumFileSizeLimit*) and chooses to proceed. | + +> * Use `Ctrl + O` keyboard shortcut to open Excel documents. +> * The default value of the [allowOpen](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowOpen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowOpen) property in previous code snippet. + +## Open Excel files programmatically + +To open Excel files programmatically in the Spreadsheet, you can use the [`open`](https://ej2.syncfusion.com/javascript +/documentation/api/spreadsheet/index-default#open) method of the Spreadsheet component. Before invoking this method, ensure that the [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) property is properly configured, as it is required for processing the file on the server. + +Please find the table below for the [`open`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#open) method arguments. + +| **Parameter** | **Type** | **Description** | +|----------|--------------|-----------------------------------| +| options | [OpenOptions](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openOptions) | Options for opening the excel file. | + + +The following code example demonstrates how to open an Excel file programmatically in the Spreadsheet. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + +{% endhighlight %} +{% endtabs %} + +## Supported Excel file formats for Open + +The following Excel file formats are supported for opening in the Spreadsheet component: + +* Microsoft Excel Workbook (.xlsx) +* Microsoft Excel 97–2003 Workbook (.xls) +* Comma-Separated Values (.csv) +* Excel Macro‑Enabled Workbook (.xlsm) +* Excel Binary Workbook (.xlsb) + +## Import options + +### Open Excel files from local system + +If you explore your machine to select and upload an Excel document using the file upload component, you will receive the uploaded document as a raw file in the success event of the file upload component. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#open) method to see the appropriate output. + +The following code example shows how to import an Excel document using file upload component in spreadsheet. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open-save-cs9/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenSaveController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open-save-cs9/openSaveController.cs %} +{% endhighlight %} +{% endtabs %} + +### Open Excel files from URL + +You can achieve to access the remote Excel file by using the [`created`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#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/javascript/documentation/api/spreadsheet/index-default#open) this file by using Spreadsheet component open method. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open-save-cs2/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenSaveController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open-save-cs2/openSaveController.cs %} +{% endhighlight %} +{% endtabs %} + +### Open Excel files 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/javascript/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. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open-from-blob/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open-from-blob/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + +### Load Workbook as JSON + +The Spreadsheet component allows you to load an entire workbook using a JSON object. This JSON is typically generated by the Spreadsheet server by converting an Excel file into a Spreadsheet‑compatible workbook JSON, but it can also be created manually. When loaded, the component reads the JSON and restores all workbook details, including sheets, cells, styles, formulas, formatting, and other associated metadata. + +You can optionally pass deserialization options to the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#openfromjson) method to ignore specific features when loading the JSON. For example, you can exclude styles, formulas, number formats, images, or conditional formatting. These options are optional—if you do not specify them, the method restores the full workbook details by default. + +Reference: Guide to Creating the JSON Structure: https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/how-to/create-a-object-structure. + +The following example demonstrates how to load a workbook JSON into the Spreadsheet component. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open-from-json-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenFromJsonController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open-from-json-cs1/openFromJsonController.cs %} +{% endhighlight %} +{% endtabs %} + +### Load server-side Excel files into Spreadsheet + +By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#openfromjson) method to load that `JSON data` into the Spreadsheet component. + +**Server Endpoint**: + +```csharp + public IActionResult Open([FromBody] FileOptions options) + { + OpenRequest open = new OpenRequest(); + string filePath = _env.ContentRootPath.ToString() + "\\Files\\" + options.FileName + ".xlsx"; + // Getting the file stream from the file path. + FileStream fileStream = new FileStream(filePath, FileMode.Open); + // Converting "MemoryStream" to "IFormFile". + IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); + open.File = formFile; + // Processing the Excel file and return the workbook JSON. + var result = Workbook.Open(open); + fileStream.Close(); + return Content(result); + } + + public class FileOptions + { + public string FileName { get; set; } = string.Empty; + } +``` + +**Client Side**: + +```js + + // Fetch call to server to load the Excel file. + fetch('https://localhost:{{Your_port_number}}/Home/Open', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ FileName: 'Sample' }), + }) + .then((response) => response.json()) + .then((data) => { + // Load the JSON data into spreadsheet. + spreadsheet.openFromJson({ file: data }); + }) + +``` + +You can find the server endpoint code to fetch and process the 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. + +```js +// To open an Excel file from the server. +fetch('https://localhost:{{port_number}}/Home/Open') +``` + +### Open Excel files with 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_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/javascript/documentation/api/spreadsheet/index-default#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. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + + + + +{% endhighlight %} + +{% highlight c# tabtitle="Controller.cs" %} +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; +} +{% endhighlight %} +{% endtabs %} + +### Open Base64-encoded Excel 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/javascript/documentation/api/spreadsheet/index-default#open) method in the spreadsheet. + +The following code example shows how to open the spreadsheet data as base64 string. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/base-64-string/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/base-64-string/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + + +### Open Excel files in read-only mode + +You can open Excel file into a read-only mode by using the [`openComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_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/javascript/documentation/api/spreadsheet/index-default#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#lockcells) methods. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open-readonly/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Opencontroller.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open-readonly/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + + +## Advanced Open options + +### Configure JSON deserialization + +Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#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 cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open-from-json/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open-from-json/openController.cs %} +{% endhighlight %} +{% endtabs %} + +### Optimize Open performance with parsing options + +Opening large Excel files into the ASP.NET Core Spreadsheet can sometimes lead to slower performance and increased memory usage. This is often caused by the processing of additional elements such as styles and number formats—even when the actual data content is minimal. For example, an Excel file with only a small amount of data but a large number of styled or formatted empty cells can significantly impact load time and memory consumption. + +To address this, we've introduced parsing options that allow users to selectively skip non-essential features during the open process. By enabling options like `IgnoreStyle` and `IgnoreFormat`, you can reduce the amount of data processed, resulting in: +* Faster load times +* Lower memory usage +* Smaller JSON responses + +These enhancements are especially beneficial for users working with large or complex Excel files, offering a more efficient and responsive experience. + +> **Note:** These options are ideal when styles and number formats are not critical to your use case and the focus is on loading the actual data efficiently. + +The code example below demonstrates how to configure the `IgnoreStyle` and `IgnoreFormat` parsing options on the `server-side`. + +**Code Snippet:** + +**Server-Side Configuration:** +```csharp +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + ... + open.ParseOptions = new WorkbookParseOptions() { + IgnoreStyle = true, + IgnoreFormat = true + }; + ... + return Content(Workbook.Open(open)); +} +``` + +### Open Large Excel Files with Chunk Response Processing + +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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.SpreadsheetOpenSettings.html#Syncfusion_EJ2_Spreadsheet_SpreadsheetOpenSettings_ChunkSize) property in the [`openSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenSettings) object. Set the [`chunkSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.SpreadsheetOpenSettings.html#Syncfusion_EJ2_Spreadsheet_SpreadsheetOpenSettings_ChunkSize) to a value greater than 0 (in bytes). The [`chunkSize`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.SpreadsheetOpenSettings.html#Syncfusion_EJ2_Spreadsheet_SpreadsheetOpenSettings_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. + +The following code example demonstrates the client-side and server-side configuration required for handling chunk-based responses when opening an Excel file. + +**Client Side**: + +**Client Side**: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + + + +{% endhighlight %} +{% endtabs %} + +**Server Endpoint**: + +```csharp +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + if (openRequest.Files.Count > 0) + { + open.File = openRequest.Files[0]; + } + Microsoft.Extensions.Primitives.StringValues chunkPayload; + if (openRequest.TryGetValue("chunkPayload", out chunkPayload)) + { + // The chunk payload JSON data includes information essential for processing chunked responses. + open.ChunkPayload = chunkPayload; + } + var result = Workbook.Open(open, 150); + return Content(result); +} +``` + +The [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_7-101537213) includes the server endpoint code for handling chunk-based open processing. After launching the server endpoint, update the `openUrl` property of the spreadsheet in the client-side sample with the server URL, as shown below. + +```js + // Specifies the service URL for processing the Excel file, converting it into a format suitable for loading in the spreadsheet. + + +``` + +## Customization + +### Add custom headers to Open requests + +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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeOpen) event, the custom header can be added to the request during open action. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open-header/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Opencontroller.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open-header/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + +### Handle external workbook reference confirmation + +When you open an Excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data. + +```csharp +public IActionResult Open(IFormCollection openRequest) + { + OpenRequest open = new OpenRequest(); + open.AllowExternalWorkbook = false; + open.File = openRequest.Files[0]; + open.Guid = openRequest["Guid"]; + return Content(Workbook.Open(open)); + } +``` + +> This feature is only applicable when importing an Excel file and not when loading JSON data or binding cell data. + +![External workbook confirmation dialog](./images/external-reference-dialog-alert.png) + +## Server configuration + +In the Spreadsheet component, Excel import processing is handled on the `server‑side`. Therefore, to enable Excel importing in your application, you need to configure a server using any of the following web service technologies: + +* WebAPI +* WCF Service +* ASP.NET MVC Controller Action + +The following code example demonstrates how to configure the server using a `WebAPI` service. + +```csharp + + [Route("api/[controller]")] + public class SpreadsheetController : Controller + { + //To open Excel file + [AcceptVerbs("Post")] + [HttpPost] + [EnableCors("AllowAllOrigins")] + [Route("Open")] + public IActionResult Open(IFormCollection openRequest) + { + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); + } + } +``` + +## Server dependencies + +Open helper functions are shipped in the Syncfusion.EJ2.Spreadsheet package, which is available in Essential Studio® and [`nuget.org`](https://www.nuget.org/). Following list of dependencies required for Spreadsheet open and save operations. + +* Syncfusion.EJ2 +* Syncfusion.EJ2.Spreadsheet +* Syncfusion.Compression.Base +* Syncfusion.XlsIO.Base + +And also refer [this](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save#server-dependencies) for more information. diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/performance-best-practices.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/performance-best-practices.md index 7284385844..c1f4462ac1 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/performance-best-practices.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/performance-best-practices.md @@ -19,7 +19,7 @@ Virtual scrolling is an essential performance feature in the Spreadsheet that en This approach significantly reduces initial load time, DOM size, and memory usage — resulting in smoother rendering and interaction, especially when working with thousands of rows or columns. -For more details, refer to the [virtual scrolling documentation](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/scrolling#virtual-scrolling). +For more details, refer to the [virtual scrolling documentation](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/scrolling#virtual-scrolling). ### Chunk response processing @@ -28,20 +28,20 @@ When opening large Excel files with extensive data and features, server response These chunks are combined on the client side to load the Excel data smoothly into the Spreadsheet. This approach avoids transmission failures due to memory constraints and ensures reliable and efficient loading of large files. To enable the chunk response processing feature, you can refer to the following UG section: -* [Chunk Response Processing](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#chunk-response-processing) +* [Chunk Response Processing](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save#chunk-response-processing) ### Configure JSON serialization options during open -Serialization options in the Spreadsheet allows you to exclude specific features—such as styles, formats, charts, images, wrap, etc.—from the `Workbook JSON object` when opening it in the Spreadsheet using the `openFromJson` method. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks. +Serialization options in the Spreadsheet allow you to exclude specific features—such as styles, formats, charts, images, wrap, etc.—from the `Workbook JSON object` when opening it in the Spreadsheet using the [`openFromJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks. This is particularly useful when: * You need only the raw data without formatting. -* You're opening the `Workbook JSON object` in the Spreadsheet using the `openFromJson` method. +* You're opening the `Workbook JSON object` in the Spreadsheet using the [`openFromJson`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/#openfromjson) method. * You want to minimize the size of the JSON payload and optimize processing speed. Refer to the following UG section to learn how to configure these options: -* [Configure JSON serialization options during open](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#configure-json-deserialization-options) +* [Configure JSON serialization options during open](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save#configure-json-deserialization-options) ### Configuring threshold limits @@ -80,7 +80,7 @@ public IActionResult Open(IFormCollection openRequest) To improve performance when opening large Excel files, use parsing options like `IgnoreStyle` and `IgnoreFormat` to skip unnecessary styles and formats. This reduces memory usage, speeds up loading, and minimizes JSON size—especially helpful for files with many styled but empty cells. To learn how to configure these parsing options, please refer to the UG section below. -* [Configure Parsing Options](./open-save#improving-excel-file-open-performance-with-parsing-options) +* [Configure Parsing Options](./open-excel-files#optimize-open-performance-with-parsing-options) ## How to improve performance on formula calculation in Spreadsheet? @@ -96,7 +96,7 @@ Enabling manual mode is highly beneficial when: * Applying formulas dynamically to a large number of cells. * You want to postpone calculations until all content or changes are finalized. -To learn more about Manual Calculation Mode and how to enable it, you can refer to the following [UG link](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/formulas#manual-mode). +To learn more about Manual Calculation Mode and how to enable it, you can refer to the following [UG link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/formulas#manual-mode). ## How to improve save performance in the Spreadsheet? @@ -104,7 +104,7 @@ To learn more about Manual Calculation Mode and how to enable it, you can refer When saving large Excel files with extensive data and features using **File → Save As** or the **save** method, the Spreadsheet triggers a server API call through a form submit operation. This can lead to performance issues such as timeouts or delays, particularly due to the size and complexity of the workbook. -To mitigate these issues during the save operation, you can set the `isFullPost` property to **false** in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event of the Spreadsheet. +To mitigate these issues during the save operation, you can set the [`isFullPost`](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet/beforeSaveEventArgs/#isfullpost) property to **false** in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event of the Spreadsheet. The following code example shows how to set `isFullPost` to **false** in the Spreadsheet component: @@ -125,18 +125,20 @@ The following code example shows how to set `isFullPost` to **false** in the Spr ### Configure JSON serialization options during save -Serialization options in the Spreadsheet allows you to exclude specific features such as styles, formats, charts, images, wrap, etc. from the `Workbook JSON object` when saving it using the `saveAsJson` method in the Spreadsheet. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks. +Serialization options in the Spreadsheet allow you to exclude specific features such as styles, formats, charts, images, wrap, etc. from the `Workbook JSON object` when saving it using the [`saveAsJson`](https://helpej2.syncfusion.com/javascript +/documentation/api/spreadsheet/#saveasjson) method in the Spreadsheet. By skipping unnecessary features, you can significantly improve performance, especially when working with large or complex workbooks. This is particularly useful when: * You need only the raw data without formatting. -* You're saving the `Workbook JSON object` using the `saveAsJson` method in the Spreadsheet. +* You're saving the `Workbook JSON object` using the [`saveAsJson`](https://helpej2.syncfusion.com/javascript +/documentation/api/spreadsheet/#saveasjson) method in the Spreadsheet. * You want to minimize the size of the JSON payload and optimize processing speed. Proper use of serialization options during save improves performance and reduces the time taken during the save process. Refer to the following UG section to learn how to configure these options: -* [Configure JSON serialization options during save](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#configure-json-serialization-options) +* [Configure JSON serialization options during save](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save#configure-json-serialization-options) ## How to improve cell selection performance in Spreadsheet? @@ -164,6 +166,6 @@ You can disable aggregate calculation using the following code example: ## See Also -* [Open and Save](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save) -* [Docker Deployment](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/docker-deployment) -* [Scrolling](https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/scrolling) +* [Open and Save](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save) +* [Docker Deployment](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/docker-deployment) +* [Scrolling](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/scrolling) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/protect-sheet.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/protect-sheet.md index 3bb05009f8..602d7e22ba 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/protect-sheet.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/protect-sheet.md @@ -7,18 +7,22 @@ control: Protect Sheet documentation: ug --- - # Protection in ASP.NET Core Spreadsheet Control -Sheet protection helps you to prevent the users from modifying the data in the spreadsheet. +Sheet protection allows you to prevent users from modifying data in the Spreadsheet. +When a sheet is protected, editing actions such as typing, formatting, or deleting content are restricted, ensuring that important data remains secure. + +You can enable protection by using the [`protectSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#protectsheet) method. +This locks the sheet and restricts user actions based on the protection settings you configure. ## Protect Sheet Protect sheet feature helps you to prevent the unknown users from accidentally changing, editing, moving, or deleting data in a spreadsheet. And you can also protect the sheet with password. You can use the [`isProtected`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_IsProtected) property to enable or disable the Protecting functionality. -N> The default value for `isProtected` property is `false`. +> * The default value for `isProtected` property is `false`. -By default in protected sheet, selecting, formatting, inserting, deleting functionalities are disabled. To enable some of the above said functionalities the `protectSettings` options are used in a protected spreadsheet. +By default in protected sheet, selecting, formatting, inserting, deleting functionalities are disabled. To enable some of the above said functionalities +the `protectSettings` options are used in a protected spreadsheet. The available `protectSettings` options in spreadsheet are, @@ -30,7 +34,7 @@ The available `protectSettings` options in spreadsheet are, | `Format Columns` | Used to perform Column formatting. | | `Insert Link` | Used to perform Hyperlink Insertions. | -N> * The default value for all `protectSettings` options are `false`. +> * The default value for all `protectSettings` options are `false`. By default, the `Protect Sheet` module is injected internally into the Spreadsheet to perform sheet protection function. @@ -40,7 +44,8 @@ In the active Spreadsheet, the sheet protection can be done by any of the follow * Select the Protect Sheet item in the Ribbon toolbar under the Data Tab, and then select your desired options. * Right-click the sheet tab, select the Protect Sheet item in the context menu, and then select your desired options. -* Use the `protectSheet()` method programmatically. +* Use the [`protectSheet`](https://ej2.syncfusion.com/javascript +/documentation/api/spreadsheet#protectsheet) method programmatically. The following example shows `Protect Sheet` functionality with password in the Spreadsheet control. @@ -53,27 +58,26 @@ The following example shows `Protect Sheet` functionality with password in the S {% endhighlight %} {% endtabs %} - - ### Limitations of Protect sheet * Password encryption is not supported ## Unprotect Sheet -Unprotect sheet is used to enable all the functionalities that are already disabled in a protected spreadsheet. +The **Unprotect Sheet** feature restores all functionalities that were disabled in a protected spreadsheet. +Once a sheet is unprotected, users can edit, format, insert, delete, and move data without restrictions. **User Interface**: -In the active Spreadsheet, the sheet can be unprotected by any of the following ways: +In the active Spreadsheet, the sheet Unprotection can be done by any of the following ways: * Select the `Unprotect Sheet` item in the Ribbon toolbar under the Data Tab. * Right-click the sheet tab, select the `Unprotect Sheet` item in the context menu. -* Use the `unprotectSheet()` method programmatically. +* Use the [`unprotectSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#unprotectsheet) method programmatically. ## Unlock the particular cells in the protected sheet -In protected spreadsheet, to make some particular cell or range of cells are editable, you can use `lockCells()` method, with the parameter `range` and `isLocked` property as false. +In protected spreadsheet, to make some particular cell or range of cells are editable, you can use [`lockCells`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#lockcells) method, with the parameter `range` and `isLocked` property as false. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -86,9 +90,9 @@ In protected spreadsheet, to make some particular cell or range of cells are edi ## Make cells read-only without protecting worksheet -Previously, you could make cells read-only by protecting the entire sheet using the `protectSheet` method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the `lockCells` method, passing the `range` parameter and setting the `isLocked` property to **false**. +Previously, you could make cells read-only by protecting the entire sheet using the [protectSheet](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#protectsheet) method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the [lockCells](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#lockcells) method, passing the `range` parameter and setting the `isLocked` property to **false**. -Now, you can make an entire row, an entire column, or a specific range of cells read-only using the `setRangeReadOnly` method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table: +Now, you can make an entire row, an entire column, or a specific range of cells read-only using the [setRangeReadOnly](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#setrangereadonly) method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table: | Parameter | Description | |-----|------| @@ -109,7 +113,38 @@ spreadsheet.setRangeReadOnly(true, '3:3', 0) spreadsheet.setRangeReadOnly(true, 'A:A', 0) ``` -You can make the cells read-only in the cell data binding by setting the `isReadOnly` property to **true** for the respective rows, columns, and cells. +You can make the cells read-only in the cell data binding by setting the `isReadOnly` property to **true** for the respective rows, columns, and cells. Please refer to the code snippet below to see how to set cells to read-only in the cell data binding: + +**Client Side**: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} The following example demonstrates how to make rows, columns, and cells read-only without protecting the sheet: @@ -124,13 +159,9 @@ The following example demonstrates how to make rows, columns, and cells read-onl ## Protect Workbook -Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. - -You can use the [`password`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Password) property to protect workbook with password. +Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. You can use the [`password`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Password) property to protect workbook with password. You can use the [`isProtected`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_IsProtected) property to protect or unprotect the workbook without the password. -You can use the [`isProtected`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_IsProtected) property to protect or unprotect the workbook without the password. - -N> The default value for `isProtected` property is `false`. +> The default value for `isProtected` property is `false`. **User Interface**: @@ -147,9 +178,7 @@ The following example shows `Protect Workbook` by using the [`isProtected`](http {% endhighlight %} {% endtabs %} - - -The following example shows `Protect Workbook` by using the [`password`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Password) property in the Spreadsheet control. To unprotect the workbook, click the unprotect workbook button in the data tab and provide the password as Syncfusion® in the dialog box. +The following example shows `Protect Workbook` by using the [`password`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Password) property in the Spreadsheet control. To unprotect the workbook, click the unprotect workbook button in the data tab and provide the password as syncfusion® in the dialog box. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -160,11 +189,9 @@ The following example shows `Protect Workbook` by using the [`password`](https:/ {% endhighlight %} {% endtabs %} - - ## Unprotect Workbook -Unprotect Workbook is used to enable the insert, delete, rename, move, copy, hide or unhide sheets feature in the spreadsheet. +The **Unprotect Workbook** feature restores full access to workbook-level operations such as inserting, deleting, renaming, moving, copying, hiding and unhiding sheets that were restricted when the workbook was protected. **User Interface**: @@ -172,6 +199,10 @@ In the active Spreadsheet, the workbook can be unprotected in any of the followi * Select the `Unprotect Workbook` item in the Ribbon toolbar under the Data Tab and provide the valid password in the dialog box. +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. + ## See Also * [Hyperlink](./link) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/ribbon.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/ribbon.md index e936f08242..c4d473bbe1 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/ribbon.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/ribbon.md @@ -18,20 +18,15 @@ You can customize the ribbon using the following methods, | Method | Action | |-------|---------| -| `hideRibbonTabs` | Used to show or hide the existing ribbon tabs. | -| `enableRibbonTabs` | Used to enable or disable the existing -ribbon tabs. | -| `addRibbonTabs` | Used to add custom ribbon tabs. | -| `hideToolbarItems`| Used to show or hide the existing ribbon -toolbar items. | -| `enableToolbarItems` | Used to enable or disable the specified -toolbar items. | -| `addToolbarItems` | Used to add the custom items in ribbon -toolbar. | -| `hideFileMenuItems` | Used to show or hide the ribbon file menu -items. | -| `enableFileMenuItems`| Used to enable or disable file menu items. | -| `addFileMenuItems`| Used to add custom file menu items. | +| [`hideRibbonTabs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#hideribbontabs) | Used to show or hide the existing ribbon tabs. | +| [`enableRibbonTabs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#enableribbontabs) | Used to enable or disable the existing ribbon tabs. | +| [`addRibbonTabs`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#addribbontabs) | Used to add custom ribbon tabs. | +| [`hideToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#hidetoolbaritems) | Used to show or hide the existing ribbon toolbar items. | +| [`enableToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#enabletoolbaritems) | Used to enable or disable the specified toolbar items. | +| [`addToolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#addtoolbaritems) | Used to add the custom items in ribbon toolbar. | +| [`hideFileMenuItems`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#hidefilemenuitems) | Used to show or hide the ribbon file menu items. | +| [`enableFileMenuItems`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#enablefilemenuitems) | Used to enable or disable file menu items. | +| [`addFileMenuItems`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#addfilemenuitems) | Used to add custom file menu items. | The following code example shows the usage of ribbon customization. @@ -44,7 +39,9 @@ The following code example shows the usage of ribbon customization. {% endhighlight %} {% endtabs %} +## Note +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/rows-and-columns.md index 8e291b564b..ee80af8733 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/rows-and-columns.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/rows-and-columns.md @@ -10,11 +10,13 @@ documentation: ug # Rows and columns in ASP.NET Core Spreadsheet control -Spreadsheet is a tabular format consisting of rows and columns. The intersection point of rows and columns are called as cells. The list of operations that you can perform in rows and columns are, +A spreadsheet is organized in a tabular format consisting of **rows** and **columns**. The intersection of a row and a column is called a **cell**. -* Insert -* Delete -* Show and Hide +The list of operations that you can perform on rows and columns includes: + +* **Insert** – Add new rows or columns to the worksheet. +* **Delete** – Remove existing rows or columns from the worksheet. +* **Show and Hide** – Control the visibility of rows and columns by hiding or unhiding them. ## Insert @@ -24,7 +26,7 @@ You can insert rows or columns anywhere in a spreadsheet. Use the [`allowInsert` The rows can be inserted in the following ways, -* Using `insertRow` method, you can insert the rows once the component is loaded. +* Using [`insertRow`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#insertrow) method, you can insert the rows once the component is loaded. * Using context menu, insert the empty rows in the desired position. The following code example shows the options for inserting rows in the spreadsheet. @@ -38,13 +40,11 @@ The following code example shows the options for inserting rows in the spreadshe {% endhighlight %} {% endtabs %} - - ### Column The columns can be inserted in the following ways, -* Using `insertColumn` method, you can insert the columns once the component is loaded. +* Using [`insertColumn`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#insertcolumn) method, you can insert the columns once the component is loaded. * Using context menu, insert the empty columns in the desired position. The following code example shows the options for inserting columns in the spreadsheet. @@ -58,15 +58,13 @@ The following code example shows the options for inserting columns in the spread {% endhighlight %} {% endtabs %} - - ## Delete Delete support provides an option for deleting the rows and columns in the spreadsheet. Use [`allowDelete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowDelete) property to enable or disable the delete option in Spreadsheet. The rows and columns can be deleted dynamically in the following ways, -* Using `delete` method, you can delete the loaded rows and columns. +* Using [`delete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#delete) method, you can delete the loaded rows and columns. * Using context menu, you can delete the selected rows and columns. The following code example shows the delete operation of rows and columns in the spreadsheet. @@ -80,7 +78,14 @@ The following code example shows the delete operation of rows and columns in the {% endhighlight %} {% endtabs %} +## Limitations of insert and delete + +The following features have some limitations in Insert/Delete: +* Insert row/column between the formatting applied cells. +* Insert row/column between the data validation. +* Insert row/column between the conditional formatting applied cells. +* Insert/delete row/column between the filter applied cells. ## Hide and show @@ -113,15 +118,13 @@ The following code example shows the hide/show rows and columns operation in the {% endhighlight %} {% endtabs %} - - ## Size -You can change the size of rows and columns in the spreadsheet by using `setRowsHeight` and `setColumnsWidth` methods. +You can change the size of rows and columns in the spreadsheet by using [setRowsHeight](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#setrowsheight) and [setColumnsWidth](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#setcolumnswidth) methods. ### Row -You can change the height of single or multiple rows by using the `setRowsHeight` method. +You can change the height of single or multiple rows by using the [setRowsHeight](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#setrowsheight) method. You can provide the following type of ranges to the method: @@ -130,6 +133,8 @@ You can provide the following type of ranges to the method: * Multiple rows with discontinuous range: `['1:10', '15:25', '30:40']` * Multiple rows with different sheets: `[Sheet1!1:50, 'Sheet2!1:50', 'Sheet3!1:50']` +Additionally, each row model includes a [customHeight](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.RowModel.html#Syncfusion_EJ2_Spreadsheet_RowModel_CustomHeight) property that indicates the row height was explicitly set either by manually adjusting the row header boundary or programmatically. When [customHeight](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.RowModel.html#Syncfusion_EJ2_Spreadsheet_RowModel_CustomHeight) is true, the height is treated as manually defined and will not change automatically when enabling wrap text, increasing font size, or changing the font family; the height remains fixed until the user or code updates it. + The following code example shows how to change the height for single/multiple rows in the spreadsheet. {% tabs %} @@ -143,7 +148,7 @@ The following code example shows how to change the height for single/multiple ro ### Column -You can change the width of single or multiple columns by using the `setColumnsWidth` method. +You can change the width of single or multiple columns by using the [setColumnsWidth](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#setcolumnswidth) method. You can provide the following type of ranges to the method: @@ -152,6 +157,8 @@ You can provide the following type of ranges to the method: * Multiple columns with discontinuous range: `['A:C', 'G:I', 'K:M']` * Multiple columns with different sheets: `[Sheet1!A:H, 'Sheet2!A:H', 'Sheet3!A:H']` +Additionally, each column model includes a [customWidth](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.ColumnModel.html#Syncfusion_EJ2_Spreadsheet_ColumnModel_Width) property that indicates the column width was explicitly set either by manually adjusting the column header boundary or programmatically. When [customWidth](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.ColumnModel.html#Syncfusion_EJ2_Spreadsheet_ColumnModel_Width) is true, the width is treated as manually defined. + The following code example shows how to change the width for single/multiple columns in the spreadsheet. {% tabs %} @@ -175,14 +182,9 @@ The following code example shows how to change the text in the column headers. {% endhighlight %} {% endtabs %} -## Limitations of insert and delete +## Note -The following features have some limitations in Insert/Delete: - -* Insert row/column between the formatting applied cells. -* Insert row/column between the data validation. -* Insert row/column between the conditional formatting applied cells. -* Insert/delete row/column between the filter applied cells. +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-aws-s3-bucket.md new file mode 100644 index 0000000000..10289418bc --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-aws-s3-bucket.md @@ -0,0 +1,159 @@ +--- +layout: post +title: Saving excel to AWS S3 in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn how to save a Excel file from AWS S3 in EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: document-processing +control: Save file to AWS S3 +documentation: ug +--- + +# Save spreadsheet to AWS S3 + +To save a file to the AWS S3, you can follow the steps below. + +**Step 1:** Create a Simple Spreadsheet Sample in ASP.NET Core + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Amazon; +using Amazon.Runtime; +using Amazon.S3; +using Amazon.S3.Model; +using Amazon.S3.Transfer; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields + +```csharp + +private IConfiguration _configuration; +public readonly string _accessKey; +public readonly string _secretKey; +public readonly string _bucketName; + +public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) +{ + _hostingEnvironment = hostingEnvironment; + _cache = cache; + _configuration = configuration; + _accessKey = _configuration.GetValue("AccessKey"); + _secretKey = _configuration.GetValue("SecretKey"); + _bucketName = _configuration.GetValue("BucketName"); +} + +``` + +5. Create the `SaveToS3()` method to open the document from the AWS S3 bucket + +```csharp + +[HttpPost] +[Route("SaveToS3")] +public async Task SaveToS3([FromForm] SaveSettings saveSettings) +{ + try + { + // Convert spreadsheet JSON to Excel file stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; // Reset stream for upload + + // Set AWS region and credentials + var region = RegionEndpoint.USEast1; + var config = new AmazonS3Config { RegionEndpoint = region }; + var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); + + // Define S3 bucket and file name + string bucketName = "your-bucket-name"; + string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); + + // Initialize S3 client + using (var client = new AmazonS3Client(credentials, config)) + { + // Use TransferUtility to upload the file stream + var fileTransferUtility = new TransferUtility(client); + await fileTransferUtility.UploadAsync(fileStream, bucketName, fileName); + } + + // Return success message + return Ok("Excel file successfully saved to AWS S3."); + } + catch (Exception ex) + { + } +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "AccessKey": "Your Access Key from AWS S3", + "SecretKey": "Your Secret Key from AWS S3", + "BucketName": "Your Bucket name from AWS S3" +} + +``` + +N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```js +// Function to save the current spreadsheet to AWS S3 via an API call +const saveToS3 = () => { + // Convert the current spreadsheet to JSON format + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to S3. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToS3', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-azure-blob-storage.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-azure-blob-storage.md new file mode 100644 index 0000000000..c7c3c2933b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-azure-blob-storage.md @@ -0,0 +1,126 @@ +--- +layout: post +title: Save excel to Azure Blob in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file from Azure Blob Storage in EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Azure Blob Storage +documentation: ug +--- + +# Save file to Azure Cloud Storage + +To save a file to Azure Blob Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in ASP.NET Core + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using System; +using System.IO; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.Configuration; +using Syncfusion.EJ2.Spreadsheet; +using Azure.Storage.Blobs; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private readonly string _storageConnectionString; +private readonly string _storageContainerName; + +public SpreadsheetController(IConfiguration configuration) +{ + _storageConnectionString = configuration.GetValue("connectionString"); + _storageContainerName = configuration.GetValue("containerName"); +} + +``` + +5. Create the `SaveToAzure()` method to save the document to the Azure Blob storage. + +```csharp + +[HttpPost] +[Route("SaveToAzure")] +public async Task SaveToAzure([FromForm] SaveSettings saveSettings) +{ + if (saveSettings == null || string.IsNullOrWhiteSpace(saveSettings.FileName)) + return BadRequest("Invalid save settings."); + + try + { + // Convert spreadsheet JSON to Excel/PDF/CSV stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; + + // Define Azure Blob Storage client + BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); + BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); + + // Define blob name using file name and save type + string blobName = $"{saveSettings.FileName}.{saveSettings.SaveType.ToString().ToLower()}"; + BlobClient blobClient = containerClient.GetBlobClient(blobName); + + // Upload the Excel file stream to Azure Blob Storage (overwrite if exists) + await blobClient.UploadAsync(fileStream, overwrite: true); + + return Ok("Excel file successfully saved to Azure Blob Storage."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Azure Blob Storage: " + ex.Message); + } +} + +``` + +N> Note: Install the Azure.Storage.Blobs NuGet package in the service project. Ensure the configured connection string has permissions to read and write blobs in the specified container. + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```js + +; + +const saveToAzure = () => { + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); + formData.append("FileName", loadedFileInfo.fileName); // e.g., "Report" + formData.append("saveType", loadedFileInfo.saveType); // e.g., "Xlsx" + formData.append("JSONData", JSON.stringify(json.jsonObject.Workbook)); + formData.append( + "PdfLayoutSettings", + JSON.stringify({ FitSheetOnOnePage: false }) + ); + + fetch("https://localhost:portNumber/api/spreadsheet/SaveToAzure", { + method: "POST", + body: formData + }) + .then((res) => { + if (!res.ok) { + throw new Error(`Save failed with status ${res.status}`); + } + window.alert("Workbook saved successfully to Azure Blob Storage."); + }) + .catch((err) => window.alert("Error saving to server: " + err)); + }); +}; + +``` diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-google-cloud-storage.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-google-cloud-storage.md new file mode 100644 index 0000000000..fb6f6fde61 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-google-cloud-storage.md @@ -0,0 +1,114 @@ +--- +layout: post +title: Save excel to Google Cloud in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file from Google Cloud Storage in EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Google Cloud Storage +documentation: ug +--- + +# Save file to Google Cloud Storage + +To save a file to Google Cloud Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in ASP.NET Core + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Cloud.Storage.V1; +using Syncfusion.EJ2.Spreadsheet; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp +private readonly string _bucketName; +private readonly StorageClient _storageClient; + +public SpreadsheetController(IConfiguration configuration) +{ + // Path of the JSON key downloaded from Google Cloud + string keyFilePath = configuration.GetValue("GoogleKeyFilePath"); + + // Create StorageClient with service-account credentials + var credentials = GoogleCredential.FromFile(keyFilePath); + _storageClient = StorageClient.Create(credentials); + + // Bucket that stores the Excel files + _bucketName = configuration.GetValue("BucketName"); +} +``` + +5. Create the `SaveToGoogleCloud()` method to save the document to the Google Cloud storage. + +```csharp +[HttpPost] +[Route("SaveToGoogleCloud")] +public async Task SaveToGoogleCloud([FromForm] SaveSettings saveSettings) +{ + try + { + // Convert spreadsheet JSON to Excel stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; + + // File name inside the bucket + string fileName = $"{saveSettings.FileName}.{saveSettings.SaveType.ToString().ToLower()}"; + + // Upload the stream to Google Cloud Storage + await _storageClient.UploadObjectAsync(_bucketName, fileName, null, fileStream); + + return Ok("Excel file successfully saved to Google Cloud Storage."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Google Cloud Storage: " + ex.Message); + } +} +``` + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```js + +const saveToGoogleCloud = () => { + spreadsheet.saveAsJson().then(json => { + const formData = new FormData(); + formData.append('FileName', loadedFileInfo.fileName); // e.g., "Report" + formData.append('saveType', loadedFileInfo.saveType); // e.g., "Xlsx" + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) + ); + + fetch('https://localhost:portNumber/api/spreadsheet/SaveToGoogleCloud', { + method: 'POST', + body: formData + }) + .then(res => { + if (!res.ok) { + throw new Error(`Save failed with status ${res.status}`); + } + window.alert('Workbook saved successfully to Google Cloud Storage.'); + }) + .catch(err => window.alert('Error saving to server: ' + err)); + }); +}; +``` + +N> Note: The back-end requires the Google.Cloud.Storage.V1 NuGet package and a service-account key that has Storage Object Admin (or equivalent) permissions on the target bucket. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-google-drive.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-google-drive.md new file mode 100644 index 0000000000..604f516e5f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-file/to-google-drive.md @@ -0,0 +1,200 @@ +--- +layout: post +title: Save excel to Google Drive in EJ2 ASP.NET Core Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file to Google Drive from EJ2 ASP.NET Core Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Google Drive +documentation: ug +--- + +# Save file to Google Drive + +To save a file to Google Drive in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Set up Google Drive API + +You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/workspace/drive/api/guides/enable-sdk). + +**Step 2:** Create a Simple Spreadsheet Sample in ASP.NET Core + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. + +**Step 3:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +* Open the `SpreadsheetController.cs` file in your web service project. + +* Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Apis.Drive.v3; +using Google.Apis.Services; +using Syncfusion.EJ2.Spreadsheet; + +``` + +* Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +//variables for storing GDrive folderId, ApplicationName and Service-Accountkey credentials +public readonly string folderId; +public readonly string applicationName; +public readonly string credentialPath; + +//constructor for assigning credentials +public SpreadsheetController(IConfiguration configuration) +{ + folderId = configuration.GetValue("FolderId"); + credentialPath = configuration.GetValue("CredentialPath"); + applicationName = configuration.GetValue("ApplicationName"); +} + +``` + +* Create the `SaveExcelToGoogleDrive()` method to save the document to the Google Drive. + +```csharp + +[HttpPost] +[Route("SaveExcelToGoogleDrive")] +public async Task SaveExcelToGoogleDrive([FromForm] SaveSettings saveSettings) +{ + try + { + //Generate Excel file stream using Syncfusion + Stream generatedStream = Workbook.Save(saveSettings); + //Copy to MemoryStream to ensure full content is flushed and seekable + MemoryStream excelStream = new MemoryStream(); + // Copy generated stream to MemoryStream for upload + await generatedStream.CopyToAsync(excelStream); + excelStream.Position = 0; // Reset position for upload + // Prepare file name with extension based on SaveType + string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); + // Validate service account credential file + if (!System.IO.File.Exists(credentialPath)) + throw new FileNotFoundException($"Service account key file not found at {credentialPath}"); + //Authenticate using Service Account credentials + GoogleCredential credential; + // Load Google service account credentials + using (var streamKey = new FileStream(credentialPath, FileMode.Open, FileAccess.Read)) + { + credential = GoogleCredential.FromStream(streamKey) + .CreateScoped(DriveService.Scope.Drive); + } + //Initialize Google Drive API service + var service = new DriveService(new BaseClientService.Initializer() + // Initialize Google Drive API client + { + HttpClientInitializer = credential, + ApplicationName = applicationName, + }); + //Prepare file metadata + var fileMetadata = new Google.Apis.Drive.v3.Data.File() + { + Name = fileName + }; + //Check if file already exists in the specified folder + var listRequest = service.Files.List(); + listRequest.Q = $"name='{fileName}' and trashed=false"; + // Query Google Drive for Excel, CSV files in the specified folder + listRequest.Fields = "files(id)"; + var files = await listRequest.ExecuteAsync(); + // Reset stream position before upload (important for both update and create) + excelStream.Position = 0; + // Set MIME type dynamically based on SaveType + string mimeType = saveSettings.SaveType switch + { + SaveType.Xlsx => "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + SaveType.Xls => "application/vnd.ms-excel", + SaveType.Csv => "text/csv", + }; + + if (files.Files.Any()) + { + // If File exists Update in the existing file + var updateRequest = service.Files.Update(fileMetadata, files.Files[0].Id, excelStream, mimeType); + updateRequest.Fields = "id"; + await updateRequest.UploadAsync(); + } + else + { + // If File does not exist, Create new file + var createRequest = service.Files.Create(fileMetadata, excelStream,mimeType); + createRequest.Fields = "id"; + await createRequest.UploadAsync(); + } + return Ok("Excel file successfully saved/updated in Google Drive."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Google Drive: " + ex.Message); + } +} + +``` + +* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration + +```json +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "CredentialPath": "path-to-your-service-account-key.json", + "FolderId": "your-google-drive-folder-id", + "ApplicationName": "YourAppName" +} +``` + +N> Replace the **credential path**, **folderId** and **application name** in json file with your actual Google drive folder ID , your name for your application and the path for the JSON file. + +**Step 4:** Modify the index file in the Spreadsheet sample to save the Spreadsheet as JSON data using the [`saveAsJson`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#saveasjson) method and send the saved JSON to the server via fetch call. + +```typescript +; + +// Save the current spreadsheet to Google Drive +const saveToGoogleDrive = () => { + // Convert spreadsheet data to JSON + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); // Append required fields for backend API + formData.append("FileName", loadedFileInfo.fileName); // File name + formData.append("SaveType", loadedFileInfo.saveType); // Format type (Xlsx, Xls, Csv) + formData.append("JSONData", JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + "PdfLayoutSettings", + JSON.stringify({ FitSheetOnOnePage: false }), + ); // PDF settings + // Make a POST request to the backend API to save the file to Google Drive. + // Replace the URL with your local or hosted endpoint URL. + fetch( + "https://localhost:your_port_number/api/spreadsheet/SaveExcelToGoogleDrive", + { + method: "POST", + body: formData, + }, + ) + .then((response) => { + if (!response.ok) throw new Error(`Save failed: ${response.status}`); + window.alert("Workbook saved successfully to Google Drive."); + }) + .catch((error) => { + window.alert("Error saving to Google Drive: " + error); + }); + }); +}; +``` + +N> The Google.Apis.Drive.v3 NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-google-drive-integration) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-files.md new file mode 100644 index 0000000000..1015618791 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/save-excel-files.md @@ -0,0 +1,438 @@ +--- +layout: post +title: Save Excel Files in EJ2 ASP.NET Core Spreadsheet Control | Syncfusion +description: Learn here all about Saving Excel files in Syncfusion ASP.NET Spreadsheet component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Save +documentation: ug +--- + +# Save Excel Files in Syncfusion ASP.NET Core Control + +When exporting an Excel file from the ASP.NET Core Spreadsheet component, the process is handled through a streamlined server‑side workflow. The Spreadsheet content displayed in the browser is first serialized into a structured JSON workbook. This JSON includes all essential details—such as data, formulas, formatting, styles, and sheet configuration. + +Once generated, this JSON workbook is sent to the server, where the [`Syncfusion.EJ2.Spreadsheet library`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) uses [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview) to convert the JSON data into a fully formatted Excel file. During this process, the JSON workbook is parsed and its contents are mapped to an XlsIO Workbook instance, ensuring that all data, styles, formulas, and other ASP.NET Core Spreadsheet features are accurately preserved. + +Since the server is responsible for generating the final Excel file, the total export time can vary depending on the workbook’s complexity. Factors such as the level of formatting, styles and the use of advanced features like formulas or conditional formatting can influence processing time. After the file is successfully generated, it is sent back to the client for download. + +To enable saving Excel files, set the [`allowSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowSave) property to **true** and specify the service URL using the [`saveUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) property. When a save action is triggered, the control sends the spreadsheet model to this endpoint, where it is processed and returned as a downloadable Excel file. + +For a quick walkthrough on how the save functionality works, refer to the following video: +{% youtube "https://www.youtube.com/watch?v=MpwiXmL1Z_o" %} + +## UI options to Save Excel files + +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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) property in the Spreadsheet control. You can also use the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event to customize or cancel the save action which gets triggered before saving the Spreadsheet as an Excel file. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/open-save-cs5/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenSaveController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/open-save-cs5/openSaveController.cs %} +{% endhighlight %} +{% endtabs %} + +Please find the below table for the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event arguments. + +| **Parameter** | **Type** | **Description** | +| ----- | ----- | ----- | +| 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. | +| isFullPost | boolean | It sends the form data from client to server, when set to true. It fetches the data from client to server and returns the data from server to client, when set to false. | +| needBlobData | boolean | You can get the blob data if set to true. | +| 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowSave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowSave) property in previous code snippet. +> * Demo purpose only, we have used the online web service url link. + +## Save Excel files programmatically + +To save Excel files programmatically in the Spreadsheet, you can use the [`save`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#save) method of the Spreadsheet component. Before invoking this method, ensure that the [`saveUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) property is properly configured, as it is required for processing and generating the file on the server. + +Please find the below table for the [`save`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#save) method arguments. + +| **Parameter** | **Type** | **Description** | +|-----------------------|------------------------|------------------------------------------------------------------| +| options | [`SaveOptions`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/saveoptions) | Options for opening the JSON object. | +| jsonConfig *(optional)* | [`SerializationOptions`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/serializationOptions) | Specify the serialization options to customize the loading of the JSON data. | + +The following code example demonstrates how to save an Excel file programmatically in the Spreadsheet. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +@{ + ViewBag.SalesData = new List() + { + new { CustomerName = "Romona Heaslip", Model = "Taurus", Color = "Aquamarine", PaymentMode = "Debit Card", DeliveryDate = "07/11/2015", Amount = "8529.22" }, + new { CustomerName = "Clare Batterton", Model = "Sparrow", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "7/13/2016", Amount = "17866.19" }, + new { CustomerName = "Eamon Traise", Model = "Grand Cherokee", Color = "Blue", PaymentMode = "Net Banking", DeliveryDate = "09/04/2015", Amount = "13853.09" } + }; +} + +
+ + + + + + + + + + +
+ + +{% endhighlight %} +{% endtabs %} + +## Supported Excel file formats for Save + +The following file formats are supported when saving the Spreadsheet component: + +* Microsoft Excel Workbook (.xlsx) +* Microsoft Excel 97–2003 Workbook (.xls) +* Comma-Separated Values (.csv) +* Portable Document Format (.pdf) + +## Export options + +### Save Excel files as Blob + +By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeOpen) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_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 control below. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/save-as-blob/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="SaveController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/save-as-blob/savecontroller.cs %} +{% endhighlight %} +{% endtabs %} + +### Save Workbook as JSON + +Our Spreadsheet component allows you to export an entire workbook as a JSON object. This JSON output includes all workbook details such as sheets, cell values, formulas, styles, and formatting. + +You can optionally pass serialization options to the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#saveasjson) method to exclude specific features from the exported JSON. For example, you can choose to ignore styles, formulas, number formats, images, or conditional formatting. These options are fully optional—if they are not provided, the method exports the workbook with all details preserved by default. + +The following example demonstrates how to save a workbook as JSON from the Spreadsheet component. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/save-as-json-cs1/tagHelper %} +{% endhighlight %} +{% endtabs %} + +### Save Excel files to a server + +By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. + +**Client Side**: + +```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) + { + try + { + // Save the workbook as stream. + Stream fileStream = Workbook.Save(saveSettings); + // You can also save the stream file in your server location. + 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; + } + } +``` + +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. + +```js +//To save an Excel file to the server. +fetch('https://localhost:{port number}/Home/Save') +``` + +### Save Excel files with 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event. After that, convert the spreadsheet data into JSON format using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#saveasjson) method in the `beforeSave` event and send it to the save service endpoint URL using a fetch request. + +On the server side, the save service will take the received JSON data, pass it to the workbook `Save` method, and return the result as a base64 string. The fetch success callback will receive the Excel file in base64 string format on the client side. Finally, you can then convert the base64 string back to a file on the client end to obtain a non-corrupted Excel file. + +The following code example shows how to save an Excel file using a hosted web service in AWS Lambda, as mentioned above. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + + + + +{% endhighlight %} +{% endtabs %} + +```csharp +public string Save([FromForm]SaveSettings saveSettings) +{ + // This will return the Excel in base64 string format. + return Workbook.Save(saveSettings); +} +``` + +### Save Spreadsheet data as 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`. + +> You can get the Spreadsheet data as blob in the [saveComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveComplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event. + +The following code example shows how to save the spreadsheet data as base64 string. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/base-64-string/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="OpenController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/base-64-string/opencontroller.cs %} +{% endhighlight %} +{% endtabs %} + +## Advanced Save options + +### Configure JSON serialization + +Previously, when saving the Spreadsheet as a workbook JSON object using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/index-default#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. + +```ts +spreadsheet.saveAsJson({ onlyValues: true }); +``` + +| Options | Description | +| ----- | ----- | +| onlyValues | If **true**, includes only the cell values in the JSON output. | +| ignoreStyle | If **true**, excludes styles from the JSON output. | +| ignoreFormula | If **true**, excludes formulas from the JSON output. | +| ignoreFormat | If **true**, excludes number formats from the JSON output. | +| ignoreConditionalFormat | If **true**, excludes conditional formatting from the JSON output. | +| ignoreValidation | If **true**, excludes data validation rules from the JSON output. | +| ignoreFreezePane | If **true**, excludes freeze panes from the JSON output. | +| ignoreWrap | If **true**, excludes text wrapping settings from the JSON output. | +| ignoreChart | If **true**, excludes charts from the JSON output. | +| ignoreImage | If **true**, excludes images from the JSON output. | +| ignoreNote | If **true**, excludes notes from the JSON output. | + +The following code snippet demonstrates how to configure the serialization options and pass them as arguments to the saveAsJson method: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/save-as-json/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="SaveController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/save-as-json/saveController.cs %} +{% endhighlight %} +{% endtabs %} + +## Customization + +### Pass custom parameters during Save + +Passing the custom parameters from client to server by using [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/custom-params/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="CustomParamsController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/custom-params/customParamsController.cs %} +{% endhighlight %} +{% endtabs %} +Server side code snippets: + +```csharp + + public IActionResult Save(SaveSettings saveSettings, string customParams) + { + Console.WriteLine(customParams); // you can get the custom params in controller side + return Workbook.Save(saveSettings); + } +``` + +### Add custom headers to Save requests + +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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_FileMenuItemSelect) event, the custom header can be added to the request during save action. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/save-header/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="CustomHeaderController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/save-header/CustomHeaderController.cs %} +{% endhighlight %} +{% endtabs %} + +### Customize PDF export 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://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_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 cshtml tabtitle="CSHTML" %} +{% include code-snippet/spreadsheet/asp-net-core/pdf-orientation/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="pdfOrientationController.cs" %} +{% include code-snippet/spreadsheet/asp-net-core/pdf-orientation/pdfOrientationController.cs %} +{% endhighlight %} +{% endtabs %} + + +## Server configuration + +In the Spreadsheet component, Excel export processing is handled on the `server‑side`. Therefore, to enable exporting in your application, you need to configure a server using any of the following web service technologies: + +* WebAPI +* WCF Service +* ASP.NET MVC Controller Action + +The following code snippet shows how to configure the server using a `WebAPI` service: + +```csharp +[Route("api/[controller]")] +public class SpreadsheetController : Controller +{ + // To save as Excel file + [AcceptVerbs("Post")] + [HttpPost] + [EnableCors("AllowAllOrigins")] + [Route("Save")] + public IActionResult Save([FromForm] SaveSettings saveSettings) + { + return Workbook.Save(saveSettings); + } +} +``` + +## Server dependencies + +Save helper functions are included in the `Syncfusion.EJ2.Spreadsheet` package, which is available in Essential Studio® and on [`nuget.org`](https://www.nuget.org). +The following dependencies are required for Spreadsheet save operations: + +* Syncfusion.EJ2 +* Syncfusion.EJ2.Spreadsheet +* Syncfusion.Compression.Base +* Syncfusion.XlsIO.Base diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/scrolling.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/scrolling.md index 2c846110b7..2b7cc2ceb8 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/scrolling.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/scrolling.md @@ -12,7 +12,7 @@ documentation: ug Scrolling helps you to move quickly to different areas of the worksheet. It moves faster if we use horizontal and vertical scroll bars. Scrolling can be enabled by setting the [`allowScrolling`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowScrolling) as true. -N> By default, the `allowScrolling` property is true. +> By default, the `allowScrolling` property is true. You have the following options in Scrolling by using [`scrollSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ScrollSettings). @@ -21,13 +21,13 @@ You have the following options in Scrolling by using [`scrollSettings`](https:// ## Finite Scrolling -Finite scrolling supports two type of modes in scrolling. You can use the `isFinite` property in [`scrollSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ScrollSettings) to specify the mode of scrolling. +Finite scrolling supports two type of modes in scrolling. You can use the [`isFinite`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.SpreadsheetScrollSettings.html#Syncfusion_EJ2_Spreadsheet_SpreadsheetScrollSettings_IsFinite) property in [`scrollSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_ScrollSettings) to specify the mode of scrolling. -* Finite - This mode does not create a new row/column when the scrollbar reaches the end. This can be achieved by setting the `isFinite` property as `true`. +* Finite - This mode does not create a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.SpreadsheetScrollSettings.html#Syncfusion_EJ2_Spreadsheet_SpreadsheetScrollSettings_IsFinite) property as `true`. -* Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the `isFinite`property as `false`. +* Infinite - This mode creates a new row/column when the scrollbar reaches the end. This can be achieved by setting the [`isFinite`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.SpreadsheetScrollSettings.html#Syncfusion_EJ2_Spreadsheet_SpreadsheetScrollSettings_IsFinite) property as `false`. -N> By Default, the `isFinite` property is `false`. +> By Default, the `isFinite` property is `false`. ## Virtual Scrolling @@ -35,7 +35,7 @@ N> By Default, the `isFinite` property is `false`. In virtual scrolling `enableVirtualization` is set to true means, it allows you to load the spreadsheet data while scrolling. -N> By Default, the `enableVirtualization` property is `true`. +> By Default, the `enableVirtualization` property is `true`. **User Interface**: @@ -60,3 +60,6 @@ The following code example shows the finite scrolling with defined rows and colu {% endhighlight %} {% endtabs %} +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/searching.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/searching.md index 96ddb05baa..21859c9cec 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/searching.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/searching.md @@ -10,51 +10,51 @@ documentation: ug # Find and Replace in ASP.NET Core Spreadsheet control -Find and Replace helps you to search for the target text and replace the found text with alternative text within the sheet or workbook. You can use the [`allowFindAndReplace`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFindAndReplace) property to enable or disable the Find and Replace functionality. +Find and Replace helps you to search for target text and replace the founded text with alternative text within the sheet or workbook. You can use the [`allowFindAndReplace`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowFindAndReplace) property to enable or disable Find and Replace functionality. -N> * The default value for `allowFindAndReplace` property is `true`. +> * The default value for `allowFindAndReplace` property is `true`. ## Find -Find feature is used to select the matched contents of a cell within the sheet or workbook. It is extremely useful when working with large set of data source. +Find is used to select the matched contents of a cell within sheet or workbook. It is extremely useful when working with large sets of data source. **User Interface**: Find can be done by any of the following ways: -* Select the Search icon in the Ribbon toolbar or use `Ctrl + F` key to open the Find dialog. -* Use find Next and find Previous buttons to search the given value in the workbook. +* Select the Search icon in the Ribbon toolbar or using `Ctrl + F` key to open the Find dialog. +* Using find Next and find Previous buttons to search the given value in workbook. * Select the option button in Find dialog to open the Find and Replace dialog. Then, select the below properties for enhanced searching. -N> * `Search within`: To search the target in a sheet (default) or in an entire workbook. -
* `Search by`: It enhance the search, either By Rows (default), or By Columns. -
* `Match case`: To find the matched value with case sensitive. -
* `Match exact cell contents`: To find the exact matched cell value with entire match cases. +> * `Search within`: To search the target in a sheet (default) or in an entire workbook. +> * `Search by`: It enhance the search, either By Rows (default), or By Columns. +> * `Match case`: To find the matched value with case sensitive. +> * `Match exact cell contents`: To find the exact matched cell value with entire match cases. -* Using `find()` method to perform find operation. +* Using [`find`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#find) method to perform find operation. ## Replace -Replace feature is used to change the find contents of a cell within sheet or workbook. Replace All is used to change all the matched contents of a cell within sheet or workbook. +Replace is used to change the find contents of a cell within sheet or workbook. Replace All is used to change all the matched contents of a cell within sheet or workbook. **User Interface**: Replace can be done by any of the following ways: -* Use `Ctrl + H` key to open the Find and Replace dialog. -* Use Replace button to change the found value in sheet or workbook. -* Using Replace All button, all the matched criteria can be replaced with find value based on sheet or workbook. -* Using `replace()` method to perform replace operation by passing the argument `args.replaceby` as `replace`. -* Using `replace()` method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`. +* Using `Ctrl + H` key to open the Find and Replace dialog. +* Using Replace button to change the found value in sheet or workbook. +* Using ReplaceAll button to change all the found value's in sheet or workbook. +* Using [`replace`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#replace) method to perform replace operation by passing the argument `args.replaceby` as `replace`. +* Using [`replace`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#replace) method to perform replace all operation by passing the argument `args.replaceby` as `replaceall`. ## Go to -Go to feature is used to navigate to a specific cell address in the sheet or workbook. +Go to is used to navigate to a specific cell address in the sheet or workbook. **User Interface**: -* Use `Ctrl + G` key to open the Go To dialog. -* Use `goTo()` method to perform Go To operation. +* Using `Ctrl + G` key to open the Go To dialog. +* Using [`goTo`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#goto) method to perform Go To operation. In the following sample, searching can be done by following ways: @@ -72,8 +72,12 @@ In the following sample, searching can be done by following ways: {% endhighlight %} {% endtabs %} +## Limitations +* Undo/redo for Replace All is not supported in this feature. +* Replace All functionality is not restricted to selected range of cells. +* Find and Replace in Formulas, Notes not supported. -## Limitations +## Note -* Undo/redo for Replace All is not supported in this feature. \ No newline at end of file +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/selection.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/selection.md index 47fe6e1115..3f932f1ec4 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/selection.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/selection.md @@ -10,19 +10,23 @@ documentation: ug # Selection in ASP.NET Core Spreadsheet Control -Selection provides interactive support to highlight the cell, row, or column that you select. Selection can be done through Mouse, Touch, or Keyboard interaction. To enable selection, set `mode` as `Single` or `Multiple` in [`selectionSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SelectionSettings). If you set `mode` to `None`, it disables the UI selection. +Selection provides interactive support to highlight the cell, row, or column that you select. Selection can be done through Mouse, Touch, or Keyboard interaction. -N> The default value for `mode` in `selectionSettings` is `Multiple`. +To configure selection, use the [`selectionSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SelectionSettings) property: +* `mode = "Single"` → allows selecting only one cell, row, or column at a time. +* `mode = "Multiple"` → allows selecting multiple cells, rows, or columns at once. +* `mode = "None"` → disables UI selection completely. -You have the following options in Selection, +> The default value for `mode` is `Multiple`. -* Cell selection -* Row selection -* Column selection +You can perform: +* Cell selection – highlight individual cells. +* Row selection – highlight entire rows. +* Column selection – highlight entire columns. ## Cell selection -Cell selection is used to select a single or multiple cells. It can be performed using the `selectRange` method. +Cell selection is used to select a single or multiple cells. It can be performed using the [`selectRange`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#selectrange) method. **User Interface**: @@ -84,7 +88,7 @@ The following sample shows the column selection in the spreadsheet, here selecti ## Get selected cell values -You can select single or multiple cells, rows, or columns using mouse and keyboard interactions. You can also programmatically perform selections using the [selectRange](https://helpej2.syncfusion.com/documentation/api/spreadsheet#selectrange) method. This selection behavior is controlled by the [selectionSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SelectionSettings) property. Finally, you can retrieve the selected cell values as a collection using the [getData](https://helpej2.syncfusion.com/documentation/api/spreadsheet#getdata) method. +You can select single or multiple cells, rows, or columns using mouse and keyboard interactions. Additionally, you can also programmatically perform selection using the [selectRange](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#selectrange) method. This selection behavior is controlled based on the [selectionSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SelectionSettings) property. Now, retrieving the selected cell values as a collection is achievable using the [getData](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#getdata) method. Below is a code example demonstrating how to retrieve the selected cell values as a collection programmatically: @@ -110,8 +114,10 @@ The following sample shows, how to remove the selection in the spreadsheet. Here {% endhighlight %} {% endtabs %} +## Limitations +* We have a limitation while performing the Select All(`ctrl + A`). You can do this only by clicking the Select All button at the top left corner. -## Limitations +## Note -* We have a limitation while performing the Select All(`ctrl + A`). You can do this only by clicking the Select All button at the top left corner. \ No newline at end of file +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md new file mode 100644 index 0000000000..1ca888caed --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md @@ -0,0 +1,91 @@ +--- +layout: post +title: Deploy Spreadsheet Server to Azure App Service using CLI | Syncfusion +description: Learn how to deploy the Syncfusion Spreadsheet Server Docker image to Azure App Service using Azure CLI. +control: How to deploy Spreadsheet Server Docker Image to Azure App Service using Azure CLI +platform: document-processing +documentation: ug +--- + +# Deploy Spreadsheet Docker to Azure App Service using Azure CLI + +## Prerequisites + +* `Docker` installed on your machine (Windows, macOS, or Linux). +* `Azure CLI` installed based on your operating system. [Download Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli) +* An active [`Azure subscription`](https://azure.microsoft.com/en-gb) with App Services access. +* The [`Spreadsheet Server Docker image`](https://hub.docker.com/r/syncfusion/spreadsheet-server) available. + +## Deploy to Azure App Service using Azure CLI + +**Step 1:** Log in to Azure + +Open your terminal and sign in to Azure using the command below. This authenticates your CLI with Azure. + +```bash +az login +``` + +**Step 2:** Create a resource group + +Create a resource group with the following command in your preferred location. + +```bash +az group create --name < your-app-name> --location +``` + +**Step 3:** Create an app service plan + +Create a resource group with the following command in your preferred location. + +```bash +az appservice plan create --name --resource-group < your-resource-group> --sku S1 --is-linux +``` + +This creates an App Service plan in the standard pricing tier (S1) and ensures it runs on Linux containers with the --is-linux flag. + +**Step 4:** Create the docker-compose.yml file + +Define your container configuration in a docker-compose.yml file. This file specifies the container name, image, and environment variables for the Spreadsheet Server: + +```bash +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server + environment: + + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + ports: + - "6002:8080" + +``` + +Note: Replace YOUR_LICENSE_KEY with your valid Syncfusion license key. + +**Step 5:** Create a Docker compose app + +Deploy the containerized app to Azure App Service using the following command. + +```bash +az webapp create --resource-group --plan < your-app-service-plan> --name --multicontainer-config-type compose --multicontainer-config-file docker-compose.yml +``` + +This command creates a web app that runs your Spreadsheet Server Docker container using the configuration defined in the docker-compose.yml file. + +**Step 6:** Browse your app + +Once deployed, your app will be live at https://XXXXXXXXXX.azurewebsites.net. + +![azure cli](../images/azure-cli.png) + +**Step 7:** With your server running, verify that it supports import and export operations by testing the following endpoints: +``` +openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" +saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save +``` +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) + +For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md new file mode 100644 index 0000000000..7b6eaa2547 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md @@ -0,0 +1,141 @@ +--- +layout: post +title: Deploy Spreadsheet Docker to AWS EKS Cluster | Syncfusion +description: Learn how to deploy the Syncfusion Spreadsheet server Docker image to AWS EKS and connect it to the EJ2 ASP.NET Core Spreadsheet component. +control: How to deploy spreadsheet server to AWS EKS using Docker +platform: document-processing +documentation: ug +--- + +# How to deploy spreadsheet server to AWS EKS Cluster + +## Prerequisites + +* `AWS account` and [`AWS CLI`](https://aws.amazon.com/cli/) installed and configured. +* [`kubectl`](https://kubernetes.io/docs/tasks/tools/) installed and configured. +* Access to an existing EKS cluster, or you can create one via the AWS console or CLI. +* Docker installed if you plan to build and push a custom image. + +**Step 1:** Configure your environment +* Open a terminal and authenticate to AWS + +```bash + +aws configure # enter your Access Key, Secret Key, region, and output format (e.g., json) + +``` +* Update your kubectl context to point to the EKS cluster: + +```bash + +aws eks update-kubeconfig --region --name + +``` +* After updating the [`kubeconfig`](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/) with the EKS cluster, you can verify the node’s state. + +```bash + +kubectl get nodes # verify that your cluster nodes are ready + +``` + +**Step 2:** Create the Deployment +Create a file named spreadsheet-deployment.yaml defining a deployment for the Syncfusion® container. The container listens on port `8080`: + +```yaml + +apiVersion: apps/v1 +kind: Deployment +metadata: + name: spreadsheet-server + labels: + app: spreadsheet-server +spec: + replicas: 1 # Increase to 2 or more for higher availability + selector: + matchLabels: + app: spreadsheet-server + template: + metadata: + labels: + app: spreadsheet-server + spec: + containers: + - name: spreadsheet-server + image: syncfusion/spreadsheet-server:latest + ports: + - containerPort: 8080 + env: + - name: SYNCFUSION_LICENSE_KEY + value: "YOUR_LICENSE_KEY" + +``` + +> If you build a custom image, push it to Docker Hub or AWS ECR and update `image:` field accordingly. + +**Step 3:** Expose the Service +Create a `spreadsheet-service.yaml` to define a Service of type `LoadBalancer` that forwards traffic to the container. Customize the external port (5000) as needed; the internal `targetPort` should remain 8080 because the container listens on that port. + +```yaml + +apiVersion: v1 +kind: Service +metadata: + name: spreadsheet-server-service +spec: + selector: + app: spreadsheet-server + type: LoadBalancer + ports: + - protocol: TCP + port: 5000 # External port exposed by the load balancer + targetPort: 8080 # Internal container port + +``` + +**Step 4:** Deploy to EKS +* Apply the manifests: + +```bash + +kubectl apply -f spreadsheet-deployment.yaml +kubectl apply -f spreadsheet-service.yaml + +``` + +* Use the kubectl get pods command to monitor pod status. To retrieve the external address, run: + +```bash + +kubectl get svc spreadsheet-server-service + +``` + +* Retrieve the external address from the Service output. Use `https://` only if the Load Balancer is configured with TLS (use ACM for certificates). + +**Step 5:** Configure the ASP.NET Core client + +Start by following the steps provided in this [link](../getting-started.md) to create a simple Spreadsheet sample in ASP.NET Core. This will give you a basic setup of the Spreadsheet component. Once the Service reports an external address (e.g., a1b2c3d4e5f6-1234567890.us-east-1.elb.amazonaws.com), update the [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) and [`saveUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) properties of your ASP.NET Core Spreadsheet component: + +```js + + + +``` + +> Use `https://` if your Load Balancer has TLS configured. + +**Step 6:** Scaling and customization +- `Scale replicas:` To handle a higher workload, you can scale your deployment by increasing the replicas count in your `spreadsheet-deployment.yaml` file and then run `kubectl apply -f spreadsheet-deployment.yaml` to apply the changes. Kubernetes will automatically manage the distribution of traffic across the pods. +- `Resource limits:` Define `resources.requests`, and `resources.limits` in the container spec to allocate CPU and memory appropriately. +- `Environment variables:` In addition to SYNCFUSION_LICENSE_KEY, you can set other configuration keys (e.g., culture) using the env: section in the deployment manifest without modifying the docker image. + +For more information on deploying Spreadsheet docker image in Amazon EKS kindly refer to this [`Blog`](https://www.syncfusion.com/blogs/post/spreadsheet-server-eks-deployment) + +## See Also +* [Docker Image Overview in ASP.NET Core Spreadsheet](./spreadsheet-server-docker-image-overview) +* [Publish Spreadsheet Server to Azure App Service using Visual Studio](./publish-spreadsheet-server-to-azure-using-visual-studio) +* [Deploy Spreadsheet Docker to Azure App Service using Azure CLI](./deploy-spreadsheet-docker-to-azure-using-azure-cli) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md new file mode 100644 index 0000000000..1c50b61223 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md @@ -0,0 +1,57 @@ +--- +layout: post +title: Deploy Spreadsheet Server to Azure App Service via VS | Syncfusion +description: Learn how to publish the Syncfusion Spreadsheet Server Web API to Azure App Service using Visual Studio. +control: How to publish Spreadsheet Server in Azure App Service using Visual Studio +platform: document-processing +documentation: ug +--- + +# Publish Spreadsheet Server to Azure App Service using Visual Studio + + +## Prerequisites + +* `Visual Studio 2022` or later is installed. +* [`.NET 8.0 SDK`](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later installed. +* An active [`Azure subscription`](https://azure.microsoft.com/en-gb) with App Services access. +* The [`Spreadsheet Web API project`](https://github.com/SyncfusionExamples/EJ2-Spreadsheet-WebServices/tree/main/WebAPI) repository cloned locally. + +Make sure you build the project using the Build > Build Solution menu command before following the deployment steps. + +## Publish to Azure App Service + +**Step 1:** In Solution Explorer, right-click the project and click Publish (or use the Build > Publish menu item). + +![azure publish ](../images/azure_publish.png) + +**Step 2:** In the Pick a publish target dialog box, select Azure as deployment target. + +![azure target ](../images/azure_target.png) + +**Step 3:** After selecting Azure, choose Azure App Service under the target options. + +![azure app service](../images/azure_app_service.png) + +**Step 4:** Select Publish. The Create App Service dialog box appears. Sign in with your Azure account, if necessary, and then the default app service settings populate the fields. + +![azure credentials](../images/azure_credentials.png) + +**Step 5:** Select Create. Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser with the app name at, +``` +http://.azurewebsites.net +``` + +![azure_published_window](../images/azure_published_window.png) + +**Step 6:** Once the deployment process is complete, The deployed API will be live at the following URL: +https://XXXXXXXXXX.azurewebsites.net + +**Step 7:** With your server running, verify that it supports import and export operations by testing the following endpoints: +``` +openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" +saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save +``` +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) + +For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/spreadsheet-server-docker-image-overview.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/spreadsheet-server-docker-image-overview.md new file mode 100644 index 0000000000..c56797d95d --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/spreadsheet-server-docker-image-overview.md @@ -0,0 +1,94 @@ +--- +layout: post +title: Docker image deployment in EJ2 ASP.NET Core Spreadsheet component | Syncfusion +description: Learn here all about Docker image deployment in Syncfusion EJ2 ASP.NET Core Spreadsheet component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Docker deployment +documentation: ug +--- + +# Docker Image Overview in ASP.NET Core Spreadsheet + +The [**Syncfusion® Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents. + +This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet back-end functionalities. This server-side Web API project targets ASP.NET Core 8.0. + +You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker). + +The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), and [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) platforms. + +## Prerequisites + +Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment: + +* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). +* On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/). + +## How to deploy the Spreadsheet Docker Image + +**Step 1:** Pull the spreadsheet-server image from Docker Hub. + +```console +docker pull syncfusion/spreadsheet-server +``` + +**Step 2:** Create the `docker-compose.yml` file with the following code in your file system. + +```yaml +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server:latest + environment: + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + ports: + - "6002:8080" +``` + +**Note:** The Spreadsheet is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) to use in a production environment. Please replace `YOUR_LICENSE_KEY` with the valid license key in the `docker-compose.yml` file. + +**Step 3:** In a terminal tab, navigate to the directory where you've placed the `docker-compose.yml` file and execute the following: + +```console +docker-compose up +``` + +Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`. + +**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet component. For more information on how to get started with the Spreadsheet component, refer to this [`getting started page.`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + + + + +{% endhighlight %} +{% endtabs %} + +## How to configure different cultures using a Docker compose file + +By default, the Spreadsheet Docker container is generated in the `en_US` culture. You can configure different cultures using the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are replaced in the Docker file to set the specified culture for the Spreadsheet server. + +```yaml +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server:latest + environment: + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + # Specify the culture to configure for the Spreadsheet server + LC_ALL: de_DE.UTF-8 + LANGUAGE: de_DE.UTF-8 + LANG: de_DE.UTF-8 + ports: + - "6002:8080" +``` + +Please refer to these getting started pages to create a Spreadsheet in [`Javascript`](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es5/getting-started), [`Angular`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started), [`Vue`](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/getting-started), [`ASP.NET Core`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core), and [`ASP.NET MVC`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/getting-started-mvc). \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/sort.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/sort.md index b548cb172f..9c16aa8aa7 100644 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/sort.md +++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/sort.md @@ -12,27 +12,25 @@ documentation: ug Sorting helps arranging the data to a specific order in a selected range of cells. You can use the [`allowSorting`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowSorting) property to enable or disable sorting functionality. -N> * The default value for `allowSorting` property is `true`. +> * The default value for `allowSorting` property is `true`. By default, the `sort` module is injected internally into Spreadsheet to perform sorting. -## Sort by cell value +## Sort by Cell value -In the active Spreadsheet, select a range of cells to sort by cell value. The range sort can be done by any of the following ways: -* Select the sort item in the Ribbon toolbar and choose the ascending or descending item. -* Right-click the sheet, select the sort item in the context menu and choose the ascending/descending item. -* Use the `sort()` method programmatically. +In the active Spreadsheet, you can sort a selected range of cells by their values. Sorting can be done in following ways: -The cell values can be sorted in the following orders: -* Ascending -* Descending - -N> * Ascending is the default order for sorting. +* **Ribbon Toolbar** – Select the sort option under the Ribbon toolbar and choose ascending or descending. +* **Context Menu** – Right-click the sheet, select the sort option, and choose ascending or descending. +* **Programmatically** – Use the [`sort`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sort) method. -The `sort()` method with empty arguments will sort the selected range by active cell’s column as sort column in ascending order. +The cell values can be sorted in the following orders: +* **Ascending** – Default order for sorting. +* **Descending** – Reverse order. +When the `sort` method is called with empty arguments, the selected range is sorted by the active cell’s column in ascending order. -N> * The `beforeSort` event will be triggered before sorting the specified range. -
* The `sortComplete` event will be triggered after the sort action is completed successfully. +> * The [`beforeSort`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSort) event will be triggered before sorting the specified range. +> * The [`sortComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SortComplete) event will be triggered after the sort action is completed successfully. The following code example shows `sort` functionality in the Spreadsheet control. @@ -45,13 +43,11 @@ The following code example shows `sort` functionality in the Spreadsheet control {% endhighlight %} {% endtabs %} - - ## Data contains header -You can specify whether the selected range of cells contains header. To specify, you need to set the `containsHeader` property to `true` and pass it as `sortOption` arguments of the sort() method. +You can specify whether the selected range of cells contains header. To specify, you need to set the [`containsHeader`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#containsheader) property to `true` and pass it as `sortOption` arguments of the sort method. -N> * If the `containsHeader` property is not set and active cell column’s first cell value type is differed from the second cell value type, the first row data in the range are marked as column headers. +> * If the `containsHeader` property is not set and active cell column’s first cell value type is differed from the second cell value type, the first row data in the range are marked as column headers. You can also enable or disable this property using `beforeSort` event arguments, @@ -64,13 +60,13 @@ You can also enable or disable this property using `beforeSort` event arguments, In the custom sort dialog, the `Data contains header` checkbox is checked on load. Thus, the default value for `containsHeader` is `true` in custom sort dialog. -## Case sensitive sort - -The default sort functionality of Spreadsheet is a case insensitive sorting. When you want to perform sorting with case sensitive, you need to set the `caseSensitive` property to `true` and pass it as `sortOption` arguments of the sort() method. +## Case Sensitive sort -Case sensitive sorting is applicable only for cells with alphabets. In ascending order sorting with case sensitive enabled, the cells with lower case text will be placed above the cells with upper case text. +By default, sorting in the Spreadsheet is **case insensitive**. To perform sorting with case sensitivity, set the [`caseSensitive`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#casesensitive) property to `true` and pass it as part of the `sortOption` arguments in the `sort` method. -N> * The default value for the `caseSensitive` property is `false`. +* Case sensitive sorting applies only to cells containing alphabets. +* In ascending order with case sensitivity enabled, cells with lowercase text appear above cells with uppercase text. +> * The default value for the `caseSensitive` property is `false`. You can also enable or disable this property using `beforeSort` event arguments, @@ -88,27 +84,32 @@ In the custom sort dialog, the `Case sensitive` checkbox is unchecked on load as When you want to perform sorting on multiple columns, it can be done by any of the following ways: * Select the `Custom sort…` menu item from the Ribbon toolbar item or context menu item. -* Use the `sort()` method programmatically by providing sort criteria. +* Use the `sort` method programmatically by providing sort criteria. -N> * The current sorting functionality supports sorting based on cell values only. +> * The current sorting functionality supports sorting based on cell values only. -### Custom sort dialog +### Custom Sort Dialog -The custom sort dialog helps sorting multiple columns in the selected range by utilizing the rich UI. This dialog will be appeared while choosing the `Custom sort…` from the Ribbon item or context menu item. By default, sort criteria with the first column name from the selected range will be appeared in the dialog on initial load and it cannot be removed. +The custom sort dialog allows sorting multiple columns in a selected range using a rich UI. This dialog appears when you choose `Custom sort…` from the Ribbon or context menu. + +* By default, the dialog shows sort criteria with the first column name from the selected range. This initial criterion cannot be removed. +* You can add more criteria using the `Add Column` button at the bottom of the dialog. Each criterion can have its own sort order. +* Newly added criteria can be removed using the `delete` icon next to each item. -You can add multiple criteria using the `Add Column` button at the bottom of the dialog. Thus, multiple columns can be specified with different sort order. The newly added sort criteria items can be removed using the `delete` icons at the end of each items. +* **Data contains header** – Refer to the [Data contains header](./sort#data-contains-header) topic for details about the checkbox. +* **Case sensitive** – Refer to the [Case sensitive sort](./sort#case-sensitive-sort) topic for details about the checkbox. -You can refer to the [`Data contains header`](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/sort#data-contains-header) topic to learn more about `Data contains header` checkbox. To learn more about `Case sensitive` checkbox, you can refer to [`Case sensitive sort`](https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/sort#case-sensitive-sort) topic. +This dialog makes it easy to sort complex datasets by multiple columns with clear, customizable options. ### Passing sort criteria manually -The multi-column sorting can also be performed manually by passing sort options to the `sort()` method programmatically. The `sortOption` have the following arguments: -* `sortDescriptors` – Sort criteria collection that holds the collection of field name, sort order, and `sortComparer`. +The multi-column sorting can also be performed manually by passing sort options to the `sort` method programmatically. The `sortOption` have the following arguments: +* [`sortDescriptors`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortdescriptors) – Sort criteria collection that holds the collection of field name, sort order, and [`sortComparer`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortcomparer). * `containsHeader` – Boolean argument that specifies whether the range has headers in it. * `caseSensitive` – Boolean argument that specifies whether the range needs to consider case. -N> * All the arguments are optional. -
* When a `sortDescriptor` is specified without field, the field of the first `sortDescriptor` from the collection will be assigned from active cell’s column name and others will be ignored. Hence, it will act as single column sorting. +> * All the arguments are optional. +> * When a `sortDescriptor` is specified without field, the field of the first `sortDescriptor` from the collection will be assigned from active cell’s column name and others will be ignored. Hence, it will act as single column sorting. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -119,23 +120,25 @@ N> * All the arguments are optional. {% endhighlight %} {% endtabs %} - - ## Custom sort comparer -The `sortDescriptor` holds the `sortComparer` property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each `sortDescriptor` can be customized using the custom sort comparer function. +The [`sortDescriptor`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortdescriptor) holds the [`sortComparer`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#sortcomparer) property, which is a function and it is used to customize the sort comparer for specific sort criteria. Each `sortDescriptor` can be customized using the custom sort comparer function. By customizing sort comparer, you can define the sort action as desired. -N> * The `sortComparer` is an optional property of `sortDescriptor`. +> * The `sortComparer` is an optional property of `sortDescriptor`. -For custom sort comparer example, refer to the [`Sort a range by custom list`] below section. +For custom sort comparer example, refer to the [`Sort a range by custom list`] below. ### Sort a range by custom list - You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using `custom sort comparer`. -In the following demo, the `Trustworthiness` column is sorted based on the custom lists `Perfect`, `Sufficient`, and `Insufficient`. +For example, in the demo below, the `Trustworthiness`column is sorted according to the custom list values: +* `Perfect` +* `Sufficient` +* `Insufficient` + +This approach lets you control the order of sorting beyond the default ascending or descending options, making it easier to arrange data according to personalized or domain-specific criteria. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -158,9 +161,14 @@ The following errors have been handled for sorting, ## Limitations * Sorting is not supported with formula contained cells. +* Sort by color is not supported. + +## Note + +You can refer to our [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) to knows how to present and manipulate data. ## See Also -* [Hyperlink](./link) -* [Filtering](./filter) -* [Undo Redo](./undo-redo) \ No newline at end of file +* [Hyperlink](../spreadsheet/link) +* [Filtering](../spreadsheet/filter) +* [Undo Redo](../spreadsheet/undo-redo) diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/suspend-resume.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/suspend-resume.md deleted file mode 100644 index 0ad385a71c..0000000000 --- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/suspend-resume.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -layout: post -title: Suspend and Resume UI Refresh in ASP.NET Core Spreadsheet | Syncfusion -description: Improve performance in Syncfusion ASP.NET Core Spreadsheet by using suspendRefresh and resumeRefresh to group multiple updates and avoid repeated rendering. -platform: document-processing -control: Spreadsheet -documentation: ug ---- - -# Suspend and Resume UI Refresh in ASP.NET Core Spreadsheet - -The Spreadsheet refreshes its UI after each operation performed through public methods, such as updating a cell, applying formatting, or inserting rows. This immediate rendering works well for a few actions, but it can lead to performance issues when many operations are executed one after another. - -The **suspend and resume refresh** feature lets you temporarily pause UI rendering, perform multiple operations, and then refresh the UI only once at the end. This helps reduce unnecessary re-rendering and improves the overall performance of bulk updates. - -This is especially useful when the Spreadsheet is updated programmatically during initialization, data processing, or large-scale scenarios. - -## When to use - -Use this feature when you need to perform several actions in sequence, such as: - -- Updating many cells at once -- Applying formatting to a large range -- Inserting or deleting multiple rows or columns -- Running repeated operations inside a loop -- Working with large datasets - -For a few operations, this feature is usually not required. - -## How to use - -Use the following methods: - -- `suspendRefresh` — pauses UI rendering -- `resumeRefresh` — applies all pending visual updates - -### Step 1: Suspend UI refresh - -Call `suspendRefresh` before starting multiple Spreadsheet operations. - -### Step 2: Perform the required operations - -Execute the actions you want to apply. The Spreadsheet model is updated, but the UI is not refreshed after each call. - -### Step 3: Resume UI refresh - -Call `resumeRefresh` after all operations are complete. The Spreadsheet then renders all accumulated changes in a single refresh. - -### Example pattern - -```js - diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-icon-in-cell-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-icon-in-cell-cs1/tagHelper new file mode 100644 index 0000000000..a9ffa7fb8c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-icon-in-cell-cs1/tagHelper @@ -0,0 +1,44 @@ + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-toolbar-items-cs1/addToolbarController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-toolbar-items-cs1/addToolbarController.cs new file mode 100644 index 0000000000..224cfc419c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-toolbar-items-cs1/addToolbarController.cs @@ -0,0 +1,16 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web; +using Microsoft.AspNetCore.Mvc; + +namespace WebApplication.Controllers +{ + public class AddToolbarController : Controller + { + public IActionResult Index() + { + return View(); + } + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-toolbar-items-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-toolbar-items-cs1/tagHelper new file mode 100644 index 0000000000..ebbeabd0d6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/add-toolbar-items-cs1/tagHelper @@ -0,0 +1,69 @@ +
+ + + + + + + + + + + + +
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs1/ContextMenuController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs1/ContextMenuController.cs new file mode 100644 index 0000000000..3c6858023c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs1/ContextMenuController.cs @@ -0,0 +1,4 @@ +public IActionResult Index() +{ + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs1/tagHelper new file mode 100644 index 0000000000..6268fc5e04 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs1/tagHelper @@ -0,0 +1,39 @@ + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs2/ContextMenuController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs2/ContextMenuController.cs new file mode 100644 index 0000000000..3c6858023c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs2/ContextMenuController.cs @@ -0,0 +1,4 @@ +public IActionResult Index() +{ + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs2/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs2/tagHelper new file mode 100644 index 0000000000..594b05c0c4 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs2/tagHelper @@ -0,0 +1,12 @@ + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs3/ContextMenuController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs3/ContextMenuController.cs new file mode 100644 index 0000000000..3c6858023c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs3/ContextMenuController.cs @@ -0,0 +1,4 @@ +public IActionResult Index() +{ + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs3/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs3/tagHelper new file mode 100644 index 0000000000..ad559ead29 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/context-menu-cs3/tagHelper @@ -0,0 +1,12 @@ + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-filemenu-cs1/CustomFileMenuController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-filemenu-cs1/CustomFileMenuController.cs new file mode 100644 index 0000000000..4d6995976e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-filemenu-cs1/CustomFileMenuController.cs @@ -0,0 +1,16 @@ +public IActionResult Index() +{ + return View(); +} + +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); +} + +public IActionResult Save(SaveSettings saveSettings) +{ + return Workbook.Save(saveSettings); +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-filemenu-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-filemenu-cs1/tagHelper new file mode 100644 index 0000000000..06e158749d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-filemenu-cs1/tagHelper @@ -0,0 +1,32 @@ + +
+ +
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-tab-and-item-cs1/customTabController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-tab-and-item-cs1/customTabController.cs new file mode 100644 index 0000000000..30eb7fffca --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-tab-and-item-cs1/customTabController.cs @@ -0,0 +1,16 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web; +using Microsoft.AspNetCore.Mvc; + +namespace WebApplication.Controllers +{ + public class CustomTabController : Controller + { + public IActionResult Index() + { + return View(); + } + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-tab-and-item-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-tab-and-item-cs1/tagHelper new file mode 100644 index 0000000000..2deb646435 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/custom-tab-and-item-cs1/tagHelper @@ -0,0 +1,32 @@ +
+ + +
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/dynamicCellTemplateController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/dynamicCellTemplateController.cs new file mode 100644 index 0000000000..3c6858023c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/dynamicCellTemplateController.cs @@ -0,0 +1,4 @@ +public IActionResult Index() +{ + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/razor new file mode 100644 index 0000000000..03d0f806c6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/razor @@ -0,0 +1,53 @@ +@Html.EJS().Spreadsheet("spreadsheet").ShowSheetTabs(false).Created("created").BeforeCellRender("beforeCellRender").Render() + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/tagHelper new file mode 100644 index 0000000000..7cc87f8cd9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/dynamic-cell-template-cs1/tagHelper @@ -0,0 +1,55 @@ + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-filemenu-cs1/EnableOrDisableFileMenuController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-filemenu-cs1/EnableOrDisableFileMenuController.cs new file mode 100644 index 0000000000..3c6858023c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-filemenu-cs1/EnableOrDisableFileMenuController.cs @@ -0,0 +1,4 @@ +public IActionResult Index() +{ + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-filemenu-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-filemenu-cs1/tagHelper new file mode 100644 index 0000000000..49fc5fb751 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-filemenu-cs1/tagHelper @@ -0,0 +1,34 @@ + +
+
+ + +
+ + +
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-ribbon-items-cs1/enableDisableRibbonController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-ribbon-items-cs1/enableDisableRibbonController.cs new file mode 100644 index 0000000000..7dda5520e1 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-ribbon-items-cs1/enableDisableRibbonController.cs @@ -0,0 +1,16 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web; +using Microsoft.AspNetCore.Mvc; + +namespace WebApplication.Controllers +{ + public class EnableDisableRibbonController : Controller + { + public IActionResult Index() + { + return View(); + } + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-ribbon-items-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-ribbon-items-cs1/tagHelper new file mode 100644 index 0000000000..b5724313e9 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/enable-or-disable-ribbon-items-cs1/tagHelper @@ -0,0 +1,46 @@ +
+
+ + + + +
+ + + +
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/events/EventsController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/events/EventsController.cs new file mode 100644 index 0000000000..6df2856ea6 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/events/EventsController.cs @@ -0,0 +1,26 @@ +using System.Collections.Generic; +using Microsoft.AspNetCore.Mvc; + +public class EventsController : Controller +{ + public IActionResult Index() + { + // Sample data for the spreadsheet + List data = new List() + { + new { ItemName = "Casual Shoes", Date = "02/14/2014", Time = "11:34:32 AM", Quantity = 10, Price = 20, Amount = 200, Discount = 1, Profit = 10 }, + new { ItemName = "Sports Shoes", Date = "06/11/2014", Time = "05:56:32 AM", Quantity = 20, Price = 30, Amount = 600, Discount = 5, Profit = 50 }, + new { ItemName = "Formal Shoes", Date = "07/27/2014", Time = "03:32:44 AM", Quantity = 20, Price = 15, Amount = 300, Discount = 7, Profit = 27 }, + new { ItemName = "Sandals & Floaters", Date = "11/21/2014", Time = "06:23:54 AM", Quantity = 15, Price = 20, Amount = 300, Discount = 11, Profit = 67 }, + new { ItemName = "Flip- Flops & Slippers", Date = "06/23/2014", Time = "12:43:59 AM", Quantity = 30, Price = 10, Amount = 300, Discount = 10, Profit = 70 }, + new { ItemName = "Sneakers", Date = "07/22/2014", Time = "10:55:53 AM", Quantity = 40, Price = 20, Amount = 800, Discount = 13, Profit = 66 }, + new { ItemName = "Running Shoes", Date = "02/04/2014", Time = "03:44:34 AM", Quantity = 20, Price = 10, Amount = 200, Discount = 3, Profit = 14 }, + new { ItemName = "Loafers", Date = "11/30/2014", Time = "03:12:52 AM", Quantity = 31, Price = 10, Amount = 310, Discount = 6, Profit = 29 }, + new { ItemName = "Cricket Shoes", Date = "07/09/2014", Time = "11:32:14 AM", Quantity = 41, Price = 30, Amount = 1210, Discount = 12, Profit = 166 }, + new { ItemName = "T-Shirts", Date = "10/31/2014", Time = "12:01:44 AM", Quantity = 50, Price = 10, Amount = 500, Discount = 9, Profit = 55 } + }; + + ViewBag.DefaultData = data; + return View(); + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/events/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/events/tagHelper new file mode 100644 index 0000000000..2c0f09b780 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/events/tagHelper @@ -0,0 +1,58 @@ +
+
+ + + + + + + + + + + + + + + + + +
+
+

Event Trace

+
+
+ +
+ +
+
+
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/filter-cs2/filterController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/filter-cs2/filterController.cs new file mode 100644 index 0000000000..2146004c91 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/filter-cs2/filterController.cs @@ -0,0 +1,44 @@ +using System; +using System.Collections.Generic; +using Microsoft.AspNetCore.Mvc; + +public class FilterController : Controller +{ + public IActionResult Index() + { + List customerData = new List() + { + new { CustomerName = "Romona Heaslip", Model = "Taurus", Color = "Aquamarine", PaymentMode = "Debit Card", DeliveryDate = "07/11/2015", Amount = "8529.22" }, + new { CustomerName = "Clare Batterton", Model = "Sparrow", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "7/13/2016", Amount = "17866.19" }, + new { CustomerName = "Eamon Traise", Model = "Grand Cherokee", Color = "Blue", PaymentMode = "Net Banking", DeliveryDate = "09/04/2015", Amount = "13853.09" }, + new { CustomerName = "Julius Gorner", Model = "GTO", Color = "Aquamarine", PaymentMode = "Credit Card", DeliveryDate = "12/15/2017", Amount = "2338.74" }, + new { CustomerName = "Jenna Schoolfield", Model = "LX", Color = "Yellow", PaymentMode = "Credit Card", DeliveryDate = "10/08/2014", Amount = "9578.45" }, + new { CustomerName = "Marylynne Harring", Model = "Catera", Color = "Green", PaymentMode = "Cash On Delivery", DeliveryDate = "7/01/2017", Amount = "19141.62" }, + new { CustomerName = "Vilhelmina Leipelt", Model = "7 Series", Color = "Goldenrod", PaymentMode = "Credit Card", DeliveryDate = "12/20/2015", Amount = "6543.30" }, + new { CustomerName = "Barby Heisler", Model = "Corvette", Color = "Red", PaymentMode = "Credit Card", DeliveryDate = "11/24/2014", Amount = "13035.06" }, + new { CustomerName = "Karyn Boik", Model = "Regal", Color = "Indigo", PaymentMode = "Debit Card", DeliveryDate = "05/12/2014", Amount = "18488.80" }, + new { CustomerName = "Jeanette Pamplin", Model = "S4", Color = "Fuscia", PaymentMode = "Net Banking", DeliveryDate = "12/30/2014", Amount = "12317.04" }, + new { CustomerName = "Cristi Espinos", Model = "TL", Color = "Aquamarine", PaymentMode = "Credit Card", DeliveryDate = "12/18/2013", Amount = "6230.13" }, + new { CustomerName = "Issy Humm", Model = "Club Wagon", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "02/02/2015", Amount = "9709.49" }, + new { CustomerName = "Tuesday Fautly", Model = "V8 Vantage", Color = "Crimson", PaymentMode = "Debit Card", DeliveryDate = "11/19/2014", Amount = "9766.10" }, + new { CustomerName = "Rosemaria Thomann", Model = "Caravan", Color = "Violet", PaymentMode = "Net Banking", DeliveryDate = "02/08/2014", Amount = "7685.49" }, + new { CustomerName = "Lyell Fuentez", Model = "Bravada", Color = "Violet", PaymentMode = "Debit Card", DeliveryDate = "08/05/2016", Amount = "18012.45" }, + new { CustomerName = "Raynell Layne", Model = "Colorado", Color = "Pink", PaymentMode = "Credit Card", DeliveryDate = "05/30/2016", Amount = "2785.49" }, + new { CustomerName = "Raye Whines", Model = "4Runner", Color = "Red", PaymentMode = "Debit Card", DeliveryDate = "12/10/2016", Amount = "9967.74" }, + new { CustomerName = "Virgina Aharoni", Model = "TSX", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "10/23/2014", Amount = "5584.33" }, + new { CustomerName = "Peta Cheshir", Model = "Pathfinder", Color = "Red", PaymentMode = "Net Banking", DeliveryDate = "12/24/2015", Amount = "5286.53" }, + new { CustomerName = "Jule Urion", Model = "Charger", Color = "Violet", PaymentMode = "Debit Card", DeliveryDate = "11/20/2013", Amount = "13511.91" }, + new { CustomerName = "Lew Gilyatt", Model = "Bonneville", Color = "Crimson", PaymentMode = "Credit Card", DeliveryDate = "11/19/2013", Amount = "6498.19" }, + new { CustomerName = "Jobey Fortun", Model = "B-Series", Color = "Blue", PaymentMode = "Net Banking", DeliveryDate = "10/30/2014", Amount = "10359.67" }, + new { CustomerName = "Blondie Crump", Model = "Voyager", Color = "Turquoise", PaymentMode = "Credit Card", DeliveryDate = "04/06/2018", Amount = "8118.39" }, + new { CustomerName = "Florentia Binns", Model = "Grand Prix", Color = "Orange", PaymentMode = "Cash On Delivery", DeliveryDate = "10/13/2016", Amount = "10204.37" }, + new { CustomerName = "Jaquelin Galtone", Model = "Sunbird", Color = "Red", PaymentMode = "Net Banking", DeliveryDate = "10/22/2013", Amount = "6528.06" }, + new { CustomerName = "Hakeem Easseby", Model = "Mirage", Color = "Crimson", PaymentMode = "Debit Card", DeliveryDate = "9/12/2014", Amount = "5619.25" }, + new { CustomerName = "Nickolaus Gidman", Model = "XK", Color = "Orange", PaymentMode = "Debit Card", DeliveryDate = "05/12/2016", Amount = "5091.43" }, + new { CustomerName = "Jenine Iglesia", Model = "Accord", Color = "Orange", PaymentMode = "Debit Card", DeliveryDate = "09/03/2018", Amount = "14566.08" }, + new { CustomerName = "Fax Witherspoon", Model = "Range Rover Sport", Color = "Orange", PaymentMode = "Credit Card", DeliveryDate = "2/22/2018", Amount = "5284.87" } + }; + ViewBag.DefaultData = customerData; + return View(); + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/filter-cs2/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/filter-cs2/tagHelper new file mode 100644 index 0000000000..67726fb0a1 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/filter-cs2/tagHelper @@ -0,0 +1,54 @@ +
+ + + + + + + + + + + + + + + + + + +
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/find-and-replace-cs1/findReplaceController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/find-and-replace-cs1/findReplaceController.cs new file mode 100644 index 0000000000..7c9d4337ce --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/find-and-replace-cs1/findReplaceController.cs @@ -0,0 +1,44 @@ +using System; +using System.Collections.Generic; +using Microsoft.AspNetCore.Mvc; + +public class FindReplaceController : Controller +{ + public IActionResult Index() + { + List customerData = new List() + { + new { CustomerName = "Romona Heaslip", Model = "Taurus", Color = "Aquamarine", PaymentMode = "Debit Card", DeliveryDate = "07/11/2015", Amount = "8529.22" }, + new { CustomerName = "Clare Batterton", Model = "Sparrow", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "7/13/2016", Amount = "17866.19" }, + new { CustomerName = "Eamon Traise", Model = "Grand Cherokee", Color = "Blue", PaymentMode = "Net Banking", DeliveryDate = "09/04/2015", Amount = "13853.09" }, + new { CustomerName = "Julius Gorner", Model = "GTO", Color = "Aquamarine", PaymentMode = "Credit Card", DeliveryDate = "12/15/2017", Amount = "2338.74" }, + new { CustomerName = "Jenna Schoolfield", Model = "LX", Color = "Yellow", PaymentMode = "Credit Card", DeliveryDate = "10/08/2014", Amount = "9578.45" }, + new { CustomerName = "Marylynne Harring", Model = "Catera", Color = "Green", PaymentMode = "Cash On Delivery", DeliveryDate = "7/01/2017", Amount = "19141.62" }, + new { CustomerName = "Vilhelmina Leipelt", Model = "7 Series", Color = "Goldenrod", PaymentMode = "Credit Card", DeliveryDate = "12/20/2015", Amount = "6543.30" }, + new { CustomerName = "Barby Heisler", Model = "Corvette", Color = "Red", PaymentMode = "Credit Card", DeliveryDate = "11/24/2014", Amount = "13035.06" }, + new { CustomerName = "Karyn Boik", Model = "Regal", Color = "Indigo", PaymentMode = "Debit Card", DeliveryDate = "05/12/2014", Amount = "18488.80" }, + new { CustomerName = "Jeanette Pamplin", Model = "S4", Color = "Fuscia", PaymentMode = "Net Banking", DeliveryDate = "12/30/2014", Amount = "12317.04" }, + new { CustomerName = "Cristi Espinos", Model = "TL", Color = "Aquamarine", PaymentMode = "Credit Card", DeliveryDate = "12/18/2013", Amount = "6230.13" }, + new { CustomerName = "Issy Humm", Model = "Club Wagon", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "02/02/2015", Amount = "9709.49" }, + new { CustomerName = "Tuesday Fautly", Model = "V8 Vantage", Color = "Crimson", PaymentMode = "Debit Card", DeliveryDate = "11/19/2014", Amount = "9766.10" }, + new { CustomerName = "Rosemaria Thomann", Model = "Caravan", Color = "Violet", PaymentMode = "Net Banking", DeliveryDate = "02/08/2014", Amount = "7685.49" }, + new { CustomerName = "Lyell Fuentez", Model = "Bravada", Color = "Violet", PaymentMode = "Debit Card", DeliveryDate = "08/05/2016", Amount = "18012.45" }, + new { CustomerName = "Raynell Layne", Model = "Colorado", Color = "Pink", PaymentMode = "Credit Card", DeliveryDate = "05/30/2016", Amount = "2785.49" }, + new { CustomerName = "Raye Whines", Model = "4Runner", Color = "Red", PaymentMode = "Debit Card", DeliveryDate = "12/10/2016", Amount = "9967.74" }, + new { CustomerName = "Virgina Aharoni", Model = "TSX", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "10/23/2014", Amount = "5584.33" }, + new { CustomerName = "Peta Cheshir", Model = "Pathfinder", Color = "Red", PaymentMode = "Net Banking", DeliveryDate = "12/24/2015", Amount = "5286.53" }, + new { CustomerName = "Jule Urion", Model = "Charger", Color = "Violet", PaymentMode = "Debit Card", DeliveryDate = "11/20/2013", Amount = "13511.91" }, + new { CustomerName = "Lew Gilyatt", Model = "Bonneville", Color = "Crimson", PaymentMode = "Credit Card", DeliveryDate = "11/19/2013", Amount = "6498.19" }, + new { CustomerName = "Jobey Fortun", Model = "B-Series", Color = "Blue", PaymentMode = "Net Banking", DeliveryDate = "10/30/2014", Amount = "10359.67" }, + new { CustomerName = "Blondie Crump", Model = "Voyager", Color = "Turquoise", PaymentMode = "Credit Card", DeliveryDate = "04/06/2018", Amount = "8118.39" }, + new { CustomerName = "Florentia Binns", Model = "Grand Prix", Color = "Orange", PaymentMode = "Cash On Delivery", DeliveryDate = "10/13/2016", Amount = "10204.37" }, + new { CustomerName = "Jaquelin Galtone", Model = "Sunbird", Color = "Red", PaymentMode = "Net Banking", DeliveryDate = "10/22/2013", Amount = "6528.06" }, + new { CustomerName = "Hakeem Easseby", Model = "Mirage", Color = "Crimson", PaymentMode = "Debit Card", DeliveryDate = "9/12/2014", Amount = "5619.25" }, + new { CustomerName = "Nickolaus Gidman", Model = "XK", Color = "Orange", PaymentMode = "Debit Card", DeliveryDate = "05/12/2016", Amount = "5091.43" }, + new { CustomerName = "Jenine Iglesia", Model = "Accord", Color = "Orange", PaymentMode = "Debit Card", DeliveryDate = "09/03/2018", Amount = "14566.08" }, + new { CustomerName = "Fax Witherspoon", Model = "Range Rover Sport", Color = "Orange", PaymentMode = "Credit Card", DeliveryDate = "2/22/2018", Amount = "5284.87" } + }; + ViewBag.CustomerData = customerData; + return View(); + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/find-and-replace-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/find-and-replace-cs1/tagHelper new file mode 100644 index 0000000000..53db8544cb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/find-and-replace-cs1/tagHelper @@ -0,0 +1,97 @@ + + + + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/spreadsheet.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/spreadsheet.cs index 3c6858023c..3a3300bf82 100644 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/spreadsheet.cs +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/spreadsheet.cs @@ -1,4 +1,4 @@ public IActionResult Index() { return View(); -} +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/tagHelper index 0e5ff2e179..c6d8de4136 100644 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/tagHelper +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/getting-started-core/tagHelper @@ -1,3 +1,3 @@ -@page + - + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-from-json-cs1/openFromJsonController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-from-json-cs1/openFromJsonController.cs new file mode 100644 index 0000000000..034049cddb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-from-json-cs1/openFromJsonController.cs @@ -0,0 +1,307 @@ +public IActionResult Index() +{ + // Pass the JSON data via ViewBag + ViewBag.jsonData = GetJsonData(); + return View(); +} + +private string GetJsonData() +{ + // JSON structure for workbook + return @"{ + ""Workbook"": { + ""definedNames"": [], + ""sheets"": [ + { + ""columns"": [ + { ""width"": 100 }, + { ""width"": 158 }, + { ""width"": 72 }, + { ""width"": 113 }, + { ""width"": 113 }, + { ""width"": 77 }, + { ""width"": 97 }, + { ""width"": 73 } + ], + ""conditionalFormats"": [ + { + ""type"": ""GYRColorScale"", + ""range"": ""C3:C10"" + }, + { + ""type"": ""LessThan"", + ""cFColor"": ""RedF"", + ""range"": ""G3:G10"", + ""value"": ""43707,"" + }, + { + ""type"": ""BlueDataBar"", + ""range"": ""D3:D10"" + }, + { + ""type"": ""GreenDataBar"", + ""range"": ""E3:E10"" + }, + { + ""type"": ""Top10Items"", + ""format"": { + ""style"": { + ""backgroundColor"": ""#009999"", + ""fontWeight"": ""Bold"" + } + }, + ""range"": ""F3:F10"", + ""value"": ""1,"" + }, + { + ""type"": ""Bottom10Items"", + ""format"": { + ""style"": { + ""backgroundColor"": ""#C68D53"", + ""fontWeight"": ""Bold"" + } + }, + ""range"": ""F3:F10"", + ""value"": ""1,"" + }, + { + ""type"": ""ThreeStars"", + ""range"": ""H3:H10"" + } + ], + ""name"": ""Inventory List"", + ""rows"": [ + { + ""cells"": [ + { + ""colSpan"": 8, + ""style"": { + ""fontSize"": ""13pt"", + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"", + ""verticalAlign"": ""Middle"" + }, + ""value"": ""Inventory List"" + }, + { + ""style"": { + ""fontSize"": ""13pt"", + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"", + ""verticalAlign"": ""Middle"" + } + }, + { + ""style"": { + ""fontSize"": ""13pt"", + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"", + ""verticalAlign"": ""Middle"" + } + }, + { + ""style"": { + ""fontSize"": ""13pt"", + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"", + ""verticalAlign"": ""Middle"" + } + }, + { + ""style"": { + ""fontSize"": ""13pt"", + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"", + ""verticalAlign"": ""Middle"" + } + }, + { + ""style"": { + ""fontSize"": ""13pt"", + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"", + ""verticalAlign"": ""Middle"" + } + }, + { + ""style"": { + ""fontSize"": ""13pt"", + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"", + ""verticalAlign"": ""Middle"" + } + }, + { + ""style"": { + ""fontSize"": ""13pt"", + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"", + ""verticalAlign"": ""Middle"" + } + } + ], + ""height"": 30 + }, + { + ""cells"": [ + { + ""style"": { + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"" + }, + ""value"": ""Item Code"" + }, + { + ""style"": { + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"" + }, + ""value"": ""Item Name"" + }, + { + ""style"": { + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"" + }, + ""value"": ""Quantity"" + }, + { + ""style"": { + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"" + }, + ""value"": ""Purchase Price"" + }, + { + ""style"": { + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"" + }, + ""value"": ""Selling Price"" + }, + { + ""style"": { + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"" + }, + ""value"": ""Profit"" + }, + { + ""style"": { + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"" + }, + ""value"": ""Last Updated"" + }, + { + ""style"": { + ""fontWeight"": ""Bold"", + ""textAlign"": ""Center"" + }, + ""value"": ""Rating"" + } + ] + }, + { + ""cells"": [ + { ""value"": ""AG940Z"" }, + { ""value"": ""Laser Printer"" }, + { ""value"": ""144"" }, + { ""format"": ""$#,##0.00"", ""value"": ""169.5"" }, + { ""format"": ""$#,##0.00"", ""value"": ""172"" }, + { ""format"": ""$#,##0.00"", ""formula"": ""=E3-D3"" }, + { ""format"": ""mm-dd-yyyy"", ""value"": ""43610"" }, + { ""value"": ""4.5"" } + ] + }, + { + ""cells"": [ + { ""value"": ""BJ120K"" }, + { ""value"": ""Scientific Calculator"" }, + { ""value"": ""116"" }, + { ""format"": ""$#,##0.00"", ""value"": ""21.8"" }, + { ""format"": ""$#,##0.00"", ""value"": ""23"" }, + { ""format"": ""$#,##0.00"", ""formula"": ""=E4-D4"" }, + { ""format"": ""mm-dd-yyyy"", ""value"": ""43674"" }, + { ""value"": ""4"" } + ] + }, + { + ""cells"": [ + { ""value"": ""BC120M"" }, + { ""value"": ""Wired Keyboard"" }, + { ""value"": ""438"" }, + { ""format"": ""$#,##0.00"", ""value"": ""26.8"" }, + { ""format"": ""$#,##0.00"", ""value"": ""29"" }, + { ""format"": ""$#,##0.00"", ""formula"": ""=E5-D5"" }, + { ""format"": ""mm-dd-yyyy"", ""value"": ""43920"" }, + { ""value"": ""4.25"" } + ] + }, + { + ""cells"": [ + { ""value"": ""BS121L"" }, + { ""value"": ""Memory Card"" }, + { ""value"": ""486"" }, + { ""format"": ""$#,##0.00"", ""value"": ""23.5"" }, + { ""format"": ""$#,##0.00"", ""value"": ""25"" }, + { ""format"": ""$#,##0.00"", ""formula"": ""=E6-D6"" }, + { ""format"": ""mm-dd-yyyy"", ""value"": ""43697"" }, + { ""value"": ""3.5"" } + ] + }, + { + ""cells"": [ + { ""value"": ""BU121K"" }, + { ""value"": ""Coffee Maker"" }, + { ""value"": ""176"" }, + { ""format"": ""$#,##0.00"", ""value"": ""56.5"" }, + { ""format"": ""$#,##0.00"", ""value"": ""59"" }, + { ""format"": ""$#,##0.00"", ""formula"": ""=E7-D7"" }, + { ""format"": ""mm-dd-yyyy"", ""value"": ""43863"" }, + { ""value"": ""4.5"" } + ] + }, + { + ""cells"": [ + { ""value"": ""BD121M"" }, + { ""value"": ""Table Lamp"" }, + { ""value"": ""0"" }, + { ""format"": ""$#,##0.00"", ""value"": ""22.5"" }, + { ""format"": ""$#,##0.00"", ""value"": ""25"" }, + { ""format"": ""$#,##0.00"", ""formula"": ""=E8-D8"" }, + { ""format"": ""mm-dd-yyyy"", ""value"": ""43780"" }, + { ""value"": ""5"" } + ] + }, + { + ""cells"": [ + { ""value"": ""AT992X"" }, + { ""value"": ""Document Scanner"" }, + { ""value"": ""116"" }, + { ""format"": ""$#,##0.00"", ""value"": ""175"" }, + { ""format"": ""$#,##0.00"", ""value"": ""177"" }, + { ""format"": ""$#,##0.00"", ""formula"": ""=E9-D9"" }, + { ""format"": ""mm-dd-yyyy"", ""value"": ""43568"" }, + { ""value"": ""4.75"" } + ] + }, + { + ""cells"": [ + { ""value"": ""AP992Z"" }, + { ""value"": ""Gaming Headset"" }, + { ""value"": ""58"" }, + { ""format"": ""$#,##0.00"", ""value"": ""32"" }, + { ""format"": ""$#,##0.00"", ""value"": ""35"" }, + { ""format"": ""$#,##0.00"", ""formula"": ""=E10-D10"" }, + { ""format"": ""mm-dd-yyyy"", ""value"": ""43875"" }, + { ""value"": ""4.4"" } + ] + } + ], + ""selectedRange"": ""A1:H1"" + } + ] + } +}"; +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-from-json-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-from-json-cs1/tagHelper new file mode 100644 index 0000000000..a085f494cd --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-from-json-cs1/tagHelper @@ -0,0 +1,25 @@ +
+
+
+ +
+
+ +
+
+
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs2/openSaveController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs2/openSaveController.cs new file mode 100644 index 0000000000..ad313e5791 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs2/openSaveController.cs @@ -0,0 +1,16 @@ +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); +} + +public IActionResult Save(SaveSettings saveSettings) +{ + return Workbook.Save(saveSettings); +} + +public IActionResult Index() +{ + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs2/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs2/tagHelper new file mode 100644 index 0000000000..6f76b58651 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs2/tagHelper @@ -0,0 +1,26 @@ + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs5/openSaveController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs5/openSaveController.cs new file mode 100644 index 0000000000..cb6b5c2caf --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs5/openSaveController.cs @@ -0,0 +1,32 @@ +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); +} + +public IActionResult Save(SaveSettings saveSettings) +{ + return Workbook.Save(saveSettings); +} + +public IActionResult Index() +{ + // Default data source + List defaultData = new List() + { + new { ItemName = "Casual Shoes", Date = "02/14/2014", Time = "11:34:32 AM", Quantity = 10, Price = 20, Amount = 200, Discount = 1, Profit = 10 }, + new { ItemName = "Sports Shoes", Date = "06/11/2014", Time = "05:56:32 AM", Quantity = 20, Price = 30, Amount = 600, Discount = 5, Profit = 50 }, + new { ItemName = "Formal Shoes", Date = "07/27/2014", Time = "03:32:44 AM", Quantity = 20, Price = 15, Amount = 300, Discount = 7, Profit = 27 }, + new { ItemName = "Sandals & Floaters", Date = "11/21/2014", Time = "06:23:54 AM", Quantity = 15, Price = 20, Amount = 300, Discount = 11, Profit = 67 }, + new { ItemName = "Flip- Flops & Slippers", Date = "06/23/2014", Time = "12:43:59 AM", Quantity = 30, Price = 10, Amount = 300, Discount = 10, Profit = 70 }, + new { ItemName = "Sneakers", Date = "07/22/2014", Time = "10:55:53 AM", Quantity = 40, Price = 20, Amount = 800, Discount = 13, Profit = 66 }, + new { ItemName = "Running Shoes", Date = "02/04/2014", Time = "03:44:34 AM", Quantity = 20, Price = 10, Amount = 200, Discount = 3, Profit = 14 }, + new { ItemName = "Loafers", Date = "11/30/2014", Time = "03:12:52 AM", Quantity = 31, Price = 10, Amount = 310, Discount = 6, Profit = 29 }, + new { ItemName = "Cricket Shoes", Date = "07/09/2014", Time = "11:32:14 AM", Quantity = 41, Price = 30, Amount = 1210, Discount = 12, Profit = 166 }, + new { ItemName = "T-Shirts", Date = "10/31/2014", Time = "12:01:44 AM", Quantity = 50, Price = 10, Amount = 500, Discount = 9, Profit = 55 }, + }; + + ViewBag.DefaultData = defaultData; + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs5/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs5/tagHelper new file mode 100644 index 0000000000..0a5d435fea --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs5/tagHelper @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs9/openSaveController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs9/openSaveController.cs new file mode 100644 index 0000000000..ad313e5791 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs9/openSaveController.cs @@ -0,0 +1,16 @@ +public IActionResult Open(IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); +} + +public IActionResult Save(SaveSettings saveSettings) +{ + return Workbook.Save(saveSettings); +} + +public IActionResult Index() +{ + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs9/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs9/tagHelper new file mode 100644 index 0000000000..0820c62156 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/open-save-cs9/tagHelper @@ -0,0 +1,26 @@ +
+
Upload an Excel file to open in Spreadsheet
+ +
+ + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/paste-values-cs1/pasteValuesController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/paste-values-cs1/pasteValuesController.cs new file mode 100644 index 0000000000..1f718a7a3e --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/paste-values-cs1/pasteValuesController.cs @@ -0,0 +1,49 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web; +using Microsoft.AspNetCore.Mvc; + +namespace WebApplication.Controllers +{ + public class PasteValuesController : Controller + { + public IActionResult Index() + { + List pasteData = new List() + { + new { CustomerName = "Romona Heaslip", Model = "Taurus", Color = "Aquamarine", PaymentMode = "Debit Card", DeliveryDate = "07/11/2015", Amount = "8529.22" }, + new { CustomerName = "Clare Batterton", Model = "Sparrow", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "7/13/2016", Amount = "17866.19" }, + new { CustomerName = "Eamon Traise", Model = "Grand Cherokee", Color = "Blue", PaymentMode = "Net Banking", DeliveryDate = "09/04/2015", Amount = "13853.09" }, + new { CustomerName = "Julius Gorner", Model = "GTO", Color = "Aquamarine", PaymentMode = "Credit Card", DeliveryDate = "12/15/2017", Amount = "2338.74" }, + new { CustomerName = "Jenna Schoolfield", Model = "LX", Color = "Yellow", PaymentMode = "Credit Card", DeliveryDate = "10/08/2014", Amount = "9578.45" }, + new { CustomerName = "Marylynne Harring", Model = "Catera", Color = "Green", PaymentMode = "Cash On Delivery", DeliveryDate = "7/01/2017", Amount = "19141.62" }, + new { CustomerName = "Vilhelmina Leipelt", Model = "7 Series", Color = "Goldenrod", PaymentMode = "Credit Card", DeliveryDate = "12/20/2015", Amount = "6543.30" }, + new { CustomerName = "Barby Heisler", Model = "Corvette", Color = "Red", PaymentMode = "Credit Card", DeliveryDate = "11/24/2014", Amount = "13035.06" }, + new { CustomerName = "Karyn Boik", Model = "Regal", Color = "Indigo", PaymentMode = "Debit Card", DeliveryDate = "05/12/2014", Amount = "18488.80" }, + new { CustomerName = "Jeanette Pamplin", Model = "S4", Color = "Fuscia", PaymentMode = "Net Banking", DeliveryDate = "12/30/2014", Amount = "12317.04" }, + new { CustomerName = "Cristi Espinos", Model = "TL", Color = "Aquamarine", PaymentMode = "Credit Card", DeliveryDate = "12/18/2013", Amount = "6230.13" }, + new { CustomerName = "Issy Humm", Model = "Club Wagon", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "02/02/2015", Amount = "9709.49" }, + new { CustomerName = "Tuesday Fautly", Model = "V8 Vantage", Color = "Crimson", PaymentMode = "Debit Card", DeliveryDate = "11/19/2014", Amount = "9766.10" }, + new { CustomerName = "Rosemaria Thomann", Model = "Caravan", Color = "Violet", PaymentMode = "Net Banking", DeliveryDate = "02/08/2014", Amount = "7685.49" }, + new { CustomerName = "Lyell Fuentez", Model = "Bravada", Color = "Violet", PaymentMode = "Debit Card", DeliveryDate = "08/05/2016", Amount = "18012.45" }, + new { CustomerName = "Raynell Layne", Model = "Colorado", Color = "Pink", PaymentMode = "Credit Card", DeliveryDate = "05/30/2016", Amount = "2785.49" }, + new { CustomerName = "Raye Whines", Model = "4Runner", Color = "Red", PaymentMode = "Debit Card", DeliveryDate = "12/10/2016", Amount = "9967.74" }, + new { CustomerName = "Virgina Aharoni", Model = "TSX", Color = "Pink", PaymentMode = "Cash On Delivery", DeliveryDate = "10/23/2014", Amount = "5584.33" }, + new { CustomerName = "Peta Cheshir", Model = "Pathfinder", Color = "Red", PaymentMode = "Net Banking", DeliveryDate = "12/24/2015", Amount = "5286.53" }, + new { CustomerName = "Jule Urion", Model = "Charger", Color = "Violet", PaymentMode = "Debit Card", DeliveryDate = "11/20/2013", Amount = "13511.91" }, + new { CustomerName = "Lew Gilyatt", Model = "Bonneville", Color = "Crimson", PaymentMode = "Credit Card", DeliveryDate = "11/19/2013", Amount = "6498.19" }, + new { CustomerName = "Jobey Fortun", Model = "B-Series", Color = "Blue", PaymentMode = "Net Banking", DeliveryDate = "10/30/2014", Amount = "10359.67" }, + new { CustomerName = "Blondie Crump", Model = "Voyager", Color = "Turquoise", PaymentMode = "Credit Card", DeliveryDate = "04/06/2018", Amount = "8118.39" }, + new { CustomerName = "Florentia Binns", Model = "Grand Prix", Color = "Orange", PaymentMode = "Cash On Delivery", DeliveryDate = "10/13/2016", Amount = "10204.37" }, + new { CustomerName = "Jaquelin Galtone", Model = "Sunbird", Color = "Red", PaymentMode = "Net Banking", DeliveryDate = "10/22/2013", Amount = "6528.06" }, + new { CustomerName = "Hakeem Easseby", Model = "Mirage", Color = "Crimson", PaymentMode = "Debit Card", DeliveryDate = "9/12/2014", Amount = "5619.25" }, + new { CustomerName = "Nickolaus Gidman", Model = "XK", Color = "Orange", PaymentMode = "Debit Card", DeliveryDate = "05/12/2016", Amount = "5091.43" }, + new { CustomerName = "Jenine Iglesia", Model = "Accord", Color = "Orange", PaymentMode = "Debit Card", DeliveryDate = "09/03/2018", Amount = "14566.08" }, + new { CustomerName = "Fax Witherspoon", Model = "Range Rover Sport", Color = "Orange", PaymentMode = "Credit Card", DeliveryDate = "2/22/2018", Amount = "5284.87" } + }; + ViewBag.DefaultData = pasteData; + return View(); + } + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/paste-values-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/paste-values-cs1/tagHelper new file mode 100644 index 0000000000..83eb0478d3 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/paste-values-cs1/tagHelper @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/prevent-actions-cs1/preventActionsController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/prevent-actions-cs1/preventActionsController.cs new file mode 100644 index 0000000000..650f4638ca --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/prevent-actions-cs1/preventActionsController.cs @@ -0,0 +1,30 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web; +using Microsoft.AspNetCore.Mvc; + +namespace WebApplication.Controllers +{ + public class PreventActionsController : Controller + { + public IActionResult Index() + { + List preventActionsData = new List() + { + new { ItemName = "Casual Shoes", Date = "02/14/2014", Time = "11:34:32 AM", Quantity = 10, Price = 20, Amount = 200, Discount = 1, Profit = 10 }, + new { ItemName = "Sports Shoes", Date = "06/11/2014", Time = "05:56:32 AM", Quantity = 20, Price = 30, Amount = 600, Discount = 5, Profit = 50 }, + new { ItemName = "Formal Shoes", Date = "07/27/2014", Time = "03:32:44 AM", Quantity = 20, Price = 15, Amount = 300, Discount = 7, Profit = 27 }, + new { ItemName = "Sandals & Floaters", Date = "11/21/2014", Time = "06:23:54 AM", Quantity = 15, Price = 20, Amount = 300, Discount = 11, Profit = 67 }, + new { ItemName = "Flip- Flops & Slippers", Date = "06/23/2014", Time = "12:43:59 AM", Quantity = 30, Price = 10, Amount = 300, Discount = 10, Profit = 70 }, + new { ItemName = "Sneakers", Date = "07/22/2014", Time = "10:55:53 AM", Quantity = 40, Price = 20, Amount = 800, Discount = 13, Profit = 66 }, + new { ItemName = "Running Shoes", Date = "02/04/2014", Time = "03:44:34 AM", Quantity = 20, Price = 10, Amount = 200, Discount = 3, Profit = 14 }, + new { ItemName = "Loafers", Date = "11/30/2014", Time = "03:12:52 AM", Quantity = 31, Price = 10, Amount = 310, Discount = 6, Profit = 29 }, + new { ItemName = "Cricket Shoes", Date = "07/09/2014", Time = "11:32:14 AM", Quantity = 41, Price = 30, Amount = 1210, Discount = 12, Profit = 166 }, + new { ItemName = "T-Shirts", Date = "10/31/2014", Time = "12:01:44 AM", Quantity = 50, Price = 10, Amount = 500, Discount = 9, Profit = 55 } + }; + ViewBag.PreventActionsData = preventActionsData; + return View(); + } + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/prevent-actions-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/prevent-actions-cs1/tagHelper new file mode 100644 index 0000000000..7b154b5b61 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/prevent-actions-cs1/tagHelper @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/razor deleted file mode 100644 index b3f411b33f..0000000000 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/razor +++ /dev/null @@ -1,35 +0,0 @@ -@using Syncfusion.EJ2.Spreadsheet - -@Html.EJS().Spreadsheet("spreadsheet").ShowFormulaBar(false).Created("created").Sheets(sheet => - { - sheet.Name("Sheet1").Ranges(ranges => - { - ranges.DataSource((IEnumerable)ViewBag.DefaultData).Add(); - }) - .Columns(column => - { - column.Width(200).Add(); - }).Add(); - }).Render() - - \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/richTextFormat.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/richTextFormat.cs deleted file mode 100644 index 4f716ac27c..0000000000 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/richTextFormat.cs +++ /dev/null @@ -1,13 +0,0 @@ -public IActionResult Index() -{ - List data = new List() - { - new { Text = "Plain Text" }, - new { Text = "Mineral Water H2O" }, - new { Text = "Energy Supplement C6H12O6" }, - new { Text = "H2O" }, - new { Text = "X2" } - }; - ViewBag.DefaultData = data; - return View(); -} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/tagHelper deleted file mode 100644 index 3dcff25e50..0000000000 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/richtext-format/tagHelper +++ /dev/null @@ -1,88 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/save-as-json-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/save-as-json-cs1/tagHelper new file mode 100644 index 0000000000..b5d42b17ec --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/save-as-json-cs1/tagHelper @@ -0,0 +1,29 @@ +
+
+
+ +
+ + + + + +
+
+ + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-filemenu-cs1/ShowOrHideFileMenuController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-filemenu-cs1/ShowOrHideFileMenuController.cs new file mode 100644 index 0000000000..3c6858023c --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-filemenu-cs1/ShowOrHideFileMenuController.cs @@ -0,0 +1,4 @@ +public IActionResult Index() +{ + return View(); +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-filemenu-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-filemenu-cs1/tagHelper new file mode 100644 index 0000000000..af4eb9b7d1 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-filemenu-cs1/tagHelper @@ -0,0 +1,36 @@ + +
+
+ + +
+ + +
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-ribbon-items-cs1/showOrHideRibbonController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-ribbon-items-cs1/showOrHideRibbonController.cs new file mode 100644 index 0000000000..3a4b671b59 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-ribbon-items-cs1/showOrHideRibbonController.cs @@ -0,0 +1,16 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web; +using Microsoft.AspNetCore.Mvc; + +namespace WebApplication.Controllers +{ + public class ShowOrHideRibbonController : Controller + { + public IActionResult Index() + { + return View(); + } + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-ribbon-items-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-ribbon-items-cs1/tagHelper new file mode 100644 index 0000000000..55d2e6ee55 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/show-or-hide-ribbon-items-cs1/tagHelper @@ -0,0 +1,48 @@ +
+
+ + + + +
+ + + +
+ + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/spreadsheet-like-grid-cs1/spreadsheetGridController.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/spreadsheet-like-grid-cs1/spreadsheetGridController.cs new file mode 100644 index 0000000000..aed577109f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/spreadsheet-like-grid-cs1/spreadsheetGridController.cs @@ -0,0 +1,46 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using Microsoft.AspNetCore.Mvc; + +public class SpreadsheetGridController : Controller +{ + public IActionResult Index() + { + List employeeData = new List() + { + new { EmployeeID = 10001, Employees = "Laura Nancy", Designation = "Designer", Location = "France", Status = "Inactive", Trustworthiness = "Sufficient", Rating = 0, Software = 69, EmployeeImg = "usermale", CurrentSalary = 84194, Address = "Taucherstraße 10", Mail = "laura15@jourrapide.com" }, + new { EmployeeID = 10002, Employees = "Zachery Van", Designation = "CFO", Location = "Canada", Status = "Inactive", Trustworthiness = "Insufficient", Rating = 3, Software = 99, EmployeeImg = "usermale", CurrentSalary = 55349, Address = "5ª Ave. Los Palos Grandes", Mail = "zachery109@sample.com" }, + new { EmployeeID = 10003, Employees = "Rose Fuller", Designation = "CFO", Location = "France", Status = "Active", Trustworthiness = "Insufficient", Rating = 1, Software = 1, EmployeeImg = "usermale", CurrentSalary = 16477, Address = "2817 Milton Dr.", Mail = "rose55@rpy.com" }, + new { EmployeeID = 10004, Employees = "Jack Bergs", Designation = "Manager", Location = "Mexico", Status = "Inactive", Trustworthiness = "Insufficient", Rating = 3, Software = 36, EmployeeImg = "usermale", CurrentSalary = 49040, Address = "2, rue du Commerce", Mail = "jack30@sample.com" }, + new { EmployeeID = 10005, Employees = "Vinet Bergs", Designation = "Program Directory", Location = "UK", Status = "Active", Trustworthiness = "Insufficient", Rating = 1, Software = 39, EmployeeImg = "usermale", CurrentSalary = 5495, Address = "Rua da Panificadora, 12", Mail = "vinet32@jourrapide.com" }, + new { EmployeeID = 10006, Employees = "Buchanan Van", Designation = "Designer", Location = "Germany", Status = "Active", Trustworthiness = "Insufficient", Rating = 4, Software = 78, EmployeeImg = "usermale", CurrentSalary = 42182, Address = "24, place Kléber", Mail = "buchanan18@mail.com" }, + new { EmployeeID = 10007, Employees = "Dodsworth Nancy", Designation = "Project Lead", Location = "USA", Status = "Inactive", Trustworthiness = "Sufficient", Rating = 0, Software = 0, EmployeeImg = "userfemale", CurrentSalary = 35776, Address = "Rua do Paço, 67", Mail = "dodsworth84@mail.com" }, + new { EmployeeID = 10008, Employees = "Laura Jack", Designation = "Developer", Location = "Austria", Status = "Inactive", Trustworthiness = "Perfect", Rating = 3, Software = 89, EmployeeImg = "usermale", CurrentSalary = 25108, Address = "Rua da Panificadora, 12", Mail = "laura82@mail.com" }, + new { EmployeeID = 10009, Employees = "Anne Fuller", Designation = "Program Directory", Location = "Mexico", Status = "Active", Trustworthiness = "Insufficient", Rating = 0, Software = 19, EmployeeImg = "userfemale", CurrentSalary = 32568, Address = "Gran Vía, 1", Mail = "anne97@jourrapide.com" }, + new { EmployeeID = 10010, Employees = "Buchanan Andrew", Designation = "Designer", Location = "Austria", Status = "Active", Trustworthiness = "Insufficient", Rating = 1, Software = 62, EmployeeImg = "userfemale", CurrentSalary = 12320, Address = "P.O. Box 555", Mail = "buchanan50@jourrapide.com" }, + new { EmployeeID = 10011, Employees = "Andrew Janet", Designation = "System Analyst", Location = "Germany", Status = "Active", Trustworthiness = "Insufficient", Rating = 3, Software = 8, EmployeeImg = "userfemale", CurrentSalary = 20890, Address = "Starenweg 5", Mail = "andrew63@mail.com" }, + new { EmployeeID = 10012, Employees = "Margaret Tamer", Designation = "System Analyst", Location = "Germany", Status = "Active", Trustworthiness = "Insufficient", Rating = 4, Software = 7, EmployeeImg = "userfemale", CurrentSalary = 22337, Address = "Magazinweg 7", Mail = "margaret26@mail.com" }, + new { EmployeeID = 10013, Employees = "Tamer Fuller", Designation = "CFO", Location = "Canada", Status = "Active", Trustworthiness = "Insufficient", Rating = 3, Software = 78, EmployeeImg = "usermale", CurrentSalary = 89181, Address = "Taucherstraße 10", Mail = "tamer40@arpy.com" }, + new { EmployeeID = 10014, Employees = "Tamer Anne", Designation = "CFO", Location = "Sweden", Status = "Active", Trustworthiness = "Sufficient", Rating = 0, Software = 18, EmployeeImg = "usermale", CurrentSalary = 20998, Address = "Taucherstraße 10", Mail = "tamer68@arpy.com" }, + new { EmployeeID = 10015, Employees = "Anton Davolio", Designation = "Project Lead", Location = "France", Status = "Active", Trustworthiness = "Sufficient", Rating = 4, Software = 8, EmployeeImg = "userfemale", CurrentSalary = 48232, Address = "Luisenstr. 48", Mail = "anton46@mail.com" }, + new { EmployeeID = 10016, Employees = "Buchanan Buchanan", Designation = "System Analyst", Location = "Austria", Status = "Inactive", Trustworthiness = "Perfect", Rating = 0, Software = 19, EmployeeImg = "usermale", CurrentSalary = 43041, Address = "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", Mail = "buchanan68@mail.com" }, + new { EmployeeID = 10017, Employees = "King Buchanan", Designation = "Program Directory", Location = "Sweden", Status = "Active", Trustworthiness = "Sufficient", Rating = 0, Software = 44, EmployeeImg = "userfemale", CurrentSalary = 25259, Address = "Magazinweg 7", Mail = "king80@jourrapide.com" }, + new { EmployeeID = 10018, Employees = "Rose Michael", Designation = "Project Lead", Location = "Canada", Status = "Active", Trustworthiness = "Perfect", Rating = 4, Software = 31, EmployeeImg = "userfemale", CurrentSalary = 91156, Address = "Fauntleroy Circus", Mail = "rose75@mail.com" }, + new { EmployeeID = 10019, Employees = "King Bergs", Designation = "Developer", Location = "Germany", Status = "Active", Trustworthiness = "Sufficient", Rating = 2, Software = 29, EmployeeImg = "userfemale", CurrentSalary = 28826, Address = "2817 Milton Dr.", Mail = "king57@jourrapide.com" }, + new { EmployeeID = 10020, Employees = "Davolio Fuller", Designation = "Designer", Location = "Canada", Status = "Inactive", Trustworthiness = "Sufficient", Rating = 3, Software = 35, EmployeeImg = "userfemale", CurrentSalary = 71035, Address = "Gran Vía, 1", Mail = "davolio29@arpy.com" }, + new { EmployeeID = 10021, Employees = "Rose Rose", Designation = "CFO", Location = "Germany", Status = "Active", Trustworthiness = "Perfect", Rating = 3, Software = 38, EmployeeImg = "usermale", CurrentSalary = 68123, Address = "Rua do Mercado, 12", Mail = "rose54@arpy.com" }, + new { EmployeeID = 10022, Employees = "Andrew Michael", Designation = "Program Directory", Location = "UK", Status = "Inactive", Trustworthiness = "Insufficient", Rating = 2, Software = 61, EmployeeImg = "userfemale", CurrentSalary = 75470, Address = "2, rue du Commerce", Mail = "andrew88@jourrapide.com" }, + new { EmployeeID = 10023, Employees = "Davolio Kathryn", Designation = "Manager", Location = "Germany", Status = "Active", Trustworthiness = "Perfect", Rating = 3, Software = 25, EmployeeImg = "usermale", CurrentSalary = 25234, Address = "Hauptstr. 31", Mail = "davolio42@sample.com" }, + new { EmployeeID = 10024, Employees = "Anne Fleet", Designation = "System Analyst", Location = "UK", Status = "Active", Trustworthiness = "Perfect", Rating = 3, Software = 0, EmployeeImg = "userfemale", CurrentSalary = 8341, Address = "59 rue de lAbbaye", Mail = "anne86@arpy.com" }, + new { EmployeeID = 10025, Employees = "Margaret Andrew", Designation = "System Analyst", Location = "Germany", Status = "Inactive", Trustworthiness = "Insufficient", Rating = 3, Software = 51, EmployeeImg = "userfemale", CurrentSalary = 84975, Address = "P.O. Box 555", Mail = "margaret41@arpy.com" }, + new { EmployeeID = 10026, Employees = "Kathryn Laura", Designation = "Project Lead", Location = "Austria", Status = "Active", Trustworthiness = "Insufficient", Rating = 3, Software = 48, EmployeeImg = "usermale", CurrentSalary = 97282, Address = "Avda. Azteca 123", Mail = "kathryn82@rpy.com" }, + new { EmployeeID = 10027, Employees = "Michael Michael", Designation = "Developer", Location = "UK", Status = "Inactive", Trustworthiness = "Perfect", Rating = 4, Software = 16, EmployeeImg = "usermale", CurrentSalary = 4184, Address = "Rua do Paço, 67", Mail = "michael58@jourrapide.com" }, + new { EmployeeID = 10028, Employees = "Leverling Vinet", Designation = "Project Lead", Location = "Germany", Status = "Inactive", Trustworthiness = "Perfect", Rating = 0, Software = 57, EmployeeImg = "userfemale", CurrentSalary = 38370, Address = "59 rue de lAbbaye", Mail = "leverling102@sample.com" }, + new { EmployeeID = 10029, Employees = "Rose Jack", Designation = "Developer", Location = "UK", Status = "Active", Trustworthiness = "Perfect", Rating = 0, Software = 46, EmployeeImg = "userfemale", CurrentSalary = 84790, Address = "Rua do Mercado, 12", Mail = "rose108@jourrapide.com" }, + new { EmployeeID = 10030, Employees = "Vinet Van", Designation = "Developer", Location = "USA", Status = "Active", Trustworthiness = "Sufficient", Rating = 0, Software = 40, EmployeeImg = "usermale", CurrentSalary = 71005, Address = "Gran Vía, 1", Mail = "vinet90@jourrapide.com" } + }; + ViewBag.DefaultData = employeeData; + return View(); + } +} diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/spreadsheet-like-grid-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/spreadsheet-like-grid-cs1/tagHelper new file mode 100644 index 0000000000..9be5ef3f62 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/asp-net-core/spreadsheet-like-grid-cs1/tagHelper @@ -0,0 +1,223 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/batchUpdate.cs b/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/batchUpdate.cs deleted file mode 100644 index ebd9bfeb0b..0000000000 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/batchUpdate.cs +++ /dev/null @@ -1,18 +0,0 @@ -public IActionResult Index() -{ - List defaultData = new List() - { - new { ProjectName = "Website Redesign", Manager = "Anita", Department = "Marketing", StartDate = "04/01/2026", EndDate = "06/20/2026", Budget = 25000, Spent = 18000, Variance = 7000, Status = "In Progress", Priority = 2 }, - new { ProjectName = "Mobile App Upgrade", Manager = "David", Department = "Engineering", StartDate = "04/05/2026", EndDate = "07/15/2026", Budget = 42000, Spent = 26500, Variance = 15500, Status = "In Progress", Priority = 1 }, - new { ProjectName = "CRM Migration", Manager = "Priya", Department = "Sales", StartDate = "03/18/2026", EndDate = "08/10/2026", Budget = 38000, Spent = 31000, Variance = 7000, Status = "On Hold", Priority = 2 }, - new { ProjectName = "HR Portal Refresh", Manager = "Kumar", Department = "HR", StartDate = "04/12/2026", EndDate = "05/30/2026", Budget = 12000, Spent = 9500, Variance = 2500, Status = "Completed", Priority = 3 }, - new { ProjectName = "Finance Dashboard", Manager = "Meera", Department = "Finance", StartDate = "05/01/2026", EndDate = "07/28/2026", Budget = 30000, Spent = 14250, Variance = 15750, Status = "In Progress", Priority = 1 }, - new { ProjectName = "Vendor Portal Integration", Manager = "John", Department = "Procurement", StartDate = "04/22/2026", EndDate = "08/05/2026", Budget = 27000, Spent = 11000, Variance = 16000, Status = "Not Started", Priority = 4 }, - new { ProjectName = "Security Audit Remediation", Manager = "Sara", Department = "IT", StartDate = "03/25/2026", EndDate = "06/18/2026", Budget = 16000, Spent = 13200, Variance = 2800, Status = "In Progress", Priority = 1 }, - new { ProjectName = "Customer Support Automation", Manager = "Rahul", Department = "Support", StartDate = "04/08/2026", EndDate = "07/01/2026", Budget = 21000, Spent = 8000, Variance = 13000, Status = "In Progress", Priority = 2 }, - new { ProjectName = "Inventory Sync Improvement", Manager = "Latha", Department = "Operations", StartDate = "05/10/2026", EndDate = "08/22/2026", Budget = 19500, Spent = 6200, Variance = 13300, Status = "Not Started", Priority = 3 }, - new { ProjectName = "Analytics Reporting Pack", Manager = "Arun", Department = "Business Intelligence", StartDate = "04/15/2026", EndDate = "06/30/2026", Budget = 17500, Spent = 12400, Variance = 5100, Status = "Completed", Priority = 2 } - }; - ViewBag.DefaultData = defaultData; - return View(); -} \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/razor b/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/razor deleted file mode 100644 index 72a2975538..0000000000 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/razor +++ /dev/null @@ -1,47 +0,0 @@ -@Html.EJS().Spreadsheet("spreadsheet").Created("created").AllowOpen(true).AllowSave(true).OpenUrl("https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open").SaveUrl("https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save").Sheets(sheet => -{ - sheet.Name("Project Budget").Ranges(ranges => - { - ranges.DataSource((IEnumerable)ViewBag.DefaultData).StartCell("A1").Add(); - }).Columns(column => - { - column.Add(); - column.Add(); - column.Add(); - column.Add(); - column.Add(); - column.Add(); - column.Add(); - column.Add(); - column.Add(); - column.Add(); - }).Add(); - }).Render() - - \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/tagHelper b/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/tagHelper deleted file mode 100644 index 5c8be6ca04..0000000000 --- a/Document-Processing/code-snippet/spreadsheet/asp-net-core/suspend-resume-cs1/tagHelper +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file