diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md
index 97a493c27e..f7e58096d7 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/accessibility.md
@@ -1,17 +1,17 @@
---
layout: post
-title: Accessibility in EJ2 ASP.NET CORE Spreadsheet Control
-description: "Documentation for the accessibility in the Essential JS2 Spreadsheet, featuring WAI-ARIA standards."
+title: Accessibility in React Spreadsheet component | Syncfusion
+description: Learn here all about Accessibility in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+control: Accessibility
platform: document-processing
-control: Accessibility
documentation: ug
---
-# Accessibility in EJ2 ASP.NET CORE Spreadsheet Control
+# Accessibility in React Spreadsheet component
-The Spreadsheet control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Spreadsheet component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility.
-The accessibility compliance for the Spreadsheet control is outlined below.
+The accessibility compliance for the Spreadsheet component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
@@ -31,15 +31,15 @@ The accessibility compliance for the Spreadsheet control is outlined below.
margin: 0.5em 0;
}
- - All features of the control meet the requirement.
- All features of the component meet the requirement.
- Some features of the control do not meet the requirement.
- Some features of the component do not meet the requirement.
- The control does not meet the requirement.
- The component does not meet the requirement.
® React components](https://ej2.syncfusion.com/react/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..339aa03b59
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/events.md
@@ -0,0 +1,154 @@
+---
+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 js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/react/events/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/react/events/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/react/events" %}
+
+## 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..81a5bc02c7 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
---
+# Feature list in EJ2 ASP.NET Core Spreadsheet component
-# Comparison between EJ1 & EJ2 ASP.NET Core Spreadsheet features
+The following table shows the features available in our Syncfusion EJ2 Spreadsheet.
-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.
-.` 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 5899a39b51..6c57819a80 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formatting.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/formatting.md
@@ -7,7 +7,6 @@ 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,
@@ -15,6 +14,10 @@ Formatting options make your data easier to view and understand. The different t
* Text Formatting
* Cell Formatting
+To get start quickly with Formatting, you can check on this video:
+
+{% youtube "https://www.youtube.com/watch?v=AyHLgzNq6_w" %}
+
## Number Formatting
Number formatting provides a type for your data in the Spreadsheet. Use the [`allowNumberFormatting`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowNumberFormatting) property to enable or disable the number formatting option in the Spreadsheet. The different types of number formatting supported in Spreadsheet are,
@@ -34,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,
@@ -84,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.
@@ -98,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.
@@ -110,36 +113,47 @@ 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;
+```js
+@using Syncfusion.EJ2.Spreadsheet
+
+@{
+ // 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.
@@ -153,12 +167,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 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.
-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.
+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
@@ -166,15 +182,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
@@ -182,32 +198,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.
@@ -221,8 +237,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:
@@ -232,16 +246,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,
@@ -252,15 +266,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,
-(null);
+ React.useEffect(() => {
+ let spreadsheet = spreadsheetRef.current;
+ if (spreadsheet) {
+ //Applies cell and number formatting to specified range of the active sheet
+ spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
+ spreadsheet.numberFormat('$#,##0.00', 'F2:F11');
+ }
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default App;
+const root = createRoot(document.getElementById('root')!);
+root.render(("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
+
+Import XLS files from AWS S3 bucket
+
+// 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
+
+
+ Import XLS file from Azure Blob Storage
+ ;
+
+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
+
+ Import XLS file from Google Cloud Storage
+ ;
+
+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..7b52bf0ae5
--- /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/react/documentation/api/spreadsheet/index-default#openfromjson) method.
+
+```typescript
+
+ Open from Drive
+
+
+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/print.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/print.md
index 76de46051e..d03a564147 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/print.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/print.md
@@ -7,7 +7,6 @@ control: Print
documentation: ug
---
-
# Print in ASP.NET Core Spreadsheet control
The printing functionality allows end-users to print all contents, such as tables, charts, images, and formatted contents, available in the active worksheet or entire workbook in the Spreadsheet. You can enable or disable print functionality by using the `allowPrint` property, which defaults to **true**.
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..744221392e 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
---
+# Protect sheet in ASP.NET Core Spreadsheet Control
-# Protection in ASP.NET Core Spreadsheet Control
+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.
-Sheet protection helps you to prevent the users from modifying the data in the spreadsheet.
+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,9 +44,10 @@ 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.
+The following example shows `Protect Sheet` functionality in the Spreadsheet control.
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
@@ -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.
-
-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.
+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.
-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..30f1d1442e 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/ribbon.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/ribbon.md
@@ -7,7 +7,6 @@ control: Ribbon
documentation: ug
---
-
# Ribbon in ASP.NET Core Spreadsheet control
It helps to organize a spreadsheet’s features into a series of tabs. By clicking the expand or collapse icon, you can expand or collapse the ribbon toolbar dynamically.
@@ -18,20 +17,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 +38,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..617837f4ea 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
@@ -7,14 +7,15 @@ control: Rows And Columns
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**.
+
+The list of operations that you can perform on rows and columns includes:
-* Insert
-* Delete
-* Show and Hide
+* **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 +25,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 +39,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 +57,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 +77,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 +117,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 +132,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 +147,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 +156,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 +181,9 @@ The following code example shows how to change the text in the column headers.
{% endhighlight %}
{% endtabs %}
-## Limitations of insert and delete
-
-The following features have some limitations in Insert/Delete:
+## Note
-* 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..d5efad4ba6
--- /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/react/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..8ca5bdb8aa
--- /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/react/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end
+
+```js
+
+
+ Save to Azure Blob Storage
+ ;
+
+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..97e4cd20b3
--- /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/react/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end
+
+```js
+
+ Save to Google Cloud Storage
+
+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..21d834e31b
--- /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/react/documentation/api/spreadsheet/index-default#saveasjson) method and send the saved JSON to the server via fetch call.
+
+```typescript
+
+ Save to Google Drive
+ ;
+
+// 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/scrolling.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/scrolling.md
index 2c846110b7..d1ed6f56a4 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/scrolling.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/scrolling.md
@@ -7,12 +7,11 @@ control: Scrolling
documentation: ug
---
-
# Scrolling in ASP.NET Core Spreadsheet control
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 +20,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 +34,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 +59,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..37c5b15f30 100644
--- a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/searching.md
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/searching.md
@@ -7,54 +7,53 @@ control: Searching
documentation: ug
---
+# Searching in React Spreadsheet component
-# Find and Replace in ASP.NET Core Spreadsheet control
+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.
-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.
-
-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 option button in Find dialog to open the Find and Replace dialog. Then, select the below properties for enhanced searching.
+* 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.
-
+```
+
+**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.
+
+
+
+**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
+
+.azurewebsites.net
+```
+
+
+
+**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..c96b8dc0a3
--- /dev/null
+++ b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/server-deployment/spreadsheet-server-docker-image-overview.md
@@ -0,0 +1,101 @@
+---
+layout: post
+title: Docker image deployment in React Spreadsheet component | Syncfusion
+description: Learn here all about Docker image deployment in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: Docker deployment
+documentation: ug
+---
+
+# Docker Image Overview in React Spreadsheet
+
+The [**Syncfusion® Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/react-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)
+
+```js
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+
+ return (
+ // Initialize Spreadsheet component.
+ ® [icons](https://ej2.syncfusion.com/documentation/appearance/icons#material) based on your theme.
+
+```
+
+.e-spreadsheet .e-sort-filter-icon:before {
+ background-color: #deecf9;
+ content: '\e306';
+}
+
+```
+
+### Customizing the filter dialog content
+
+Use the below CSS to customize the Spreadsheet filter dialog content element.
+
+```
+
+.e-spreadsheet .e-filter-popup .e-dlg-content {
+ background-color: #deecf9;
+}
+
+```
+
+### Customizing the filter dialog footer
+
+Spreadsheet filter dialog footer element can be customized by using the below CSS.
+
+```
+
+.e-spreadsheet .e-filter-popup .e-footer-content {
+ background-color: #ccffff;
+}
+
+```
+
+### Customizing the filter dialog input element
+
+Use the below CSS to customize the Spreadsheet filter dialog input element.
+
+```
+
+.e-spreadsheet .e-filter-popup .e-input-group input.e-input{
+ font-family: cursive;
+}
+
+```
+
+### Customizing the filter dialog button element
+
+Use the below CSS to customize the Spreadsheet filter dialog button element.
+
+```
+
+.e-spreadsheet .e-filter-popup .e-btn{
+ font-family: cursive;
+}
+
+```
+
+### Customizing the Excel filter dialog number filters element
+
+Spreadsheet Excel filter dialog number filters element can be customized by using the below CSS.
+
+```
+
+.e-spreadsheet .e-filter-popup .e-contextmenu-wrapper ul{
+ background-color: #deecf9;
+}
+
+```
+
+## Footer
+
+### Customizing the Spreadsheet sheet tab panel
+
+Spreadsheet sheet tab panel can be customized by using the below CSS.
+
+```
+
+.e-spreadsheet .e-sheet-tab-panel {
+ background: #08fbfb;
+}
+
+```
+
+### Customizing the Spreadsheet sheet tab
+
+Spreadsheet sheet tab element can be customized by using the below CSS.
+
+```
+
+.e-spreadsheet .e-sheet-tab-panel .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text {
+ font-weight: bold;
+}
+
+```
\ No newline at end of file
diff --git a/Document-Processing/Excel/Spreadsheet/React/formulas.md b/Document-Processing/Excel/Spreadsheet/React/formulas.md
index 7d30bc602e..cf2f0529b4 100644
--- a/Document-Processing/Excel/Spreadsheet/React/formulas.md
+++ b/Document-Processing/Excel/Spreadsheet/React/formulas.md
@@ -1,13 +1,13 @@
----
layout: post
-title: Formulas in React Spreadsheet component | Syncfusion
-description: Learn here all about Formulas in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
-control: Formulas
+title: Formulas in EJ2 ASP.NET Core Syncfusion Spreadsheet Component
+description: Learn here all about Formulas in Syncfusion EJ2 ASP.NET CORE Spreadsheet component of Syncfusion Essential JS 2 and more.
platform: document-processing
+control: Formulas
documentation: ug
---
-# Formulas in React Spreadsheet component
+
+# Formulas in ASP.NET Core Spreadsheet control
Formulas are used to perform calculations on data in a worksheet. You can refer the cell reference from same sheet or from different sheets.
@@ -15,10 +15,10 @@ Formulas are used to perform calculations on data in a worksheet. You can refer
You can set a formula for a cell in the following ways,
-* Using the [formula](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cell#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`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#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-Specific Formula Separators
@@ -26,109 +26,74 @@ In earlier versions, even though culture-based Excel files could be imported int
> 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://ej2.syncfusion.com/react/documentation/api/spreadsheet#listseparator) property value as the culture-based list separator from your end. Additionally, note that when importing an Excel file, the [listSeparator](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#listseparator) property will be updated based on the culture of the launched import/export service.
+When loading spreadsheet data with culture-based formula argument separators using cell data binding, local/remote data, or JSON, ensure to set the [listSeparator](https://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 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 js tabtitle="App.jsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs3/app/App.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs3/app/App.tsx %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/asp-net-core/formula-cs3/tagHelper %}
{% endhighlight %}
-{% highlight js tabtitle="locale.json" %}
-{% include code-snippet/spreadsheet/react/formula-cs3/app/locale.json %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs3/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs3/app/datasource.tsx %}
+{% highlight c# tabtitle="FormulaController.cs" %}
+{% include code-snippet/spreadsheet/asp-net-core/formula-cs3/formulaController.cs %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "/document-processing/code-snippet/spreadsheet/react/formula-cs3" %}
-
## Create User Defined Functions / Custom Functions
-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/react/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 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/react/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.
+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 how to use an unsupported formula in the Spreadsheet.
{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs1/app/app.jsx %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/asp-net-core/formula/tagHelper %}
{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs1/app/app.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs1/app/datasource.tsx %}
+{% highlight c# tabtitle="FormulaController.cs" %}
+{% include code-snippet/spreadsheet/asp-net-core/formula/formulaController.cs %}
{% endhighlight %}
{% endtabs %}
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/formula-cs1" %}
-
-To directly compute a formula or expression, use the [computeExpression](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#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.
{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs2/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs2/app/app.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs2/app/datasource.jsx %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/asp-net-core/formula-cs2/tagHelper %}
{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/formula-cs2/app/datasource.tsx %}
+{% highlight c# tabtitle="FormulaController.cs" %}
+{% include code-snippet/spreadsheet/asp-net-core/formula-cs2/formulaController.cs %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "/document-processing/code-snippet/spreadsheet/react/formula-cs2" %}
-
## 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://ej2.syncfusion.com/react/documentation/api/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 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:
-* Use the [`definedNames`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#definednames) collection to add multiple named ranges during the initial load.
-* Use the [`addDefinedName`](https://ej2.syncfusion.com/react/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/react/documentation/api/spreadsheet#removedefinedname) method.
+* 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.
{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/defined-name-cs1/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/defined-name-cs1/app/app.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/defined-name-cs1/app/datasource.jsx %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/asp-net-core/defined-names/tagHelper %}
{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/defined-name-cs1/app/datasource.tsx %}
+{% highlight c# tabtitle="DefinedNameController.cs" %}
+{% include code-snippet/spreadsheet/asp-net-core/defined-names/definedNameController.cs %}
{% endhighlight %}
{% endtabs %}
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/defined-name-cs1" %}
-
## Calculation Mode
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:
@@ -136,7 +101,7 @@ The Spreadsheet provides a **Calculation Mode** feature similar to the calculati
* **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 calculation mode using the [`calculationMode`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet#calculationmode) property of the Spreadsheet. These modes give flexibility to balance real-time updates with 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
@@ -144,27 +109,19 @@ In **Automatic Mode**, formulas are recalculated immediately whenever a dependen
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.
-You can enable this mode by setting the [`calculationMode`](https://ej2.syncfusion.com/react/documentation/api/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.
{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/calculation-cs1/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/calculation-cs1/app/app.tsx %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/asp-net-core/calculation-cs1/tagHelper %}
{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/calculation-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/calculation-cs1/app/datasource.tsx %}
+{% highlight c# tabtitle="CalculationModeController.cs" %}
+{% include code-snippet/spreadsheet/asp-net-core/calculation-cs1/calculationModeController.cs %}
{% endhighlight %}
{% endtabs %}
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/calculation-cs1" %}
-
### Manual Mode
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.
@@ -178,22 +135,14 @@ The Spreadsheet provides two manual recalculation options:
The following code example demonstrates how to set the Manual calculation mode in a Spreadsheet.
{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/spreadsheet/react/calculation-cs2/app/app.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/spreadsheet/react/calculation-cs2/app/app.tsx %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/asp-net-core/calculation-cs2/tagHelper %}
{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/spreadsheet/react/calculation-cs2/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/spreadsheet/react/calculation-cs2/app/datasource.tsx %}
+{% highlight c# tabtitle="CalculationModeController.cs" %}
+{% include code-snippet/spreadsheet/asp-net-core/calculation-cs2/calculationModeController.cs %}
{% endhighlight %}
{% endtabs %}
- {% previewsample "/document-processing/code-snippet/spreadsheet/react/calculation-cs2" %}
-
## Supported Formulas
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.
@@ -345,11 +294,11 @@ If you enter an invalid formula in a cell, an error dialog with an error message
## Note
-You can refer to our [React Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [React Spreadsheet example](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) to knows how to present and manipulate data.
+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)
* [Formatting](./formatting)
* [Open](./open-save#open)
-* [Save](./open-save#save)
\ No newline at end of file
+* [Save](./open-save#save)
- All features of the control meet the requirement.
- Some features of the control do not meet the requirement.
- The control does not meet the requirement.