diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md b/Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md index 5b64f4d705..9f7fa3a1bb 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/cell-range.md @@ -1,33 +1,48 @@ --- layout: post title: Managing Cell Ranges in the Blazor Spreadsheet Component | Syncfusion -description: Check out and learn to manage cell range features such as formatting, autofill, and clear options in the Syncfusion Blazor Spreadsheet component and more. +description: Learn how to manage cell range features such as formatting, autofill, and clear options in the Syncfusion Blazor Spreadsheet component and more. platform: document-processing control: Spreadsheet documentation: ug --- -# Managing Cell Ranges in Blazor Spreadsheet component +# Managing Cell Ranges in the Blazor Spreadsheet Component + A cell range is a set of selected cells in a Spreadsheet, typically specified using A1 notation (for example, `A1:B10`). A range may be a single cell or a contiguous block of cells that can be manipulated or processed collectively. ## Cell formatting -To know more about cell formatting, refer [here](./formatting#text-and-cell-formatting). +The Spreadsheet component supports a wide range of cell-formatting operations—including text styling (font family, size, color, and weight), cell fill, borders, alignment, number formats, and conditional formatting—that can be applied to a single cell, a selected range, or the entire worksheet. For more details, refer to the [Text and Cell Formatting](./formatting#text-and-cell-formatting) documentation. ## Autofill -Autofill is used to fill cells with data that follows a pattern or is based on data in other cells. It helps avoid entering repetitive data manually. The [AllowAutofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowAutofill) property can be used to enable or disable this feature. +The Autofill feature automatically populates adjacent cells with data that follows a pattern or extends values from the source cells. It helps avoid entering repetitive data manually. The [AllowAutofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowAutofill) property can be used to enable or disable this feature. * The default value of the [AllowAutofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowAutofill) property is **true**. +To enable or disable autofill declaratively, set the `AllowAutofill` property on the `SfSpreadsheet` component. For example: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + Autofill can be performed in one of the following ways: -* Drag and drop the cell using the fill handle element. +* Select the source cell or range, then drag and drop the selection using the fill handle element to extend the values to adjacent cells. * Use the [AutofillAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AutofillAsync_System_String_System_String_) method programmatically. ### Autofill options -Autofill supports multiple behaviors that control how adjacent cells are populated when using the fill handle. The available options are: +Autofill supports multiple behaviors that control how adjacent cells are populated when using the fill handle. After dragging the fill handle, the **AutoFillOptions** menu appears as a popup near the destination range. You can also right-click the destination range and select **AutoFillOptions** to access the same options. The available options are: - Copy Cells - Fill Series @@ -48,13 +63,13 @@ Applies only the source styling—number format, font, fill color, borders, and #### Fill Without Formatting -Continues the detected series into the destination range but retains the destination’s existing formatting. After dragging the fill handle, choose **Fill Without Formatting** from the **AutoFillOptions** menu to apply only the new values while keeping the target style intact. +Continues the detected series into the destination range but retains the destination's existing formatting. After dragging the fill handle, choose **Fill Without Formatting** from the **AutoFillOptions** menu to apply only the new values while keeping the target style intact. The following illustration demonstrates the use of autofill in the Spreadsheet component. ![Autofill Illustration](images/autofill.gif) -The [AutofillAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AutofillAsync_System_String_System_String_) method accepts string parameters in A1 notation for `fillRange` and `dataRange`. The available parameters are: +The [AutofillAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AutofillAsync_System_String_System_String_) method accepts string parameters in A1 notation for `fillRange` and `dataRange`. The following table lists the available parameters: | Parameter | Type | Description | | -- | -- | -- | @@ -67,16 +82,17 @@ The [AutofillAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Sp {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet spreadsheetObj; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -87,14 +103,14 @@ The [AutofillAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Sp public async Task AutofillRangeHandler() { // Basic usage with only the fill range parameter. - await spreadsheetObj.AutofillAsync("B7:B8"); + await SpreadsheetInstance.AutofillAsync("B7:B8"); } } {% endhighlight %} {% endtabs %} -## Events +## Autofill Events The Blazor Spreadsheet provides events that are triggered during autofill operations, such as [AutofillActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.AutofillActionBeginEventArgs.html) and [AutofillActionEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.AutofillActionEndEventArgs.html). These events enable the execution of custom actions before and after an autofill operation, allowing for validation, customization, and response handling. @@ -110,16 +126,17 @@ This event is useful for scenarios where autofill behavior needs to be controlle The event uses the [AutofillActionBeginEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.AutofillActionBeginEventArgs.html) class, which includes the following properties: -| Event Arguments | Description | -|----------------|-------------| -| FillRange (read-only) | The address of the target range for the autofill operation (e.g., "Sheet1!A2:A5"). | -| DataRange (read-only) | The source data range for the autofill operation (e.g., "Sheet1!A1:A1"). | -| Direction (read-only) | The direction of the autofill operation ("Down", "Right", "Up", or "Left"). | -| Cancel | A boolean value to cancel the autofill operation. | +| Event Arguments | Type | Description | +|---|---|---| +| FillRange (read-only) | string | The address of the target range for the autofill operation (e.g., "Sheet1!A2:A5"). | +| DataRange (read-only) | string | The source data range for the autofill operation (e.g., "Sheet1!A1:A1"). | +| Direction (read-only) | string | The direction of the autofill operation ("Down", "Right", "Up", or "Left"). | +| Cancel | bool | A boolean value to cancel the autofill operation. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -160,21 +177,22 @@ The [AutofillActionEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. **Purpose** -This event is useful for scenarios where `post-autofill` actions are needed, such as logging the autofill operation, updating related data, or triggering additional UI updates. +This event is useful for scenarios where actions after the autofill are needed, such as logging the autofill operation, updating related data, or triggering additional UI updates. **Event Arguments** The event uses the [AutofillActionEndEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.AutofillActionEndEventArgs.html) class, which includes the following properties: -| Event Arguments | Description | -|----------------|-------------| -| FillRange (read-only) | The address of the target range where the autofill was applied (e.g., "Sheet1!A2:A5"). | -| DataRange (read-only) | The source data range used for the autofill operation (e.g., "Sheet1!A1:A1"). | -| Direction (read-only) | The direction of the autofill operation ("Down", "Right", "Up", or "Left"). | +| Event Arguments | Type | Description | +|---|---|---| +| FillRange (read-only) | string | The address of the target range where the autofill was applied (e.g., "Sheet1!A2:A5"). | +| DataRange (read-only) | string | The source data range used for the autofill operation (e.g., "Sheet1!A1:A1"). | +| Direction (read-only) | string | The direction of the autofill operation ("Down", "Right", "Up", or "Left"). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -202,13 +220,17 @@ The event uses the [AutofillActionEndEventArgs](https://help.syncfusion.com/cr/b ## Clear -The clear functionality helps remove cell contents (formulas and data), formats (including number formats), and hyperlinks from a selected range. +The Clear functionality removes cell contents (formulas and data), formats (including number formats), and hyperlinks from a selected range. ### Applying the clear functionality -The clear support can be applied using the following way: +Clearing can be performed through the user interface (UI) using any of the following methods: -You can apply the clear functionality by selecting the **Clear** icon in the **Ribbon** under the **Home** tab. +**Using the Ribbon** + +- Select a cell or a range of cells to clear. +- In the **Home** tab of the **Ribbon**, click the **Clear** drop-down arrow. +- Select one of the following options from the drop-down menu: | Option | Use | | -- | -- | @@ -220,3 +242,60 @@ You can apply the clear functionality by selecting the **Clear** icon in the **R The following image displays the clear options available in the Ribbon toolbar under the **Home** tab of the Blazor Spreadsheet. ![Clear options in the Blazor Spreadsheet](images/clear-feature.png) + +**Using the Context Menu** + +- Select a cell or a range of cells to clear. +- Right-click the selected range to open the context menu. +- Select **Clear Contents** to remove only the formulas and data from the current selection. + +### Clear programmatically + +The [ClearAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearAsync_Syncfusion_Blazor_Spreadsheet_ClearOperationType_System_String_) method clears contents, formatting, hyperlinks, or all aspects of the specified range or current selection in the spreadsheet. + +The available parameters are: + +| Parameter | Type | Description | +| -- | -- | -- | +| options | Enum | Specifies the type of clear operation to perform. The available values are: `ClearContents`, `ClearFormats`, `ClearHyperlinks`, and `ClearAll`| +| range | string | The A1-style range to clear | + +**Remarks** + +* The method parses the provided `range` and resolves the target worksheet and range before performing the clear operation. +* If `range` is `null` or empty, the operation is applied to the current selection. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + public SfSpreadsheet SpreadsheetInstance { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task ClearHandler() + { + // Clears only contents from range A1:A10 on Sheet1. + await SpreadsheetInstance.ClearAsync(ClearOperationType.ClearContents, "Sample!A1:A10"); + + // Clears only formats from the current selection. + await SpreadsheetInstance.ClearAsync(ClearOperationType.ClearFormats); + } +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/clipboard.md b/Document-Processing/Excel/Spreadsheet/Blazor/clipboard.md index 94879a0157..6a21325fae 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/clipboard.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/clipboard.md @@ -1,7 +1,7 @@ --- layout: post title: Clipboard in Blazor Spreadsheet component | Syncfusion -description: Explore the clipboard functionalities in the Syncfusion Blazor Spreadsheet component, including cut, copy, and paste operations via UI and programmatic methods. +description: Explore clipboard operations in the Syncfusion Blazor Spreadsheet component, including cut, copy, and paste operations via UI and programmatic methods. control: Spreadsheet documentation: ug --- @@ -10,10 +10,27 @@ documentation: ug The Spreadsheet component supports clipboard operations such as **Cut**, **Copy**, and **Paste**. These operations can be managed using the [EnableClipboard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableClipboard) property, which is set to **true** by default. -The keyboard shortcuts are available to perform clipboard operations efficiently within the Spreadsheet component. `Ctrl+C` copies the selected cells, `Ctrl+X` cuts the selected cells, and `Ctrl+V` pastes the content from the clipboard. +Use these keyboard shortcuts for clipboard operations: `Ctrl+C` copies the selected cells, `Ctrl+X` cuts the selected cells, and `Ctrl+V` pastes the content from the clipboard. When [EnableClipboard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableClipboard) is set to **false**, the **Cut** and **Copy** options are removed from the Ribbon and Context Menu. Additionally, shortcut keys and API methods for clipboard operations are disabled. If a worksheet is protected, cut and paste operations are also disabled. For more details on worksheet protection, refer to the [Worksheet Protection](./protection#protect-sheet) topic. +## Disable the clipboard + +The example below shows how to disable the context menu across the entire Spreadsheet: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + ## Cut The **Cut** operation removes data from selected cells, rows, or columns within a worksheet and temporarily stores the content on the clipboard. When the content is pasted to a new location, the original data is deleted from its source. This behavior enables the relocation of content within the Spreadsheet. @@ -39,22 +56,23 @@ The **Cut** operation can be performed through the user interface (UI) using any ### Cut operations programmatically -The [CutCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method allows performing cut operations within any sheet. This method copies the specified cell or range and its properties (including value, format, style, etc.) to the clipboard and removes it from the sheet. It supports multiple scenarios for cutting cells or ranges. Below are the details for each scenario, including code examples and parameter information. +The [CutCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method allows performing cut operations within any sheet. This method copies the specified cell or range and its properties (including value, format, style, etc.) to the clipboard and removes it from the sheet. It supports multiple scenarios for cutting cells or ranges. Below are the details for each scenario, including code examples and parameter information. -> The **Cut** operation will not execute if an invalid or out-of-bounds cell range is specified. All cell references must be within the defined worksheet boundaries to ensure successful execution of the operation. +N> The **Cut** operation will not execute if an invalid or out-of-bounds cell range is specified. All cell references must be within the defined worksheet boundaries to ensure successful execution of the operation. **Cut active range** -When [CutCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method is invoked without any parameters, the content is automatically cut from the most recently selected range, provided an active selection exists. If no range is currently selected, the method defaults to cutting the content from the active cell. +When [CutCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) is invoked without any parameters, the content is cut from the last selected range. If no range is selected, the content is cut from the active cell. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -80,23 +98,24 @@ When [CutCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spre **Cut specific range in active sheet** -To cut content from specific cells in the active worksheet, a cell address or a range of cell addresses must be passed as a parameter to the [CutCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method. When a valid cell or range is specified, the Spreadsheet component cuts the corresponding content and places it on the clipboard, making it available for pasting in another location. +To cut content from specific cells in the active worksheet, a cell address or a range of cell addresses must be passed as a parameter to the [CutCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method. When a valid cell or range is specified, the Spreadsheet component cuts the corresponding content and places it on the clipboard, making it available for pasting in another location. -The available parameters in the [CutCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method are: +The available parameters in the [CutCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method are: | Parameter | Type | Description | |-------------|-------------------|-------------| | cellAddress | string (optional) | Specifies the target cell or range of cells to be cut. Accepts either a single cell reference (for example, **"A1"**) or a range (for example, **"A1:B5"**) from the active worksheet. If no parameter is provided, the currently selected cell or range will be used for the **Cut** operation. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -126,25 +145,26 @@ The available parameters in the [CutCellAsync](https://help.syncfusion.com/cr/bl {% endhighlight %} {% endtabs %} -**Cut specific range in different sheet** +**Cut specific range in another sheet** -To cut content from a specific worksheet, the source sheet name must be included along with the cell reference in the parameter passed to the [CutCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method. When specifying a sheet name, an exclamation mark (**!**) must be used to separate the sheet name from the cell reference. Upon execution, the Spreadsheet component cuts the designated content and places it on the clipboard, making it available for pasting in another location. +To cut content from a specific worksheet, the source sheet name must be included along with the cell reference in the parameter passed to the [CutCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method. When specifying a sheet name, an exclamation mark (**!**) must be used to separate the sheet name from the cell reference. Upon execution, the Spreadsheet component cuts the designated content and places it on the clipboard, making it available for pasting in another location. -The available parameters in the [CutCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method are: +The available parameters in the [CutCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method are: | Parameter | Type | Description | |-------------|-------------------|-------------| | cellAddress | string (optional) | Specifies the cell or range of cells to be cut. Accepts either a single cell reference (for example, **"Sheet1!A1"**) or a range (for example, **"Sheet2!A1:C5"**) from a specific worksheet. If no parameter is provided, the currently selected cell or range from the active worksheet will be used for the cut operation. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -181,7 +201,7 @@ The **Copy** operation duplicates data from a selected range of cells, rows, or ### Copy operations via UI -The copy operation can be performed through the UI using one of the following methods: +The **Copy** operation can be performed through the user interface (UI) using any of the following methods: **Using the Ribbon** @@ -200,22 +220,23 @@ The copy operation can be performed through the UI using one of the following me ### Copy operations programmatically -The [CopyCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method enables performing copy operations within any sheet. This method copies the specified cell or range of cells along with its properties (including value, format, style, etc.) to the clipboard. It supports multiple scenarios for copying cells or ranges. Below are the details for each scenario, including code examples and parameter information. +The [CopyCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method enables performing copy operations within any sheet. This method copies the specified cell or range of cells along with its properties (including value, format, style, etc.) to the clipboard. It supports multiple scenarios for copying cells or ranges. Below are the details for each scenario, including code examples and parameter information. -> The **Copy** operation will not execute if an invalid or out-of-bounds cell range is specified. All cell references must be within the defined worksheet boundaries to ensure successful execution of the operation. +N> The **Copy** operation will not execute if an invalid or out-of-bounds cell range is specified. All cell references must be within the defined worksheet boundaries to ensure successful execution of the operation. **Copy active range** -When [CopyCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method is invoked without any parameters, the content is automatically copied from the most recently selected range, provided an active selection exists. If no range is selected, the method defaults to copying the content from the active cell. +When [CopyCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method is invoked without any parameters, the content is automatically copied from the most recently selected range, provided an active selection exists. If no range is selected, the method defaults to copying the content from the active cell. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -241,23 +262,24 @@ When [CopyCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spr **Copy specific range in active sheet** -To copy content from specific cells in the active worksheet, a cell address or a range of cell addresses must be provided as a parameter to the [CopyCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method. When a valid cell or range is specified, the Spreadsheet component copies the corresponding content and places it on the clipboard, making it available for pasting in another location. +To copy content from specific cells in the active worksheet, a cell address or a range of cell addresses must be provided as a parameter to the [CopyCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method. When a valid cell or range is specified, the Spreadsheet component copies the corresponding content and places it on the clipboard, making it available for pasting in another location. -The available parameters in the [CopyCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method are: +The available parameters in the [CopyCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method are: | Parameter | Type | Description | |-------------|-------------------|-------------| | cellAddress | string (optional) | Specifies the cell or range of cells to be copied. Accepts either a single cell reference from the active worksheet (for example, **"A1"**) or a range (for example, **"A1:B5"**). If no parameter is provided, the currently selected cell or range will be used for the copy operation. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + - + @@ -287,25 +309,26 @@ The available parameters in the [CopyCellAsync](https://help.syncfusion.com/cr/b {% endhighlight %} {% endtabs %} -**Copy specific range in different sheet** +**Copy specific range in another sheet** -To copy content from a specific worksheet, the source sheet name must be included along with the cell reference in the parameter passed to the [CopyCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method. When specifying the sheet name, an exclamation mark (**!**) is used to separate it from the cell reference. The Spreadsheet component performs the copy operation and places the content on the clipboard, making it available for pasting into another location. +To copy content from a specific worksheet, the source sheet name must be included along with the cell reference in the parameter passed to the [CopyCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method. When specifying the sheet name, an exclamation mark (**!**) is used to separate it from the cell reference. The Spreadsheet component performs the copy operation and places the content on the clipboard, making it available for pasting into another location. -The available parameters in the [CopyCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method are: +The available parameters in the [CopyCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method are: | Parameter | Type | Description | |-------------|-------------------|-------------| | cellAddress | string (optional) | Specifies the cell or range of cells to be copied. Accepts either a single cell reference from a specific worksheet (for example, **"Sheet1!A1"**) or a range of cells (for example, **"Sheet2!A1:C5"**). If no value is provided, the currently selected cell or range from the active worksheet will be used for the copy operation. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -337,13 +360,13 @@ The available parameters in the [CopyCellAsync](https://help.syncfusion.com/cr/b ## Paste -The paste operation inserts data from the clipboard into a selected range of cells, rows, or columns, retaining all relevant details such as values, formats, and styles. When performing a **Cut** followed by **Paste**, the clipboard is cleared after the data is transferred. In contrast, with a **Copy** followed by **Paste**, the clipboard contents remain available for reuse. +The paste operation inserts data from the clipboard into a selected range of cells, rows, or columns, retaining all relevant details such as values, formats, and styles. After Cut + Paste, the clipboard is cleared; after Copy + Paste, the clipboard content remains. -**External clipboard** support allows pasting content from external sources like Google Sheets, Microsoft Excel, text files, and web pages. +N> **External clipboard** support allows pasting content from external sources such as Google Sheets, Microsoft Excel, text files, and web pages. When pasting from external sources, only the values are pasted; cell formatting and styles are not preserved. ### Paste operations via UI -The paste operation can be performed through the UI using one of the following methods: +The **Paste** operation can be performed through the user interface (UI) using any of the following methods: **Using the Ribbon** @@ -365,28 +388,23 @@ The paste operation can be performed through the UI using one of the following m ### Paste operations programmatically -The [PasteCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method pastes clipboard content into a specified cell or range, preserving all properties (value, format, style, etc.). If the source range is larger than the target range, the paste operation extends beyond the target's boundaries to accommodate the full source content, overwriting any data in the expanded area. - -**Example** -- Source Range: **"Sheet1!A1:C3"** (3 rows × 3 columns) -- Target Range: **"Sheet2!B2"** (single cell) - -Pasting this content will overwrite the range **"Sheet2!B2:D4"** to match the 3×3 source content. +The [PasteCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method pastes clipboard content into a specified cell or range while preserving all properties, including value, format, and style. If the source range is larger than the target range, the paste operation extends beyond the target's boundaries to accommodate the full source content, overwriting any data in the expanded area. For example, when a 3×3 source pasted into a single cell at `Sheet2!B2`, it is automatically written into the smallest range that can contain it, overwriting the range `Sheet2!B2:D4`. -> The **Paste** operation will not be executed if invalid or out-of-boundary cell ranges are specified. All cell addresses must fall within the valid boundaries of the worksheet to ensure successful execution of the paste action. +N> The **Paste** operation will not be executed if invalid or out-of-boundary cell ranges are specified. All cell addresses must fall within the valid boundaries of the worksheet to ensure successful execution of the paste action. **Paste to active range** -When [PasteCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) is invoked without parameters, the content is pasted into the last selected range. If no range is selected, the content is pasted into the active cell. +When [PasteCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) is invoked without parameters, the content is pasted into the last selected range. If no range is selected, the content is pasted into the active cell. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -412,24 +430,25 @@ When [PasteCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Sp **Paste to specific range in active sheet** -To paste content into a specific range in the active sheet, provide the target cell address or range as a parameter to the [PasteCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method. A valid cell selection must exist prior to executing the paste operation. Either a single cell or a range of cells can be specified as the destination. +To paste content into a specific range in the active sheet, provide the target cell address or range as a parameter to the [PasteCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method. A valid cell selection must exist prior to executing the paste operation. Either a single cell or a range of cells can be specified as the destination. -The available parameters in the [PasteCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method are: +The available parameters in the [PasteCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method are: | Parameter | Type | Description | |-------------|-------------------|-------------| | cellAddress | string (optional) | Specifies the target cell or range of cells for pasting clipboard content. Accepts either a single cell reference (for example, **"A1"**) or a range of cells (for example, **"A1:B5"**) from the active worksheet. A valid cell selection must exist prior to executing the paste operation. If no parameter is provided, the currently selected cell or range will be used as the paste destination. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -469,24 +488,25 @@ The available parameters in the [PasteCellAsync](https://help.syncfusion.com/cr/ {% endhighlight %} {% endtabs %} -**Paste to specific range in different sheet** +**Paste to specific range in another sheet** -To paste content into a specific sheet, include the target sheet name along with the cell reference as a parameter to the [PasteCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method. When specifying a sheet name, use an exclamation mark (**!**) to separate it from the cell reference. +To paste content into a specific sheet, include the target sheet name along with the cell reference as a parameter to the [PasteCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method. When specifying a sheet name, use an exclamation mark (**!**) to separate it from the cell reference. -The available parameters in the [PasteCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method are: +The available parameters in the [PasteCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method are: | Parameter | Type | Description | |-------------|-------------------|-------------| | cellAddress | string (optional) | Specifies the target cell or range of cells for pasting clipboard content. Accepts either a single cell reference from a specific worksheet (for example, **"Sheet1!A1"**) or a range of cells (for example, **"Sheet2!A1:C5"**). A valid cell selection must exist before executing the paste operation. If no parameter is provided, the currently selected cell or range will be used as the paste destination. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -527,11 +547,11 @@ This event is useful for monitoring clipboard activities, preventing sensitive d **Event Arguments** -[CutCopyActionBeginEventArgs]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CutCopyActionBeginEventArgs.html)) includes the following properties: +[CutCopyActionBeginEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CutCopyActionBeginEventArgs.html) includes the following properties: | Event Arguments | Description | |----------------|-------------| -| ClipboardAction | Specifies the type of clipboard operation in progress. Returns a value from the **ClipboardAction** enumeration, such as **ClipboardAction.Cut** or **ClipboardAction.Copy**. | +| ClipboardAction | Specifies the type of clipboard operation in progress. Returns a value from the [ClipboardAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ClipboardAction.html) enumeration, such as **ClipboardAction.Cut** or **ClipboardAction.Copy**. | | CopiedRange | Represents the full address of the cell range involved in the clipboard operation. Includes the worksheet name and range in A1 notation (e.g., **"Sheet1!A1:B5"**). | | Cancel | Indicates whether the clipboard operation should be cancelled. Set to **true** to prevent the cut or copy action from proceeding. | @@ -587,7 +607,7 @@ This event is applicable in scenarios that require control over paste operations @using Syncfusion.Blazor.Spreadsheet - + diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/contextmenu.md b/Document-Processing/Excel/Spreadsheet/Blazor/contextmenu.md index b5b3be2567..4d877bf063 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/contextmenu.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/contextmenu.md @@ -1,19 +1,33 @@ --- layout: post title: Context Menu in Blazor Spreadsheet component | Syncfusion -description: Explore the context menu functionality in the Syncfusion Blazor Spreadsheet component, including options for cells, rows, columns, and sheet tabs. +description: Explore the context menu for cells, rows, columns, and sheet tabs in the Syncfusion Blazor Spreadsheet component. control: Spreadsheet documentation: ug --- # Context Menu in Blazor Spreadsheet component -The context menu enhances interaction with the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component by displaying a popup with relevant operations when a right-click is performed on elements such as **cells**, **column headers**, **row headers**, or **sheet tabs**. Its visibility can be controlled via the [`EnableContextMenu`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableContextMenu) property, which is set to **true** by default, enabling the context menu automatically. +The context menu enhances interaction with the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component by displaying a popup with relevant operations when a right-click is performed on elements such as **cells**, **column headers**, **row headers**, or **sheet tabs**. Set [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableContextMenu) to control visibility. The default value is **true**. -N> When the [`EnableContextMenu`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableContextMenu) property is set to **false**, the context menu does not appear upon right-clicking any element in the component. +## Disable the context menu +The example below shows how to disable the context menu across the entire Spreadsheet: -## Context Menu Options Based on Spreadsheet Element Type +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + +## Context Menu Options by Element The context menu options are dynamically adjusted based on the specific element in the Spreadsheet that is right-clicked. Each element displays context-specific functionality relevant to its type. @@ -58,7 +72,7 @@ When a sheet is protected, **Insert Rows Above** and **Insert Rows Below** optio ### Column header context menu options -When you right-click a single column header or a range of selected column headers, the `context menu` shows options for column-level operations. +When right-clicking a single column header or a range of selected column headers, the context menu displays options for column-level operations. | Options | Action | | -- | -- | @@ -76,39 +90,42 @@ When a sheet is protected, **Insert column to the left** and **Insert column to ### Sheet tab context menu options -When right-clicking on a sheet tab located at the bottom of the Spreadsheet, the `context menu` displays options specific to sheet-level operations. +When right-clicking on a sheet tab located at the bottom of the Spreadsheet, the context menu displays options specific to sheet-level operations. | Options | Action | | -- | -- | -| Insert | Inserts a new sheet immediately after the currently active sheet. | +| Insert | Inserts a new sheet immediately after the currently active sheet. | | Delete | Deletes the selected sheet from the Spreadsheet. This option is disabled when only one sheet exists. | | Duplicate | Creates an exact copy of the selected sheet, including content, formatting, and settings. The duplicate is positioned immediately after the current sheet. | | Rename | Opens a dialog box to modify the name of the selected sheet. | -| Protect Sheet / Unprotect Sheet | The **Protect Sheet** / **Unprotect Sheet** option dynamically switches based on the current protection status of the sheet. When the sheet is unprotected, the context menu displays **Protect Sheet** to restrict editing. Once protection is applied, the option changes to **Unprotect Sheet**, allowing removal of those restrictions. | -| Move Right | Moves the selected sheet one position to the right in the tab sequence. Disabled when only one sheet is visible or when the last sheet is selected. | -| Move Left | Moves the selected sheet one position to the left in the tab sequence. Disabled when only one sheet is visible or when the first sheet is selected. | +| Protect Sheet (or Unprotect Sheet) | The label switches between **Protect Sheet** and **Unprotect Sheet** based on the current protection status of the sheet. When the sheet is unprotected, the context menu displays **Protect Sheet** to restrict editing. Once protection is applied, the option changes to **Unprotect Sheet**, allowing removal of those restrictions. | +| Move Right | Moves the selected sheet one position to the right in the tab sequence. Disabled when the last sheet is selected. | +| Move Left | Moves the selected sheet one position to the left in the tab sequence. Disabled when the first sheet is selected. | | Hide | Hides the selected sheet within the Spreadsheet. This option is disabled when only one sheet is visible. | ![Context menu options for sheet tab](./images/contextmenu-sheettab.png) -Sheet tab context menu behavior is controlled by workbook-level protection. In a protected workbook, only the **Protect Sheet** or **Unprotect Sheet** option remains active. All other options like **Insert**, **Delete**, **Rename**, **Move Right**, **Move Left**, **Hide**, and **Duplicate** are disabled to preserve workbook structure. +When a sheet is protected, the **Protect Sheet** (or **Unprotect Sheet**) option in the sheet tab context menu remains available so the protection status can be toggled directly from the tab. When a workbook is protected, only the **Protect Sheet** (or **Unprotect Sheet**) option remains active, and all other options—**Insert**, **Delete**, **Rename**, **Move Right**, **Move Left**, **Hide**, and **Duplicate**—are disabled to preserve the workbook structure. -## Properties that influence context menu options +## Context menu configuration properties These properties control specific context menu functionality: -| Property | Default | Effect when set to "false" | +| Property | Default | Effect when set to **false** | | -- | -- | -- | -| `EnableClipboard` | true | Removes the **Cut**, **Copy**, and **Paste** options from all context menus throughout the Spreadsheet | +| `EnableContextMenu` | true | Disables the context menu globally. No context menu appears for any element. | +| `EnableClipboard` | true | Removes the **Cut**, **Copy**, and **Paste** options from all context menus throughout the Spreadsheet. | | `AllowSorting` | true | Removes the **Sort** option from the context menu, preventing sorting operations. | | `AllowFiltering` | true | Removes the **Filter** option from the context menu, disabling filtering capabilities. | | `AllowHyperlink` | true | Removes all hyperlink-related options from the context menu, preventing hyperlink operations. | +| `AllowInsert` | true | Removes the all Insert-related options from the row and column header context menus. | ![Context menu options when disabling the properties](./images/contextmenu-propertyaffect.png) {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/editing.md b/Document-Processing/Excel/Spreadsheet/Blazor/editing.md index 683a0dd42e..7319e57dc0 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/editing.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/editing.md @@ -1,15 +1,28 @@ --- layout: post title: Cell Editing in Blazor Spreadsheet component | Syncfusion -description: Checkout and learn here about the cell editing features in the Syncfusion Blazor Spreadsheet component and more. +description: Check out and learn about the cell editing features in the Syncfusion Blazor Spreadsheet component and more. platform: document-processing control: Spreadsheet documentation: ug --- -# Cell editing in the Blazor Spreadsheet component +# Cell Editing in Blazor Spreadsheet component -Cell editing in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component enables modification of cell content either directly within the spreadsheet or through the formula bar. This feature is enabled by default but can be disabled by setting the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowEditing) property. To disable or enable cell editing, set the value of this property accordingly. +Cell editing in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component enables modification of cell content either directly within the spreadsheet or through the formula bar. This feature is enabled by default but can be disabled by setting the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowEditing) property. To disable or enable cell editing, set the value of this property accordingly. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} ## Edit cell @@ -31,7 +44,7 @@ When a cell is in an editable state, the updated content can be saved using one ### Update cell programmatically -Cell updates can be performed programmatically using the [UpdateCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_UpdateCellAsync_System_String_System_Object_) method, which supports values such as strings, numbers, booleans, and formulas. This method modifies the content of a designated cell and is suitable for tasks requiring precise changes, such as updating statuses or values in specific locations. The cell address must include the sheet name—for example, **Sheet1!A1**—to enable updates across different sheets within the same workbook. +Cell updates can be performed programmatically using the [UpdateCellAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_UpdateCellAsync_System_String_System_Object_) method, which supports values such as strings, numbers, booleans, and formulas. This method modifies the content of a designated cell and is suitable for tasks requiring precise changes, such as updating statuses or values in specific locations. The cell address must include the sheet name—for example, **Sheet1!A1**—to enable updates across different sheets within the same workbook. If a cell address is incorrectly formatted, refers to a non-existent sheet, or lies outside the valid range, the update is skipped without triggering an error. When a range is specified, such as **A1:B5**, the method automatically assigns the provided value to each cell within that range, allowing efficient batch updates. @@ -41,20 +54,21 @@ If a cell address is incorrectly formatted, refers to a non-existent sheet, or l | cellValue | object | Defines the new value to assign to the cell. Supported types include strings, numbers, booleans, and formulas (e.g., `=SUM(A1:B1)`). When a range is specified (e.g., **A1:B5**), the value is automatically applied to all cells within the range. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @inject HttpClient Http - + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -65,13 +79,13 @@ If a cell address is incorrectly formatted, refers to a non-existent sheet, or l private async Task UpdateCell() { // Updates cell A3 with a product name. - await SpreadsheetRef.UpdateCellAsync("Sheet1!A3", "Tablet"); + await SpreadsheetInstance.UpdateCellAsync("Sheet1!A3", "Tablet"); // Updates cell B3 with a numeric value. - await SpreadsheetRef.UpdateCellAsync("Sheet1!B3", 799); + await SpreadsheetInstance.UpdateCellAsync("Sheet1!B3", 799); // Updates cell C3 with a formula. - await SpreadsheetRef.UpdateCellAsync("Sheet1!C3", "=SUM(A3:B3)"); + await SpreadsheetInstance.UpdateCellAsync("Sheet1!C3", "=SUM(A3:B3)"); } } @@ -86,7 +100,7 @@ To exit edit mode without saving changes, press the **ESCAPE** key. This action ## Events -The Blazor Spreadsheet component provides events that are triggered during editing operations, such as [CellEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellEditingEventArgs.html) and [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellSavedEventArgs.html). These events allow you to perform custom actions before a cell enters edit mode and after its value has been successfully saved, enabling scenarios such as data validation or logging changes. +The Blazor Spreadsheet component provides events that are triggered during editing operations, such as [CellEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellEditingEventArgs.html) and [CellSaved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellSavedEventArgs.html). These events let you perform custom actions before and after a cell value is saved, enabling scenarios such as data validation or logging changes. ### CellEditing @@ -100,21 +114,22 @@ This event is useful for scenarios where cell editing needs to be controlled dyn The event uses the [CellEditingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellEditingEventArgs.html) class, which includes the following properties: -| Event Arguments | Description | -|---|---| -| RowIndex (read-only)| The zero-based row index of the cell being edited. | -| ColIndex (read-only)| The zero-based column index of the cell being edited. | -| Address (read-only)| The address of the cell being edited (e.g., "Sheet1!A1"). | -| Value (read-only)| The current value of the cell before editing. | -| Cancel | Set to `true` to cancel the editing operation. | +| Event Arguments | Type | Description | +|---|---|---| +| RowIndex (read-only) | int | The zero-based row index of the cell being edited. | +| ColIndex (read-only) | int | The zero-based column index of the cell being edited. | +| Address (read-only) | string | The address of the cell being edited (e.g., "Sheet1!A1"). | +| Value (read-only) | object | The current value of the cell before editing. | +| Cancel | bool | Set to `true` to cancel the editing operation. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { @@ -150,20 +165,21 @@ This event is useful for scenarios where post-editing actions are needed, such a The event uses the [CellSavedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CellSavedEventArgs.html) class, which includes the following properties: -| Event Arguments | Description | -|---|---| -| Address (read-only)| The address of the cell whose value was saved (e.g., "Sheet1!A1"). | -| Value (read-only)| The new value of the cell after saving. | -| OldValue (read-only)| The original value of the cell before saving. | -| Action (read-only)| The action that triggered the save (e.g., "Edit", "Cut", "Paste", "Autofill"). | +| Event Arguments | Type | Description | +|---|---|---| +| Address (read-only) | string | The address of the cell whose value was saved (e.g., "Sheet1!A1"). | +| Value (read-only) | object | The new value of the cell after saving. | +| OldValue (read-only) | object | The original value of the cell before saving. | +| Action (read-only) | String | The action that triggered the save (e.g., `Edit`, `Cut`, `Paste`, `Autofill`). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { @@ -183,10 +199,10 @@ The event uses the [CellSavedEventArgs](https://help.syncfusion.com/cr/blazor/Sy {% endhighlight %} {% endtabs %} -## Cell editing in protected sheet +## Cell editing in a protected sheet -In a protected sheet, only `unlocked ranges` can be edited based on the sheet's protection settings. Try to modify a locked range, an error message appears, as shown below: +In a protected sheet, only `unlocked ranges` can be edited based on the sheet's protection settings. If you try to modify a locked range, an error message appears, as shown below: ![Error dialog indicating that a cell is protected and cannot be modified in the Blazor Spreadsheet.](./images/protection-error-dialog.png) -N> For more information on worksheet protection, refer to the [Worksheet Protection](./protection) documentation. +N> For more information on worksheet protection and on how to configure locked and unlocked ranges, refer to the [Worksheet Protection](./protection) documentation. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/filtering.md b/Document-Processing/Excel/Spreadsheet/Blazor/filtering.md index d4fcc79757..2d21535a32 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/filtering.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/filtering.md @@ -1,7 +1,7 @@ --- layout: post title: Filtering in Blazor Spreadsheet Component | Syncfusion -description: Checkout and learn all about the comprehensive filter functionality in Syncfusion Blazor Spreadsheet component and much more. +description: Check out and learn all about the comprehensive filter functionality in Syncfusion Blazor Spreadsheet component and much more. platform: document-processing control: Spreadsheet documentation: ug @@ -9,9 +9,29 @@ documentation: ug # Filtering in Blazor Spreadsheet Component -Filtering in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component enables focused data analysis by displaying only the rows that meet specific criteria. This functionality helps create interactive views by hiding rows that do not match the filtering conditions. Filtering behavior is controlled using the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowFiltering) property, which is set to **true** by default. +Filtering in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component enables focused data analysis by displaying only the rows that meet specific criteria. It creates interactive views by hiding rows that do not match the filtering conditions. Filtering behavior is controlled using the [`AllowFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowFiltering) property, which is set to **true** by default. -N> When [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowFiltering) is set to **false**, filtering options are disabled in the ribbon and removed from the context menu. API methods related to filtering will also be inactive. Additionally, if the worksheet is protected, the filtering feature is disabled. For more information, refer to the [Worksheet Protection](./protection#protect-sheet) documentation. +N> When [`AllowFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowFiltering) is set to **false**, filtering options are disabled in the ribbon and removed from the context menu. API methods related to filtering will also be inactive. Additionally, if the worksheet is protected, the filtering feature is disabled. For more information, refer to the [Worksheet Protection](./protection#protect-sheet) documentation. + + +## Disabling filtering + +The example below shows how to disable filtering across the entire Spreadsheet: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + +## Enable filtering via Ribbon Filtering can be accessed through the user interface using the following method: @@ -145,7 +165,7 @@ The operators available in the custom filter dialog change dynamically based on ### Add current selection to filter -The **Add current selection to filter** option appears below the search box in the filter dialog. It allows multiple filter selections to be combined without clearing previous ones. By default, applying a new filter to a column replaces any existing selections. Enabling this option ensures that new selections are added to the existing filter criteria instead of replacing them. +The **Add current selection to filter** option appears below the search box in the filter dialog. It allows multiple filter selections to be combined without clearing previous ones. By default, applying a new filter to a column replaces any existing selections; enabling this option adds new selections to the existing filter criteria instead of replacing them. **How it works** - Open the filter dialog for a column. @@ -162,9 +182,9 @@ The new values are added to the existing filter set, making this feature especia The filter dialog intelligently handles columns containing mixed data types: -* **Automatic type detection** - - The system analyzes the column's content to identify the most common data type and adjusts the filter behavior accordingly. - - **Example:** If most values in a column are numbers but a few are text, the filter treats the column as numeric and shows number-based filter options. +* **Automatic type detection** + - The system analyzes the column's content to identify the dominant data type (the type with the most non-empty values) and adjusts the filter behavior accordingly. + - **Example:** If most values in a column are numbers but a few are text, the filter treats the column as numeric and shows number-based filter options. * **Type-based grouping** - When filtering a column that contains mixed data types, the filter checkbox list organizes values into groups based on their type. This grouping helps improve readability and ensures consistent filtering behavior. @@ -177,9 +197,9 @@ The filter dialog intelligently handles columns containing mixed data types: - Empty cells are shown as **(Blank)** in the filter list, making them easy to identify and select. - **Example:** If a column has some missing values, these cells appear as **(Blank)** in the filter, allowing users to include or exclude them. -* **Search across types** - - The search box works across all data types in the column. - - **Example:** Typing 100 in the search box will return both the number 100 and the text "100" if both exist in the column. +* **Search across types** + - The search box works across all data types in the column. + - **Example:** Typing **100** in the search box returns both the numeric value `100` and the text value **100** if both exist in the column. * **Format preservation** - The filter dialog keeps the original formatting of values (e.g., **Currency**, **Date** format) when displaying them. @@ -193,7 +213,7 @@ The filter by cell value enables filtering worksheet data based on a selected ce ### Filter by cell value via UI -Filtering based on a specific cell value can be performed directly through the user interface. This method allows quick filtering without manually configuring conditions. +Filter by cell value through the UI to quickly apply a filter without manually configuring conditions. - Select the cell containing the desired value. - Right-click to open the context menu. @@ -206,7 +226,7 @@ This action filters the column to display only the rows that match the selected ### Filter by cell value programmatically -The [FilterByCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_FilterByCellValueAsync_System_String_System_Object_) method allows filtering based on a specified value and cell address without using the UI. The available parameters in the [FilterByCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_FilterByCellValueAsync_System_String_System_Object_) method are: +The [FilterByCellValueAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_FilterByCellValueAsync_System_String_System_Object_) method allows filtering based on a specified value and cell address without using the UI. The available parameters in the [FilterByCellValueAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_FilterByCellValueAsync_System_String_System_Object_) method are: | Parameter | Type | Description | |---------------|--------|-------------| @@ -216,6 +236,7 @@ The [FilterByCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons @@ -237,8 +258,8 @@ The [FilterByCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl public async Task ApplyFilter() { - // This method applies a filter to Column A showing only rows containing "New York". - await SpreadsheetInstance.FilterByCellValueAsync("A1", "New York"); + // Apply a filter to Column A showing only rows containing "New York". + await SpreadsheetInstance.FilterByCellValueAsync("A1", "New York"); } } @@ -246,8 +267,8 @@ The [FilterByCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl {% endtabs %} ## Clear filter - -The clear filter restores visibility to all rows by removing any filters currently applied to columns. It offers flexibility by allowing filters to be cleared from a specific column or from all columns at once. + +The clear filter restores visibility to all rows by removing any filters currently applied to columns. Filters can be cleared from a specific column or from all columns at once. ### Clear filter via UI @@ -280,7 +301,7 @@ Filters can be cleared through the user interface using the following methods: ### Clear filter programmatically -The [ClearFilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearFilterAsync_System_Int32_) method removes filtering from a specific column in the active sheet. The available parameters in the [ClearFilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearFilterAsync_System_Int32_) method are: +The [ClearFilterAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearFilterAsync_System_Int32_) method removes filtering from a specific column in the active sheet. The available parameters in the [ClearFilterAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearFilterAsync_System_Int32_) method are: | Parameter | Type | Description | |---------------|------|-------------| @@ -289,12 +310,13 @@ The [ClearFilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.S {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons - + @@ -318,16 +340,19 @@ The [ClearFilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.S {% endhighlight %} {% endtabs %} -The [ClearAllFiltersAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearAllFiltersAsync) method removes all active filters from the currently active sheet, restoring visibility to the entire dataset. This is especially useful when multiple columns are filtered and a complete reset is needed. +### Clear all filters programmatically + +The [ClearAllFiltersAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearAllFiltersAsync) method removes all active filters from the currently active sheet, restoring visibility to the entire dataset. This is especially useful when multiple columns are filtered and a complete reset is needed. {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons - + @@ -355,7 +380,7 @@ The [ClearAllFiltersAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz Reapplying filters updates the filtered results after changes are made to the data. It preserves the existing filter conditions and refreshes the view to reflect the most current data accurately. -For instance, if a filter is applied to display only rows where the **Status** column is set to **Approved**, and a new row is added with **Approved** as its value, the new row will not immediately appear. Using **Reapply Filter** recalculates the filter and ensures the new row is included in the filtered results. +For instance, if a filter is applied to display only rows where the **Status** column is set to **Approved**, and a new row is added with **Approved** as its value, the new row will not immediately appear. Using **Reapply** recalculates the filter and ensures the new row is included in the filtered results. ### Reapply filters via UI @@ -371,25 +396,28 @@ Filters can be reapplied using the interface through the following methods: **Using the Context Menu** -* Right-click any cell in a filtered column. -* Choose **Filter** from the context menu. -* Select **Reapply**. -* Active filters are refreshed based on the updated data. +1. Right-click any cell in a filtered column to open the context menu. +2. Choose **Filter** from the context menu. +3. Select **Reapply** from the **Filter** submenu. +4. Active filters are refreshed based on the updated data. ![Reapply filter using Context Menu](./images/clearfilter-option-contextmenu.png) +N> The Ribbon and context menu commands reapply filters using the same underlying logic. If **Reapply** is not visible in the context menu, the active sheet may not have any applied filters, or the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowFiltering) property may be set to **false** on the component. + ### Reapply filters programmatically -The [ReapplyFiltersAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ReapplyFiltersAsync) method refreshes all active filters to match updated worksheet data. This method is especially beneficial when rows are modified, inserted, or imported. +The [ReapplyFiltersAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ReapplyFiltersAsync) method refreshes all active filters to match updated worksheet data. This method is especially beneficial when rows are modified, inserted, or imported. {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons - + @@ -416,7 +444,7 @@ The [ReapplyFiltersAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% endhighlight %} {% endtabs %} -## Filtering range validation messages +## Filtering range validation errors When applying filters in the Blazor Spreadsheet, validation messages are displayed in specific scenarios to inform about filtering constraints: diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/formatting.md b/Document-Processing/Excel/Spreadsheet/Blazor/formatting.md index 93ecdfed0c..99f5c03ab5 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/formatting.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/formatting.md @@ -1,7 +1,7 @@ --- layout: post title: Formatting in Blazor Spreadsheet Component | Syncfusion -description: Checkout and learn all about formatting options in the Syncfusion Blazor Spreadsheet component | Syncfusion. +description: Learn about formatting options in the Syncfusion Blazor Spreadsheet component, including number formatting, cell and text formatting and conditional formatting. platform: document-processing control: Spreadsheet documentation: ug @@ -52,7 +52,7 @@ Number formats can be applied through the UI using the following method: ### Applying Number Formats Programmatically -Number formats can be applied programmatically to the current selection or a specified range using the [NumberFormatAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_NumberFormatAsync_System_String_System_String_) method. This method accepts a format string and an optional cell address. +Number formats can be applied programmatically to the current selection or a specified range using the [NumberFormatAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_NumberFormatAsync_System_String_System_String_) method. This method accepts a format string and an optional cell address. | Parameter | Type | Description | | -- | -- | -- | @@ -62,6 +62,7 @@ Number formats can be applied programmatically to the current selection or a spe {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -90,7 +91,7 @@ Number formats can be applied programmatically to the current selection or a spe {% endhighlight %} {% endtabs %} -N> If the built-in formats do not meet specific requirements, custom patterns can be applied programmatically using the [NumberFormatAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_NumberFormatAsync_System_String_System_String_) method. Patterns must be compatible with Excel-style format strings. +N> If the built-in formats do not meet specific requirements, custom patterns can be applied programmatically using the [NumberFormatAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_NumberFormatAsync_System_String_System_String_) method. Patterns must be compatible with Excel-style format strings. ## Text and Cell Formatting @@ -121,19 +122,19 @@ Cell formatting options include: * **Fill Color** - Adds color to the cell background to visually organize data or highlight important information. * **Horizontal Alignment** - Controls the position of text from left to right within a cell. Options include: - * **Left** - Default for text - * **Center** - Useful for headings - * **Right** - Default for numbers + * **Left**: Default for text. + * **Center**: Useful for headings. + * **Right**: Default for numbers. * **Vertical Alignment** - Controls the position of text from top to bottom within a cell. Options include: - * **Top** – Aligns content to the top of the cell - * **Middle** – Centers content vertically - * **Bottom** – Default alignment + * **Top**: Aligns content to the top of the cell. + * **Middle**: Centers content vertically. + * **Bottom**: Default alignment. * **Wrap Text** - Displays long content on multiple lines within a single cell, preventing it from overflowing into adjacent cells. To enable text wrapping: 1. Select the target cell or range (e.g., C5). - 2. Go to the Home tab. - 3. Click Wrap Text in the ribbon to toggle text wrapping for the selected cells. + 2. Go to the **Home** tab. + 3. Click **Wrap Text** in the ribbon to toggle text wrapping. Text and cell formatting can be applied or removed from a cell or range by using the options available in the component's built-in **Ribbon** under the **Home** tab. @@ -152,33 +153,33 @@ Borders visually separate cells and define tables or sections within a worksheet | Horizontal Border | Applies borders to the top and bottom edges of a cell or range. | | Vertical Border | Applies borders to the left and right edges of a cell or range. | | Outside Border | Applies borders to the outer edges of a range of cells. | -| Inside Border | Applies borders to the inner edges of a range of cells | +| Inside Border | Applies borders to the inner edges of a range of cells. | Border color, size, and style can also be customized. The supported sizes and styles are: -| Type | Description | +| Type | Description | |--------|----------------------------------| -| Thin | Specifies a `1px` border size. | -| Medium | Specifies a `2px` border size. | -| Thick | Specifies a `3px` border size. | -| Solid | Creates a `solid` border. | -| Dashed | Creates a `dashed` border.| -| Dotted | Creates a `dotted` border.| -| Double | Creates a `double` border.| +| Thin | Specifies a `1px` border size. | +| Medium | Specifies a `2px` border size. | +| Thick | Specifies a `3px` border size. | +| Solid | Creates a `solid` border. | +| Dashed | Creates a `dashed` border. | +| Dotted | Creates a `dotted` border. | +| Double | Creates a `double` border. | ### Applying Borders via UI Borders can be applied through the UI using the following method: * Click the **Home** tab in the Ribbon. -* Open the **Borders** dropdown. +* In the **Font** group, open the **Borders** dropdown. * Select the desired border style, color, and size from the dropdown. ![Blazor Spreadsheet displaying available border options on the Home tab in the Ribbon toolbar](./images/borders.gif) ### Applying Borders Programmatically -Borders can be applied programmatically to a specific cell or range of cells using the [SetBordersAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SetBordersAsync_Syncfusion_Blazor_Spreadsheet_BorderType_Syncfusion_XlsIO_ExcelLineStyle_System_String_System_String_) method. The available parameters in the [SetBordersAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SetBordersAsync_Syncfusion_Blazor_Spreadsheet_BorderType_Syncfusion_XlsIO_ExcelLineStyle_System_String_System_String_) method are: +Borders can be applied programmatically to a specific cell or range of cells using the [SetBordersAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SetBordersAsync_Syncfusion_Blazor_Spreadsheet_BorderType_Syncfusion_XlsIO_ExcelLineStyle_System_String_System_String_) method. The available parameters in the [SetBordersAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SetBordersAsync_Syncfusion_Blazor_Spreadsheet_BorderType_Syncfusion_XlsIO_ExcelLineStyle_System_String_System_String_) method are: | Parameter | Type | Description | | -- | -- | -- | @@ -189,6 +190,7 @@ Borders can be applied programmatically to a specific cell or range of cells usi {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.XlsIO @@ -215,26 +217,60 @@ Borders can be applied programmatically to a specific cell or range of cells usi ## Conditional Formatting -Conditional formatting enables automatic visual formatting of cells based on specified conditions, helping to highlight data patterns, identify outliers, and improve data interpretation. The Blazor Spreadsheet component provides comprehensive conditional formatting capabilities including color scales, data bars, icon sets, and custom formatting rules. These formats are Excel-compatible, respect worksheet protection settings, and integrate seamlessly with undo/redo operations. To control this functionality, use the `AllowConditionalFormat` property, which enables or disables conditioanl formatting support in the Spreadsheet. The default value of the `AllowConditionalFormat` property is **true**. +Conditional formatting enables automatic visual formatting of cells based on specified conditions, helping to highlight data patterns, identify outliers, and improve data interpretation. The Blazor Spreadsheet component provides comprehensive conditional formatting capabilities including color scales, data bars, icon sets, and custom formatting rules. These formats are Excel-compatible, respect worksheet protection settings, and integrate seamlessly with undo/redo operations. To control this functionality, use the [AllowConditionalFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowConditionalFormat) property, which enables or disables conditional formatting support in the Spreadsheet. The default value of the [AllowConditionalFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowConditionalFormat) property is **true**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} ### Applying Conditional Formatting -Conditional formatting can be applied through the UI or programmatically: +Conditional formatting can be applied through the UI or programmatically. + +### Conditional formatting via UI + +To apply conditional formatting through the UI: + +1. Select the target cell range. +2. Click the **Conditional Formatting** button in the **Home** tab of the Ribbon. +3. Choose the desired formatting rule type and configure the conditions. + +### Conditional formatting programmatically -**Conditional formatting via UI** -- Select the target cell range -- Click the **Conditional Formatting** button in the **Home** tab of the Ribbon -- Choose the desired formatting rule type and configure the conditions +Apply conditional formatting using the [ConditionalFormatAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ConditionalFormatAsync_Syncfusion_Blazor_Spreadsheet_ConditionalFormatRule_) method with a [ConditionalFormatRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ConditionalFormatRule.html) object to define the condition, format type, range, and styling. -**Conditional formatting programmatically** -Apply conditional formatting using the `ConditionalFormatAsync()` method with a `ConditionalFormatRule` object to define the condition, format type, range, and styling. +The following table lists the commonly used properties of `ConditionalFormatRule`: + +| Property | Type | Description | +| -- | -- | -- | +| [ConditionalFormatType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ConditionalFormatType.html) | enum | Specifies the rule type (for example, `GreaterThan`, `Top10Items`, `BlueDataBar`). | +| PrimaryValue | string | The primary value used to evaluate the condition (for example, the threshold for `GreaterThan`). | +| SecondaryValue | string (Optional) | The secondary value used by rules that need a range, such as `Between`. | +| Range | string | The cell range the rule applies to (for example, `"B2:B50"`). | +| [ConditionalFormatColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ConditionalFormatColor.html) | enum | The preset color style for the rule. Applies only to Highlight Cells Rules and Top/Bottom Rules. | +| FontColor | string | The font color used when custom styling is enabled. | +| BackgroundColor | string | The cell background color used when custom styling is enabled. | +| FontStyle | string | The italic style for the matching cells, such as `"italic"`. | +| FontWeight | string | The font weight for the matching cells, such as `"bold"`. | +| Underline | bool | When **true**, applies an underline decoration to the matching cells. | **Code Example** {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet + @@ -273,14 +309,14 @@ Highlight cells rules apply preset color formatting based on cell values or text | ConditionalFormatType | Description | |---|---| -| `GreaterThan` | Highlights cells with values greater than a specified threshold | -| `LessThan` | Highlights cells with values less than a specified threshold | -| `Between` | Highlights cells with values falling within a specified range | -| `EqualTo` | Highlights cells with values equal to a specified value | -| `ContainsText` | Highlights cells containing specified text | -| `DateOccur` | Highlights cells containing dates matching a specified time period | -| `Duplicate` | Highlights cells with duplicate values within the evaluated range | -| `Unique` | Highlights cells with unique values within the evaluated range | +| `GreaterThan` | Highlights cells with values greater than a specified threshold. | +| `LessThan` | Highlights cells with values less than a specified threshold. | +| `Between` | Highlights cells with values falling within a specified range. | +| `EqualTo` | Highlights cells with values equal to a specified value. | +| `ContainsText` | Highlights cells containing specified text. | +| `DateOccur` | Highlights cells containing dates matching a specified time period. | +| `Duplicate` | Highlights cells with duplicate values within the evaluated range. | +| `Unique` | Highlights cells with unique values within the evaluated range. | **Available Preset Color Styles** @@ -292,13 +328,16 @@ Highlight cells rules apply preset color formatting based on cell values or text | `RedFill` | Red | Default | | `RedText` | Default | Red | +N> The [ConditionalFormatColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.ConditionalFormatColor.html) enum applies only to **Highlight Cells Rules** and **Top/Bottom Rules**. Data bars, color scales, and icon sets control color through the `ConditionalFormatType` itself (for example, `BlueDataBar`, `GreenYellowRedColorScale`, `ThreeTrafficLights1`). + **Code Example** {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @@ -337,17 +376,18 @@ Top/Bottom rules apply formatting based on statistical rankings and averages wit | ConditionalFormatType | Description | |---|---| -| `Top10Items` | Highlights the top N items in the range by value rank | -| `Bottom10Items` | Highlights the bottom N items in the range by value rank | -| `Top10Percentage` | Highlights the top N percent of items in the range by value | -| `Bottom10Percentage` | Highlights the bottom N percent of items in the range by value | -| `AboveAverage` | Highlights cells with values above the average of the range | -| `BelowAverage` | Highlights cells with values below the average of the range | +| `Top10Items` | Highlights the top N items in the range by value rank. | +| `Bottom10Items` | Highlights the bottom N items in the range by value rank. | +| `Top10Percentage` | Highlights the top N percent of items in the range by value. | +| `Bottom10Percentage` | Highlights the bottom N percent of items in the range by value. | +| `AboveAverage` | Highlights cells with values above the average of the range. | +| `BelowAverage` | Highlights cells with values below the average of the range. | **Code Example** {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -399,6 +439,7 @@ Data bars provide in-cell graphical representation of values, where the bar leng {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -462,6 +503,7 @@ Color scales apply a gradient of colors to cells based on their values within th {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -548,6 +590,7 @@ Icon sets display symbolic representations of cell values, where different icons {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -581,22 +624,23 @@ Icon sets display symbolic representations of cell values, where different icons ### Custom Format -Custom formatting allows advanced styling of cells that meet specific conditions by directly setting properties such as font color, background color, font style (bold/italic), font weight, and underline effects. This provides fine-grained control over visual appearance beyond preset color schemes. +Custom formatting allows advanced styling of cells that meet specific conditions by directly setting properties such as font color, background color, font style, font weight, and underline effects. This provides fine-grained control over visual appearance beyond preset color schemes. -**Supported Custom Format Properties** +N> Custom format styling is supported only for **Highlight Cells Rules** and **Top/Bottom Rules** rule types. Data bars, color scales, and icon sets do not support custom formatting. -- **Color**: Font/text color -- **Background Color**: Cell background fill color -- **Font Style**: Italic styling -- **Font Weight**: Bold styling -- **Underline**: Text underline decoration +**Supported Custom Format Properties** -N> Custom format styling is supported only for **Highlight Cells Rules** and **Top/Bottom Rules** conditional format types. Data bars, color scales, and icon sets do not support custom formatting. +- **FontColor**: Font/text color +- **BackgroundColor**: Cell background fill color +- **FontStyle**: Italic styling (for example, `"italic"`) +- **FontWeight**: Bold styling (for example, `"bold"`) +- **Underline**: Text underline decoration (set to `true` to enable) **Code Example** {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -636,19 +680,19 @@ N> Custom format styling is supported only for **Highlight Cells Rules** and **T Conditional formatting rules can be removed from cells when no longer needed. This allows for dynamic rule management and prevents formatting conflicts when rules need to be updated or replaced. -Conditional formatting can be cleared through the UI or programmatically: +Conditional formatting can be cleared through the UI or programmatically. -**Clearing conditional formats via UI** +### Clearing conditional formats via UI -- Select the cell range containing the conditional formats to remove -- Click the **Conditional Formatting** button in the **Home** tab -- Select **Clear Rules** and choose: - - **Clear Rules from Selected Cells** - Remove rules only from the selected range - - **Clear Rules from Entire Sheet** - Remove all conditional formatting from the worksheet +1. Select the cell range containing the conditional formats to remove. +2. Click the **Conditional Formatting** button in the **Home** tab. +3. Select **Clear Rules** and choose: + - **Clear Rules from Selected Cells**: Remove rules only from the selected range. + - **Clear Rules from Entire Sheet**: Remove all conditional formatting from the worksheet. -**Clearing conditional format programmatically** +### Clearing conditional format programmatically -Use the `ClearConditionalFormatsAsync()` method to remove conditional formatting rules from specific cells or ranges. +Use the [ClearConditionalFormatsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearConditionalFormatsAsync_System_String_) method to remove conditional formatting rules from specific cells or ranges. | Parameter | Type | Description | | -- | -- | -- | @@ -658,6 +702,7 @@ Use the `ClearConditionalFormatsAsync()` method to remove conditional formatting {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -702,12 +747,12 @@ Use the `ClearConditionalFormatsAsync()` method to remove conditional formatting The following operations have limitations when working with conditional formatting in the Blazor Spreadsheet component: -- **Row/Column Insertion**: Inserting rows or columns within a range containing conditional formatting may not automatically expand the formatting to include the new rows/columns -- **Formula-Based Rules**: Formula-based conditional formatting rules are not currently supported; rules must be based on static values or built-in rule types -- **Cut and Paste**: Conditional formatting rules applied to cells are not copied when performing cut and paste operations on those cells -- **Custom Rule Definitions**: Creating fully custom rule types beyond the predefined rule types is not supported +- **Row/Column Insertion**: Inserting rows or columns within a range containing conditional formatting may not automatically expand the formatting to include the new rows/columns. +- **Formula-Based Rules**: Formula-based conditional formatting rules are not currently supported; rules must be based on static values or built-in rule types. +- **Cut and Paste**: Conditional formatting rules applied to cells are not copied when performing cut and paste operations on those cells. +- **Custom Rule Definitions**: Creating fully custom rule types beyond the predefined rule types is not supported. -### Limitations +## General Formatting Limitations -* A custom number format UI dialog is not available, custom formats must be applied using the API. +* A custom number format UI dialog is not available; custom formats must be applied using the API. * After inserting a row or column, border expansion is not currently supported. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/formulas.md b/Document-Processing/Excel/Spreadsheet/Blazor/formulas.md index 381e92bfba..90c3c8865e 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/formulas.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/formulas.md @@ -1,7 +1,7 @@ --- layout: post title: Formulas in Blazor Spreadsheet Component | Syncfusion -description: Checkout and learn here all about formulas in Syncfusion Blazor Spreadsheet component and more | Syncfusion. +description: Check out and learn all about formulas and calculation features in the Syncfusion Blazor Spreadsheet component. platform: document-processing control: Spreadsheet documentation: ug @@ -15,11 +15,24 @@ documentation: ug The **Formula Bar** simplifies editing or entering cell data. The [ShowFormulaBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowFormulaBar) property is used to enable or disable the **Formula Bar**. The default value of the [ShowFormulaBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowFormulaBar) property is **true**. -### Working with Formulas via the UI +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + +### Inserting Formulas via the UI Formulas in the Syncfusion Blazor Spreadsheet can be accessed and inserted using the following methods: -* Select **Insert Function** from the **Formulas** tab in the Ribbon toolbar. In the **Insert Function** dialog, choose a category, then select the desired function to insert it into the selected cell. +* Select **Insert Function** from the **Formulas** tab in the Ribbon toolbar. In the **Insert Function** dialog, choose a category and then the desired function to insert it into the selected cell. ![Insert Function Dialog](./images/insert-formula.gif) @@ -41,7 +54,7 @@ The Spreadsheet includes **Calculation Option** functionality, similar to Excel' ### Automatic -In **Automatic Mode**, formulas are recalculated instantly whenever a dependent cell is modified. This mode is ideal for scenarios requiring real-time updates, ensuring the most current results are displayed without manual intervention. +In **Automatic Mode**, formulas are recalculated instantly whenever a dependent cell is modified. This mode is ideal for scenarios requiring real-time updates, ensuring results are up to date without manual intervention. **Example:** @@ -81,29 +94,36 @@ N> Named Ranges can be defined only for cells or ranges that contain values. To edit a Named Range: -* Open the **Name Manager** dialog. - -* Select the Named Range to be edited. - -* Click the **Edit** icon. - -* Modify the name, range, or scope as needed. - -* Click the **Update Range** button, then click **OK** button to save changes. +1. Open the **Name Manager** dialog. +2. Select the Named Range to be edited. +3. Click the **Edit** icon. +4. Modify the name, range, or scope as needed. +5. Click the **Update Range** button, then click **OK** to save changes. To delete a Named Range: 1. Open the **Name Manager** dialog. - 2. Select the Named Range to be deleted. - 3. Click the **Delete** icon, then click the **OK** button to confirm. N> Deleting a Named Range used in formulas may cause formula errors. Ensure the Named Range is not referenced before deleting it. ## Aggregates -The **Aggregates** feature provides instant statistical summaries of selected cell ranges without requiring formula creation. This functionality enables quick data analysis by automatically calculating statistics such as sum, average, count, minimum, and maximum values. Aggregate calculations appear in the footer at the bottom of the Spreadsheet component, providing at-a-glance insights into selected data. To control this functionality, use the `ShowAggregate` property, which enables or disables aggregate support in the Spreadsheet. The default value of the `ShowAggregate` property is true. +The **Aggregates** feature provides instant statistical summaries of selected cell ranges without requiring formula creation. This functionality enables quick data analysis by automatically calculating statistics such as sum, average, count, minimum, and maximum values. Aggregate calculations appear in the footer at the bottom of the Spreadsheet component, providing at-a-glance insights into selected data. To control this functionality, use the [ShowAggregate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowAggregate) property, which enables or disables aggregate support in the Spreadsheet. The default value of the `ShowAggregate` property is true. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} ### Supported Aggregate Functions @@ -117,7 +137,7 @@ The Blazor Spreadsheet component calculates five key aggregate statistics for nu | **Min** | Identifies the smallest value in the selected range | | **Max** | Identifies the largest value in the selected range | -N> Aggregate calculations only include numeric values. Cells containing text, logical values, or empty cells are excluded from sum and average calculations but are counted if the **Count** includes them based on their data type. +N> Aggregate calculations only include numeric values. Cells containing text, logical values, or empty cells are excluded from sum and average calculations. The **Count** function may include or exclude these cells based on their data type. ### Aggregates and Selection Behavior @@ -137,7 +157,22 @@ Empty cells and cells containing text or formulas are excluded from Sum and Aver ## Supported Formulas -The Spreadsheet component supports a wide range of built-in formulas, enabling powerful data analysis and manipulation. Below is the list of formulas supported in the Spreadsheet component: +The Spreadsheet component supports a wide range of built-in formulas, enabling powerful data analysis and manipulation. The supported functions are grouped into the following categories: + +- **Math and Trigonometry** – ABS, ACOS, ACOSH, ASIN, ASINH, ATAN, ATAN2, ATANH, CEILING, COMBIN, COS, COSH, DEGREES, EVEN, EXP, FACT, FACTDOUBLE, FLOOR, GCD, INT, LCM, LN, LOG, LOG10, MDETERM, MINVERSE, MMULT, MOD, MROUND, MULTINOMIAL, ODD, PI, POWER, PRODUCT, QUOTIENT, RADIANS, RAND, RANDBETWEEN, ROMAN, ROUND, ROUNDDOWN, ROUNDUP, SIGN, SIN, SINH, SQRT, SQRTPI, SUM, SUMIF, SUMPRODUCT, SUMSQ, SUMX2MY2, SUMX2PY2, SUMXMY2, TAN, TANH, TRUNC. +- **Statistical** – AVEDEV, AVERAGE, AVERAGEA, AVERAGEIF, AVERAGEIFS, BESSELI, BESSELJ, BESSELK, BESSELY, BINOMDIST, CHIDIST, CHIINV, CHITEST, CONFIDENCE, CORREL, COUNT, COUNTA, COUNTBLANK, COUNTIF, COVAR, CRITBINOM, DEVSQ, EXPONDIST, FDIST, FINV, FISHER, FISHERINV, FORECAST, GAMMADIST, GAMMAINV, GAMMALN, GEOMEAN, GROWTH, HARMEAN, INTERCEPT, KURT, LARGE, LOGEST, LOGINV, LOGNORMDIST, MAX, MAXA, MAXIFS, MEDIAN, MIN, MINA, MINIFS, MODE, NEGBINOMDIST, NORMDIST, NORMINV, NORMSDIST, NORMSINV, PEARSON, PERCENTILE, PERCENTRANK, PERMUT, POISSON, PROB, QUARTILE, RANK, RSQ, SKEW, SLOPE, SMALL, STANDARDIZE, STDEV, STDEVA, STDEVP, STDEVPA, STEYX, TRIMMEAN, VAR, VARA, VARP, VARPA, WEIBULL, ZTEST. +- **Logical** – AND, FALSE, IF, IFERROR, IFS, NOT, OR, SWITCH, TRUE. +- **Text** – ARRAYTOTEXT, ASC, CHAR, CLEAN, CODE, CONCAT, CONCATENATE, DOLLAR, EXACT, FIND, FINDB, FIXED, LEFT, LEFTB, LEN, LENB, LOWER, MID, MIDB, PROPER, REPLACE, REPLACEB, REPT, RIGHT, RIGHTB, SEARCH, SEARCHB, SUBSTITUTE, T, TEXT, TEXTBEFORE, TEXTJOIN, TEXTSPLIT, TRIM, UNIQUE, UPPER, VALUE, VALUETOTEXT. +- **Date and Time** – DATE, DATEVALUE, DAY, DAYS360, EDATE, EOMONTH, HOUR, MINUTE, MONTH, NETWORKDAYS, NOW, SECOND, TIME, TIMEVALUE, TODAY, WEEKDAY, WEEKNUM, WORKDAY, YEAR, YEARFRAC. +- **Lookup and Reference** – ADDRESS, AREAS, CHOOSE, CHOOSECOLS, CHOOSEROWS, COLUMN, COLUMNS, FORMULATEXT, GETPIVOTDATA, HLOOKUP, HYPERLINK, INDEX, INDIRECT, LOOKUP, MATCH, OFFSET, ROW, ROWS, TRANSPOSE, VLOOKUP, XLOOKUP, XMATCH. +- **Information** – CELL, ERROR.TYPE, INFO, ISBLANK, ISERR, ISERROR, ISEVEN, ISLOGICAL, ISNA, ISNONTEXT, ISNUMBER, ISODD, ISREF, ISTEXT, N, NA, TYPE. +- **Financial** – ACCRINT, ACCRINTM, AMORDEGRC, AMORLINC, COUPDAYBS, COUPDAYS, COUPDAYSNC, COUPNCD, COUPNUM, COUPPCD, CUMIPMT, CUMPRINC, DB, DDB, DISC, DOLLARDE, DOLLARFR, DURATION, EFFECT, FV, FVSCHEDULE, INTRATE, IPMT, IRR, MIRR, NPER, NPV, ODDFPRICE, ODDFYIELD, ODDLPRICE, ODDLYIELD, PMT, PPMT, PRICE, PRICEDISC, PRICEMAT, PV, RATE, RECEIVED, SLN, SYD, TBILLEQ, TBILLPRICE, TBILLYIELD, VDB, XIRR, XNPV, YIELD, YIELDDISC, YIELDMAT. +- **Engineering** – BIN2DEC, BIN2HEX, BIN2OCT, COMPLEX, CONVERT, DEC2BIN, DEC2HEX, DEC2OCT, DELTA, ERF, ERFC, GESTEP, HEX2BIN, HEX2DEC, HEX2OCT, IMABS, IMAGINARY, IMARGUMENT, IMCONJUGATE, IMCOS, IMDIV, IMEXP, IMLN, IMLOG10, IMLOG2, IMPOWER, IMPRODUCT, IMREAL, IMSIN, IMSQRT, IMSUB, IMSUM, OCT2BIN, OCT2DEC, OCT2HEX. +- **Dynamic Array** – BYCOL, BYROW, FILTER, LAMBDA, LET, SORT, SORTBY, TOCOL, TOROW. + +N> **About XlsIO:** Syncfusion **XlsIO** is the underlying library that powers the Spreadsheet's formula engine. The phrases "calculation of this formula result is not supported in XlsIO" and "Calculating this formula result is not supported in XlsIO" indicate that the function is parsed and exposed by the Spreadsheet UI, but its computed result is not persisted through XlsIO's calculation pipeline (for example, dynamic-array functions such as `LAMBDA`, `LET`, `UNIQUE`, `XLOOKUP`, and `XMATCH`). + +The complete list of supported formulas is provided below. @@ -284,7 +319,7 @@ Returns the test for independence

+Returns a value from a list of values

+Returns TRUE if two text values are identical

+Returns e raised to the power of a given number

+Returns a number as text with a fixed number of decimals

+ + @@ -543,7 +582,7 @@ GAMMAINV

+Returns TRUE if a number is greater than a threshold value

+Returns a value from the top row of an array

+Returns one value if a logical test is TRUE and another if it is FALSE

+Returns a specified value if a formula evaluates to an error

+Returns a value that corresponds to the first TRUE condition

+Returns the product of 2 to 29 complex numbers

+Returns a value from a reference or array using an index

- - @@ -760,7 +795,7 @@ Returns the kurtosis of a data set

+Returns a custom reusable formula

+Returns a value from a vector or array

+Returns a value from a reference or array

+Returns the standard deviation based on a sample

+Returns the standard deviation based on a sample, including numbers, text, and logical values

+Returns the standard deviation based on the entire population

+Returns the standard deviation based on the entire population, including numbers, text, and logical values

+ + @@ -1200,7 +1239,7 @@ Returns the sum of squares of differences of corresponding values in two arrays< +Returns a result corresponding to the first matching value in a list

+Returns a number as text in a specified format

+Returns text from multiple ranges and/or strings with a delimiter

+Returns the variance based on a sample

+Returns the variance based on a sample, including numbers, text, and logical values

+Returns the variance based on the entire population

+Returns the variance based on the entire population, including numbers, text, and logical values

+Returns a value from the first column of an array by moving across the row

TRUE

-
CHOOSE

 -Chooses a value from a list of values

CHOOSECOLS

 @@ -407,7 +442,7 @@ DEC2BIN

 Converts a decimal number to binary

-DECHEX

 +DEC2HEX

 Converts a decimal number to hexadecimal

@@ -476,11 +511,11 @@ Rounds a number up to the nearest even integer

EXACT

 -Checks to see if two text values are identical

EXP

 -Returns {{'__e__ '| markdownify }}raised to the power of a given number

EXPONDIST

 @@ -511,12 +546,12 @@ FISHER

 Returns the Fisher transformation

-FISHER

 +FISHERINV

 Returns the inverse of the Fisher transformation

FIXED

 -Formats a number as text with a fixed number of decimals

FLOOR

 @@ -527,6 +562,10 @@ FORECAST

 Returns a value along a linear trend

+FORMULATEXT

 +Returns the formula in a cell as text

FV

 Returns the future value of an investment

Returns the inverse of the gamma cumulative distribution

-GAMMALIN

 +GAMMALN

 Returns the natural logarithm of the gamma function, Γ(x)

@@ -556,7 +595,7 @@ Returns the geometric mean

GESTEP

 -Tests whether a number is greater than a threshold value

GROWTH

 @@ -580,7 +619,7 @@ Converts a hexadecimal number to octal

HLOOKUP

 -Looks in the top row of an array and returns the value of the indicated cell

HOUR

 @@ -596,15 +635,15 @@ Returns the hypergeometric distribution

IF

 -Specifies a logical test to perform

IFERROR

 -Returns a specified value if a formula evaluates to an error.

IFS

 -Checks whether one or more conditions are met and returns a value that corresponds to the first TRUE condition

IMABS

 @@ -652,7 +691,7 @@ Returns a complex number raised to an integer power

IMPRODUCT

 -Returns the product of from 2 to 29 complex numbers

IMREAL

 @@ -676,7 +715,7 @@ Returns the sum of complex numbers

INDEX

 -Uses an index to choose a value from a reference or array

INDIRECT

 @@ -727,7 +766,7 @@ ISLOGICAL

 Returns TRUE if the value is a logical value

-ISAN

 +ISNA

 Returns TRUE if the value is the #N/A error value

@@ -743,10 +782,6 @@ ISODD

 Returns TRUE if the number is odd

-ISMPT

 -Calculates the interest paid during a specific period of an investment

ISREF

 Returns TRUE if the value is a reference

LAMBDA

-Allows to use own formula parameters and logic

LARGE

 @@ -808,7 +843,7 @@ Returns the cumulative log-normal distribution

LOOKUP

 -Looks up values in a vector or array

LOWER

 @@ -816,7 +851,7 @@ Converts text to lowercase

MATCH

 -Looks up values in a reference or array

MAX

 @@ -879,7 +914,7 @@ MODE

 Returns the most common value in a data set

-MMONTH

 +MONTH

 Converts a serial number to a month

@@ -887,7 +922,7 @@ MROUND

 Returns a number rounded to the desired multiple

-MULTINOMINAL

 +MULTINOMIAL

 Returns the multinomial of a set of numbers

@@ -1144,19 +1179,19 @@ Returns a normalized value

STDEV

 -Estimates standard deviation based on a sample

STDEVA

 -Estimates standard deviation based on a sample, including numbers, text, and logical values

STDEVP

 -Calculates standard deviation based on the entire population

STDEVPA

 -Calculates standard deviation based on the entire population, including numbers, text, and logical values

STEYX

 @@ -1179,6 +1214,10 @@ SUMIF

 Adds the cells specified by a given criteria

+SUMIFS

 +Adds the cells specified by multiple criteria

SUMPRODUCT

 Returns the sum of the products of corresponding array components

SWITCH

 -Evaluates an expression against a list of values and returns the result corresponding to the first matching value. If there is no match, an optional default value may be returned.

SYD

 @@ -1220,7 +1259,7 @@ Returns the hyperbolic tangent of a number

TEXT

 -Formats a number and converts it to text

TEXTBEFORE

 @@ -1228,7 +1267,7 @@ Returns text that occurs before a given character

TEXTJOIN

 -Combines the text from multiple ranges and/or strings with a delimiter you specify between each text value that will be combined

TEXTSPLIT

 @@ -1255,7 +1294,7 @@ TOROW

 Transforms an array into a single row

-TRANSPORSE

 +TRANSPOSE

 Returns the transpose of an array

@@ -1292,19 +1331,19 @@ Returns the text from any specified value. Calculating this formula result is no
VAR

 -Estimates variance based on a sample

VARA

 -Estimates variance based on a sample, including numbers, text, and logical values

VARP

 -Calculates variance based on the entire population

VARPA

 -Calculates variance based on the entire population, including numbers, text, and logical values

VDB

 @@ -1312,7 +1351,7 @@ Returns the depreciation of an asset for a specified or partial period by using
VLOOKUP

 -Looks in the first column of an array and moves across the row to return the value of a cell

WEEKDAY

 @@ -1362,4 +1401,4 @@ Returns the logical value FALSE

Returns the logical value TRUE

+ \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/hyperlink.md b/Document-Processing/Excel/Spreadsheet/Blazor/hyperlink.md index d0e5e34d7f..741ac41731 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/hyperlink.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/hyperlink.md @@ -1,7 +1,7 @@ --- layout: post title: Hyperlinks in the Blazor Spreadsheet component | Syncfusion -description: Learn how to insert, edit, remove, and manage hyperlinks in the Syncfusion Blazor Spreadsheet component,programmatic methods, and events. +description: Learn how to insert, edit, remove, and manage hyperlinks in the Syncfusion Blazor Spreadsheet component, including programmatic methods and events. platform: document-processing control: Spreadsheet documentation: ug @@ -9,15 +9,33 @@ documentation: ug # Hyperlinks in the Blazor Spreadsheet component -Hyperlinks in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) enable interactive navigation both within and outside of spreadsheets. This feature creates clickable links that connect to external web URLs, specific cells within the current worksheet, or cells in other worksheets. To control this functionality, use the [AllowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowHyperlink) property, which enables or disables hyperlink support in the Spreadsheet. The default value of the [AllowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowHyperlink) property is **true**. +Hyperlinks enable navigation within and outside the spreadsheet. This feature creates clickable links that connect to external web URLs, specific cells within the current worksheet, or cells in other worksheets. To control this functionality, use the [`AllowHyperlink`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowHyperlink) property. The keyboard shortcut `Ctrl + K` can be used to quickly open the **Insert** or **Edit** hyperlink dialog for the active cell, without using the UI elements. This shortcut works regardless of whether the hyperlink functionality is accessed through the Ribbon or the Context Menu. -N> When [AllowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowHyperlink) is set to **false**, the hyperlink options are removed from the interface (Ribbon and Context Menu), although existing hyperlinks will still function. Additionally, shortcut keys (**Ctrl + K**) and API methods related to this feature will no longer work. +N> When [`AllowHyperlink`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowHyperlink) is set to **false**, the hyperlink options are removed from the interface (Ribbon and Context Menu), although existing hyperlinks will still function. Additionally, shortcut keys (**Ctrl + K**) and API methods related to this feature will no longer work. The default value of the `AllowHyperlink` property is **true**. -## Insert Hyperlink +## Disabling hyperlinks + +The example below shows how to disable hyperlink support across the entire Spreadsheet: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + +## Supported link types and schemes + +Hyperlinks can point to: -Hyperlinks can be added to worksheet cells to create interactive elements that improve navigation and connect data to external sources. These links can point to: * **Web URLs** - Direct access to websites, such as `https://www.syncfusion.com`. * **Cell References** - Quick jumps to specific cells within the same sheet, like `A1` or a range such as `B5:C10`. * **Sheet References** - Navigation to cells in other sheets, for example, `Sheet2!A1`. @@ -49,7 +67,7 @@ Hyperlinks can be inserted through the user interface (UI) using any of the foll ### Insert Hyperlink Programmatically -Hyperlinks can be added programmatically using the [AddHyperlinkAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method. This method allows hyperlinks to be added to a cell or range of cells without using the UI. The available parameters in the [AddHyperlinkAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method are: +Hyperlinks can be added programmatically using the [AddHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method. This method allows hyperlinks to be added to a cell or range of cells without using the UI. The available parameters in the [AddHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method are: | Parameter | Type | Description | | -- | -- | -- | @@ -60,9 +78,11 @@ Hyperlinks can be added programmatically using the [AddHyperlinkAsync](https://h {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons - + @@ -87,34 +107,34 @@ Hyperlinks can be added programmatically using the [AddHyperlinkAsync](https://h {% endhighlight %} {% endtabs %} -The [AddHyperlinkAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method is flexible and supports various scenarios beyond basic usage. The following are some special cases and behaviors to be aware of: +The [AddHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method is flexible and supports various scenarios beyond basic usage. The following are some special cases and behaviors to be aware of: {% tabs %} -{% highlight razor%} +{% highlight razor tabtitle="Index.razor" %} // Adds a web URL hyperlink to a single cell. -await spreadsheetInstance.AddHyperlinkAsync("A1", "https://www.syncfusion.com", "Syncfusion"); +await SpreadsheetInstance.AddHyperlinkAsync("A1", "https://www.syncfusion.com", "Syncfusion"); // Adds a cell reference hyperlink. -await spreadsheetInstance.AddHyperlinkAsync("B5", "D10", "Go to Summary"); +await SpreadsheetInstance.AddHyperlinkAsync("B5", "D10", "Go to Summary"); // Adds a sheet reference hyperlink. -await spreadsheetInstance.AddHyperlinkAsync("A2", "Sheet2!B5", "View Details"); +await SpreadsheetInstance.AddHyperlinkAsync("A2", "Sheet2!B5", "View Details"); // Adds a hyperlink to multiple cells. -await spreadsheetInstance.AddHyperlinkAsync("A2:A5", "https://www.syncfusion.com", "Documentation"); +await SpreadsheetInstance.AddHyperlinkAsync("A2:A5", "https://www.syncfusion.com", "Documentation"); // Adds a web URL without a protocol, which is automatically prefixed with "https://". -await spreadsheetInstance.AddHyperlinkAsync("A1", "syncfusion.com"); +await SpreadsheetInstance.AddHyperlinkAsync("A1", "syncfusion.com"); // Adds a hyperlink without display text, using the hyperlink address as display text. -await spreadsheetInstance.AddHyperlinkAsync("B1", "https://www.syncfusion.com"); +await SpreadsheetInstance.AddHyperlinkAsync("B1", "https://www.syncfusion.com"); -// Adds a hyperlink to a non-existent sheet reference; no error is thrown, but the link may not function properly. -await spreadsheetInstance.AddHyperlinkAsync("C1", "NonExistentSheet!A1", "Invalid Sheet"); +// If the sheet reference does not exist, the link is still created but may not function when clicked. +await SpreadsheetInstance.AddHyperlinkAsync("C1", "NonExistentSheet!A1", "Invalid Sheet"); // Adds a hyperlink to a cell with an existing value; the display text will update if provided. -await spreadsheetInstance.AddHyperlinkAsync("D1", "https://www.syncfusion.com", "New Text"); +await SpreadsheetInstance.AddHyperlinkAsync("D1", "https://www.syncfusion.com", "New Text"); {% endhighlight %} {% endtabs %} @@ -123,10 +143,10 @@ await spreadsheetInstance.AddHyperlinkAsync("D1", "https://www.syncfusion.com", Hyperlinks in a spreadsheet can be edited to update the destination or the display text. This includes: -- **Changing the Web URL** - Update the hyperlink to point to a different website or online resource. -- **Editing the Display Text** - Modify the text in the cell without affecting the link destination. -- **Updating Cell References** - Modify the hyperlink to point to a different cell in the same sheet (e.g., from `A1` to `B5`). -- **Linking to Another Sheet** - Redirect the hyperlink to a different sheet by modifying the sheet name in the reference (e.g., from `Sheet1!A1` to `Sheet2!C3`). +- **Change the web URL** - Redirect the hyperlink to a different website or online resource. +- **Edit the display text** - Modify the text in the cell without affecting the link destination. +- **Update the cell reference** - Redirect the hyperlink to a different cell in the same sheet (for example, from `A1` to `B5`). +- **Link to another sheet** - Redirect the hyperlink to a different sheet by modifying the sheet name in the reference (for example, from `Sheet1!A1` to `Sheet2!C3`). ### Edit Hyperlink via UI @@ -151,23 +171,34 @@ Hyperlinks can be edited through the user interface (UI) using any of the follow ![Edit hyperlink using Context Menu](images/edit-hyperlink-using-contextmenu.gif) +**Using the Keyboard Shortcut** + +- Select the cell containing the hyperlink. +- Press `Ctrl + K` to open the **Edit Hyperlink** dialog. +- Make changes to the hyperlink information in the dialog box. +- Click **Update** to apply the changes. + > When editing hyperlinks to other sheets, ensure that the target sheet exists in the workbook. Links to non-existent sheets result in errors when clicked. ## Remove Hyperlink -Removing a hyperlink disconnects the cell from its associated destination while retaining the display text. This operation eliminates only the hyperlink functionality without altering the actual content of the cell. Any cells that do not contain a hyperlink are ignored during the process, and no errors are generated. +Removing a hyperlink disconnects the cell from its associated destination while retaining the display text. Any cells that do not contain a hyperlink are ignored during the process and do not generate errors. ### Remove Hyperlink via UI -To remove a hyperlink using the interface, select the cell that contains the hyperlink, then right-click to open the context menu. From the available options, choose **Remove Hyperlink** to delete the link from the selected cell. +To remove a hyperlink using the interface: + +- Select the cell that contains the hyperlink. +- Right-click to open the context menu. +- Choose **Remove Hyperlink** to delete the link from the selected cell. -When dealing with multiple hyperlinks, selecting a range of cells-such as `A1` to `D5`-allows all hyperlinks within that range to be removed in a single operation. This method is efficient for cleaning up large sets of hyperlinks quickly. +When dealing with multiple hyperlinks, selecting a range of cells - such as `A1` to `D5` - allows all hyperlinks within that range to be removed in a single operation. This method is efficient for cleaning up large sets of hyperlinks quickly. ![Remove hyperlink using Context Menu](images/remove-hyperlink.png) ### Remove Hyperlink Programmatically -Hyperlinks can be removed programmatically by using the [RemoveHyperlinkAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method. This method eliminates hyperlink functionality from the specified cell or range of cells within a spreadsheet, allowing for efficient bulk removal through code. The available parameters in the [RemoveHyperlinkAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method are: +Hyperlinks can be removed programmatically by using the [RemoveHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method. This method eliminates hyperlink functionality from the specified cell or range of cells within a spreadsheet, allowing for efficient bulk removal through code. The available parameters in the [RemoveHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method are: | Parameter | Type | Description | | -- | -- | -- | @@ -176,6 +207,7 @@ Hyperlinks can be removed programmatically by using the [RemoveHyperlinkAsync]( {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -203,39 +235,37 @@ Hyperlinks can be removed programmatically by using the [RemoveHyperlinkAsync]( {% endhighlight %} {% endtabs %} -The [RemoveHyperlinkAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method is flexible and supports various scenarios beyond basic usage. Below are some special cases and behaviors to be aware of: +The [RemoveHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method is flexible and supports various scenarios beyond basic usage. The following are some special cases and behaviors to be aware of: {% tabs %} -{% highlight razor%} +{% highlight razor tabtitle="Index.razor" %} // Remove hyperlink from a single cell. -await spreadsheetInstance.RemoveHyperlinkAsync("A1"); +await SpreadsheetInstance.RemoveHyperlinkAsync("A1"); -// Remove hyperlinks from a range of cells -await spreadsheetInstance.RemoveHyperlinkAsync("A1:C5"); +// Remove hyperlinks from a range of cells. +await SpreadsheetInstance.RemoveHyperlinkAsync("A1:C5"); -// Remove hyperlink from a single cell in a specific sheet -await spreadsheetInstance.RemoveHyperlinkAsync("Sheet2!D10"); +// Remove hyperlink from a single cell in a specific sheet. +await SpreadsheetInstance.RemoveHyperlinkAsync("Sheet2!D10"); -// Remove hyperlinks from a range of cells in a specific sheet -await spreadsheetInstance.RemoveHyperlinkAsync("Sheet3!A1:A20"); +// Remove hyperlinks from a range of cells in a specific sheet. +await SpreadsheetInstance.RemoveHyperlinkAsync("Sheet3!A1:A20"); {% endhighlight %} {% endtabs %} ## Events -The Blazor Spreadsheet provides events that are triggered during hyperlink operations, such as [HyperlinkCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html), [HyperlinkCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html), and [HyperlinkClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html). These events enable the execution of custom actions before and after a hyperlink is created or interacted with, allowing for validation, customization, and response handling. +The Blazor Spreadsheet provides events that are triggered during hyperlink operations. Use the table of contents below to jump to the event you need: -* **HyperlinkCreating** - The [HyperlinkCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html) event is triggered prior to the creation of a hyperlink. It offers an opportunity to modify or validate the hyperlink details before the link is added to the sheet, enabling custom logic or restrictions to be applied during the hyperlink creation process. - -* **HyperlinkCreated** - The [HyperlinkCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) event is triggered after a hyperlink has been successfully added to the sheet. It provides detailed information about the newly created hyperlink, enabling further processing or logging if required. - -* **HyperlinkClick** - The [HyperlinkClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html) event is triggered when a hyperlink in the sheet is clicked. +* [HyperlinkCreating](#hyperlinkcreating) - Triggered before a hyperlink is added to a cell. +* [HyperlinkCreated](#hyperlinkcreated) - Triggered after a hyperlink has been added to a cell. +* [HyperlinkClick](#hyperlinkclick) - Triggered when a hyperlink within the spreadsheet is clicked. ### HyperlinkCreating -The [HyperlinkCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html) event is triggered before a hyperlink is added to a cell. This event provides an opportunity to inspect, modify, or cancel the hyperlink creation process based on custom logic or validation requirements. +The [`HyperlinkCreating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html) event is triggered before a hyperlink is added to a cell. This event provides an opportunity to inspect, modify, or cancel the hyperlink creation process based on custom logic or validation requirements. **Purpose** @@ -243,7 +273,7 @@ This event is useful for scenarios where hyperlink behavior needs to be controll **Event Arguments** -The event uses the [HyperlinkCreatingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html) class, which includes the following properties: +The event uses the [`HyperlinkCreatingEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html) class, which includes the following properties: | Event Arguments | Description | |----------------|-------------| @@ -255,6 +285,7 @@ The event uses the [HyperlinkCreatingEventArgs](https://help.syncfusion.com/cr/b {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -297,7 +328,7 @@ The event uses the [HyperlinkCreatingEventArgs](https://help.syncfusion.com/cr/b ### HyperlinkCreated -The [HyperlinkCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) event is triggered after a hyperlink has been successfully added to a cell. This event provides read-only access to the details of the newly created hyperlink, allowing for post-processing actions such as logging, auditing, or UI updates. +The [`HyperlinkCreated`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) event is triggered after a hyperlink has been successfully added to a cell. This event provides read-only access to the details of the newly created hyperlink, allowing for post-processing actions such as logging, auditing, or UI updates. **Purpose** @@ -305,7 +336,7 @@ This event is useful for scenarios where actions need to be taken after a hyperl **Event Arguments** -The [HyperlinkCreatedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) includes the following properties: +The [`HyperlinkCreatedEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) includes the following properties: | Event Arguments | Description | |----------------|-------------| @@ -316,6 +347,7 @@ The [HyperlinkCreatedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -344,7 +376,7 @@ The [HyperlinkCreatedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion ### HyperlinkClick -The [HyperlinkClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html) event is triggered when a hyperlink within the spreadsheet is clicked. This event provides contextual information about the clicked hyperlink, enabling custom responses such as logging, conditional navigation, or user notifications. +The [`HyperlinkClick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html) event is triggered when a hyperlink within the spreadsheet is clicked. This event provides contextual information about the clicked hyperlink, enabling custom responses such as logging, conditional navigation, or user notifications. **Purpose** @@ -352,17 +384,18 @@ This event is designed for observing hyperlink interactions and executing custom **Event Arguments** -The [HyperlinkClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html) includes the following properties: +The [`HyperlinkClickEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html) includes the following properties: | Event Arguments | Description | |----------------|-------------| -| Uri | Represents the hyperlink destination, which may be an external web URL (e.g., `https://example.com`) or an internal sheet reference. This value reflects the actual navigation target of the hyperlink. This value is read only. | -| CellAddress | Specifies the cell location where the hyperlink resides. The address is provided in A1 notation (e.g., `A1`, `B5`), indicating the exact position of the hyperlink in the worksheet. This value is read only. | -| DisplayText | Defines the visible text shown in the cell for the hyperlink. This user-friendly label may differ from the actual hyperlink address and is useful for identifying the link's purpose or context. This value is read only.| +| Uri | Represents the hyperlink destination, which may be an external web URL (e.g., `https://example.com`) or an internal sheet reference. This value reflects the actual navigation target of the hyperlink. This value is read-only. | +| CellAddress | Specifies the cell location where the hyperlink resides. The address is provided in A1 notation (e.g., `A1`, `B5`), indicating the exact position of the hyperlink in the worksheet. This value is read-only. | +| DisplayText | Defines the visible text shown in the cell for the hyperlink. This user-friendly label may differ from the actual hyperlink address and is useful for identifying the link's purpose or context. This value is read-only. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -382,9 +415,9 @@ The [HyperlinkClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.B { // Track hyperlink usage. Console.WriteLine($"Hyperlink clicked at {args.CellAddress}: {args.Uri}"); - + // Handle special URLs or sheet references differently. - if (args.Hyperlink.StartsWith("https://restricted")) + if (args.Uri != null && args.Uri.StartsWith("https://restricted")) { // Implement custom handling for restricted sites. // For example, show a warning or redirect elsewhere. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/illustrations.md b/Document-Processing/Excel/Spreadsheet/Blazor/illustrations.md index 047ad03bc0..91823dbcfc 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/illustrations.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/illustrations.md @@ -1,7 +1,7 @@ --- layout: post title: Illustrations in Blazor Spreadsheet component | Syncfusion -description: Checkout and learn here about the Illustrations in the Syncfusion Blazor Spreadsheet component and more. +description: Check out and learn about illustrations in the Syncfusion Blazor Spreadsheet component and enhance spreadsheets with visual content. platform: document-processing control: Spreadsheet documentation: ug @@ -9,26 +9,79 @@ documentation: ug # Images and Illustrations in Blazor Spreadsheet Component -Syncfusion Blazor Spreadsheet component allows you to insert images directly into worksheet to enhance visual presentation and provide additional context alongside data. Images such as logos, screenshots, diagrams, or illustrations can be placed within a sheet, positioned as needed, resized, selected, or removed. +The Syncfusion Blazor Spreadsheet component lets you insert images into a worksheet to enhance visual presentation and provide additional context alongside data. Images such as logos, screenshots, diagrams, or illustrations can be placed within a sheet, positioned as needed, resized, selected, or removed. -Images can be controlled using the [AllowImage](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.spreadsheet.sfspreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowImage) property, which is enabled by default. +Image support is controlled by the [`AllowImage`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowImage) property, which is enabled by default. Setting `AllowImage` to **false** hides the **Insert** tab's image-related options and prevents inserting new images from the Ribbon. -## Overview of Images and Illustrations Operations +## Supported Image Formats -The Blazor Spreadsheet component also provides a range of features for working with images and illustrations. Below is a quick overview of each feature, with links to their respective documentation sections: +The Blazor Spreadsheet component accepts the following image formats for insertion: -* **Insert and Position Images**: Add images to your spreadsheet and place them at the desired location. +* PNG (`image/png`) +* JPEG / JPG (`image/jpeg`) +* GIF (`image/gif`) -* **Resize Images**: Change the height and width of images to fit your needs. +## Disabling image support -* **Delete Images**: Remove images that are no longer required from your spreadsheet. +The example below shows how to disable image support across the Spreadsheet: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + +## Working with images and illustrations + +The Blazor Spreadsheet component provides a range of features for working with images and illustrations. Each subsection below describes how to perform the operation from the UI. + +### Inserting images + +To insert an image into the active sheet: + +1. Select the cell near the desired top-left placement location. +2. Go to the **Insert** tab in the Ribbon. +3. Click **Image** in the toolbar to open the file picker. +4. Select an image file (PNG, JPEG, BMP, GIF, WEBP, or SVG) and confirm. +5. The image is inserted at the selection and can be moved by dragging it to a new position. + +### Resizing images + +To resize an image that is already inserted in the sheet: + +1. Click the image to select it and reveal the selection handles. +2. Drag any of the edge handles to adjust the width or height. +3. To maintain the aspect ratio, drag a corner handle. + +### Deleting images + +To remove an image from the active sheet: + +1. Click the image to select it. +2. Press the **Delete** key, or right-click the image and choose the standard delete option from the context menu. + +### Selecting images + +To select or deselect images on the sheet: + +1. Click a single image to select it. +2. Hold **Ctrl** (or **Shift** for a contiguous range) and click additional images to build a multi-selection. +3. Click an empty area of the sheet to clear the selection. -* **Position Images**: Select one or multiple images for further actions or deselect them as needed. ![Images in Blazor Spreadsheet](./images/image-feature.gif) -## Limitations of Image +## Known limitations + +The following limitations apply to the image support in the Blazor Spreadsheet component: -* Corner resizing option is not available in the image element. -* Copy and paste of external images. -* Programmatic operations for image manipulation are currently not available. \ No newline at end of file +* Corner resize handles are not available on inserted images. Resizing must be performed using edge handles or pre-sized in the source file. +* Copying and pasting external images is not supported. Images can be inserted through the **Insert** tab, but pasted image content is not retained. +* Programmatic insertion, resizing, repositioning, and deletion of images through the `SfSpreadsheet` API are not currently available. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/merge-cell.md b/Document-Processing/Excel/Spreadsheet/Blazor/merge-cell.md index 44776f29b2..bfe4170a67 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/merge-cell.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/merge-cell.md @@ -1,17 +1,30 @@ --- layout: post -title: Merge cells in Blazor Spreadsheet component | Syncfusion -description: Checkout and learn all about the comprehensive merge functionality in Syncfusion Blazor Spreadsheet component and much more. +title: Merge cells in the Blazor Spreadsheet component | Syncfusion +description: Check out and learn all about the comprehensive merge functionality in Syncfusion Blazor Spreadsheet component and much more. platform: document-processing control: Spreadsheet documentation: ug --- -# Merge cells in Blazor Spreadsheet component +# Merge cells in the Blazor Spreadsheet component -Merging cells in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component allows you to combine adjacent cells into a single larger cell, improving layout and readability. This feature is commonly used to create headers, section labels, or grouped content for a structured view. To control this functionality, use the [AllowMerge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowMerge) property, which enables or disables merge cell support in the Spreadsheet. The default value of the [AllowMerge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowMerge) property is true. +Merging cells in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component allows you to combine adjacent cells into a single larger cell, improving the layout and readability. This feature is commonly used to create headers, section labels, or grouped content for a structured view. To control this functionality, use the [AllowMerge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowMerge) property, which enables or disables merge cell support in the Spreadsheet. The default value of the [AllowMerge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowMerge) property is true. -N> When [AllowMerge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowMerge) is set to **`false`**, merge options are **disabled** in the Ribbon. API methods related to merging will also be inactive. Additionally, if the **worksheet is protected**, the merging feature is disabled. For more information, refer to the [Worksheet Protection](./protection#protect-sheet) documentation. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + +N> When [AllowMerge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowMerge) is set to **`false`**, merge options are **disabled** in the Ribbon. API methods related to merging are inactive. Additionally, if the **worksheet is protected**, the merging feature is disabled. For more information, refer to the [Worksheet Protection](./protection#protect-sheet) documentation. ## Merge operations @@ -30,12 +43,14 @@ N> The **Merge Cell** button is disabled when a single unmerged cell is selected ### Merge cells via UI -- Select a range of cells to merge. -- Click on **Merge Cell** drop-down in the ribbon. -- Choose one of the following option: - - **Merge & Center** - - **Merge Across** - - **Merge Cells** +To merge cells through the Ribbon UI, follow these steps: + +1. Select a range of cells to merge. +2. In the **Home** tab of the Ribbon, click the **Merge Cell** drop-down. +3. Choose one of the following options: + - **Merge & Center** + - **Merge Across** + - **Merge Cells** ![merge cells](./images/merge-cells.gif) @@ -47,16 +62,21 @@ N> Clicking the **Merge Cells** button (not the drop-down) applies the default a ### Merge cells programmatically -The [MergeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_MergeAsync_Syncfusion_Blazor_Spreadsheet_MergeType_System_String_) method merges cells based on the specified merge type. If the **cellRange** parameter is not provided, the current selection is used. This method provides a programmatic way to merge cells without using the UI. The available parameters in the [MergeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_MergeAsync_Syncfusion_Blazor_Spreadsheet_MergeType_System_String_) method are: +The [MergeAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_MergeAsync_Syncfusion_Blazor_Spreadsheet_MergeType_System_String_) method merges cells based on the specified [MergeType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.MergeType.html). If the **cellRange** parameter is not provided, the current selection is used. The available parameters are: -| Parameter | Type | Description | -| -- | -- | -- | -| mergeType | **MergeType** | Specifies the merge behavior.

The default **MergeType** is `MergeType.Cells`. Supported values:
• `Cells` - Merge the entire selection into one cell and preserve the top-left value;
• `Center`- Merge the entire selection and horizontally center the resulting cell’s content;
• `Across` - For each row in the selection, merge the cells across columns and preserve each row’s first cell value. | -| cellRange | string (optional) | Specifies the A1-style address of the range to unmerge (e.g., `"A1:D1"`). If not provided, the currently selected range will be unmerged. | +- **mergeType** (`MergeType`, required): Specifies the merge behavior. +- **cellRange** (`string`, optional): Specifies the A1-style address of the range to merge (e.g., `"A1:D1"`). If not provided, the currently selected range will be merged. + +**Supported `MergeType` values** + +- `MergeType.Cells` (default): Merge the entire selection into one cell and preserve the top-left value. +- `MergeType.Center`: Merge the entire selection, and horizontally center the resulting cell's content. +- `MergeType.Across`: For each row in the selection, merge the cells across columns and preserve each row's first cell value. {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -91,10 +111,10 @@ The [MergeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreads private async Task MergeAndCenterRange() { - // Merge the range and center-align the merged cell’s content + // Merge the range and center-align the merged cell's content await SpreadsheetInstance.MergeAsync(MergeType.Center, "A1:D1"); } - + } {% endhighlight %} @@ -104,15 +124,17 @@ The [MergeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreads ### Unmerge cells via UI -- Select a range of cells to unmerge. -- Click on **Merge Cell** drop-down in the ribbon. -- Choose **Unmerge cells** option. +To unmerge cells through the Ribbon UI, follow these steps: + +1. Select a range of cells to unmerge. +2. In the **Home** tab of the Ribbon, click the **Merge Cell** drop-down. +3. Choose the **Unmerge cells** option. ![unmerge cells](./images/unmerge-cells.gif) -### Unmerge cells programmatically. +### Unmerge cells programmatically -The [UnmergeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_UnmergeAsync_System_String_) method reverses a merge and restores individual cells. If the **cellRange** parameter is not provided, the current selection cell is unmerged. This method provides a programmatic way to unmerge cells without using the UI. The available parameters in the [UnmergeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_UnmergeAsync_System_String_) method are: +The [UnmergeAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_UnmergeAsync_System_String_) method reverses a merge and restores individual cells. If the **cellRange** parameter is not provided, the current selection is unmerged. The available parameters are: | Parameter | Type | Description | | -- | -- | -- | @@ -121,6 +143,7 @@ The [UnmergeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Sprea {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -151,7 +174,7 @@ The [UnmergeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Sprea ## Limitations of Merge -When merging cells in the Blazor Spreadsheet, certain constraints apply to ensure data integrity. In these cases, validation messages are displayed: +The Blazor Spreadsheet enforces these merge constraints to ensure data integrity. In these cases, validation messages are displayed: - **Sorting with merged cells** - When sorting a range that contains merged cells, a validation dialog appears to indicate that sorting cannot proceed unless all merged cells are consistent in size. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md b/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md index 28fb11ac77..64c0c6e279 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md @@ -419,7 +419,7 @@ Import the required namespaces at the top of the file: Add the below code example to download the `Google Drive` file using the Drive API, convert the stream to a byte array, and bind it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DataSource) property. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} @page "/" @@ -746,7 +746,7 @@ In Blazor WebAssembly, to preserve fonts in exported PDF use the `CustomFont` pr @using Syncfusion.Blazor.Spreadsheet - + diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/protection.md b/Document-Processing/Excel/Spreadsheet/Blazor/protection.md index 28e1a17803..385679ef81 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/protection.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/protection.md @@ -1,19 +1,19 @@ --- layout: post title: Protection in Blazor Spreadsheet Component | Syncfusion -description: Learn how to protect and unprotect worksheets and workbooks in the Syncfusion Blazor Spreadsheet component, both through the UI and more. +description: Learn how to protect and unprotect worksheets and workbooks in the Syncfusion Blazor Spreadsheet component, through the UI and programmatically. platform: document-processing control: Spreadsheet documentation: ug --- -# Protect Sheet in Blazor Spreadsheet component +# Protection in Blazor Spreadsheet component -Sheet protection is used to prevent unauthorized modification of data within the sheet. +Sheet and workbook protection are used to prevent unauthorized modification of data within a sheet or the structure of a workbook. ## Sheet Protection -The **Protect Sheet** support helps prevent accidental changes such as editing, moving, or deleting data. Protection can be applied with or without a password, depending on the level of security required. +The **Protect Sheet** support helps prevent accidental changes such as editing, moving, or deleting data. Protection is applied using the default protection settings. ### Protecting a sheet via the UI @@ -22,40 +22,104 @@ The active sheet can be protected using any of the following ways: * Navigate to the **Review** tab in the Ribbon and select **Protect Sheet**. * Right-click the sheet's tab in the bottom bar and select **Protect Sheet** from the context menu. -In the **Protect Sheet** dialog, you can set a password and specify which actions users are allowed to perform. +In the **Protect Sheet** dialog, perform the following steps: + +1. Open the **Sheet Options** tab and select or deselect the actions that users are allowed to perform while the sheet is protected. +2. Click **OK** to apply the protection. ![Protected Sheet Dialog](./images/protect-sheet.gif) -### Unlock particular cell or ranges in the protected sheet via the UI +### Protecting a sheet programmatically + +The Spreadsheet component supports protecting a specific worksheet through the [ProtectSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ProtectSheetAsync_System_String_) method. This method protects a named sheet using the default protection settings. No password is applied, so any user with access to the workbook can unprotect the sheet. + +**Declaration** + +```csharp +public Task ProtectSheetAsync(string sheetName = null) +``` + +The available parameters are: + +| Parameter | Type | Description | +|-------------|--------|-------------| +| sheetName | string (optional, default **null**) | Specifies the name of the sheet to protect. Sheet name comparison is case-insensitive. If **null** or empty, the entire workbook (all sheets and the workbook structure) is protected instead. | + +**Examples** + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + + public byte[] DataSourceBytes { get; set; } + + public SfSpreadsheet SpreadsheetInstance; + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task ProtectHandler() + { + // Protect a specific sheet by name. + await SpreadsheetInstance.ProtectSheetAsync("Sheet1"); + + // Protect multiple sheets individually. + await SpreadsheetInstance.ProtectSheetAsync("DataSheet"); + await SpreadsheetInstance.ProtectSheetAsync("Summary"); + } +} + +{% endhighlight %} +{% endtabs %} + +### Unlocking specific cells or ranges in a protected sheet via the UI To allow editing of specific cells or ranges in a protected sheet: * Open the **Protect Sheet** dialog. - * Navigate to the **Unlock Range** tab. - -* Select the desired cell(s) or range(s) that should remain editable, even when the sheet is protected. These cells will not be locked and can be modified while other parts of the sheet remain restricted. +* Select **New** to add an unlocked range, and perform the following steps: + 1. Enter a unique **Range Name** for the unlocked range. + 2. Enter the cell reference (for example, `B2:D5`) in the **Refers to** field, or select the range directly on the sheet. + 3. Optionally, enter a password in the **Range Password** field to require authentication before the range can be edited. Re-enter the password to confirm. + 4. Click **OK** to add the unlocked range to the protected sheet. +* Select the desired unlocked range(s) in the dialog to keep them editable while the rest of the sheet remains restricted. ![Unlocked Ranges - Protected Sheet UI](./images/unlocked-range.gif) +### Unlocking specific cells or ranges programmatically + +Unlocked ranges for a protected sheet are configured through the protected-range APIs on the spreadsheet. Each unlocked range is associated with a name, a cell reference, and an optional password. + ### Protection settings in a protected sheet -By default, when a sheet is protected, most actions such as formatting, inserting, sorting, and filtering are restricted, while selecting cells remains allowed. +By default, when a sheet is protected, the actions listed below are restricted while cell selection and navigation remain allowed. The allowed-action set can be customized per sheet from the **Sheet Options** tab of the **Protect Sheet** dialog. To enable specific functionalities while the sheet is protected: * Open the **Protect Sheet** dialog from the **Review** tab. - * In the dialog, navigate to the **Sheet Options** tab to view available protection settings. - * Select or deselect the desired options to allow or restrict specific actions. - * Click **OK** to apply the protection settings. -The available protection settings in Spreadsheet are: +The available protection settings in the Spreadsheet are listed below. Each setting applies to the sheet that is currently protected; settings are not shared between sheets in a workbook. | Options | Description | -|------------------------|---------| +|--------|-------------| | Select Cells | Allows cell selection. | | Format Cells | Allows cell formatting. | | Format Rows | Allows row formatting. | @@ -70,42 +134,189 @@ The available protection settings in Spreadsheet are: ## Unprotect Sheet -The **Unprotect Sheet** support restores access to all actions that were previously restricted by sheet protection. Once unprotected, the sheet allows full interaction, including editing, formatting, inserting, and deleting content. +The **Unprotect Sheet** support restores access to all actions that were previously restricted by sheet protection. Once unprotected, users can edit, format, insert, and delete content. -### Unprotecting sheets via the UI +### Unprotecting a sheet via the UI -In the active sheet, the sheet unprotection can be done by any of the following ways: +In the active sheet, sheet unprotect can be performed using any of the following ways: * Select **Unprotect Sheet** from the **Review** tab in the Ribbon toolbar. +* Right-click the sheet tab and select **Unprotect Sheet** from the context menu. + +When the sheet is protected with a password, perform the following steps: + +1. Select **Unprotect Sheet** from the Ribbon or the context menu to open the **Unprotect Sheet** dialog. +2. Enter the password that was set when the sheet was protected. +3. Click **OK** to unprotect. -* Right-click the sheet tab context menu option and select **Unprotect Sheet** from the context menu. +When the sheet is protected without a password, no password entry is required and the sheet is unprotected immediately. ![Unprotected Sheet Dialog](./images/unprotect-sheet.png) -## Protect Workbook +### Unprotecting a sheet programmatically + +The [UnprotectSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_UnprotectSheetAsync_System_String_) method removes protection from a specific worksheet. + +**Declaration** + +```csharp +public Task UnprotectSheetAsync(string sheetName = null) +``` + +The available parameters are: + +| Parameter | Type | Description | +|-------------|--------|-------------| +| sheetName | string (optional, default **null**) | Specifies the name of the sheet to unprotect. Sheet name comparison is case-insensitive. If **null** or empty, the entire workbook protection (structure and all sheets) is removed instead. | + +**Examples** + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + -The **Protect Workbook** support restricts structural modifications within a workbook. Actions such as inserting, deleting, renaming, or hiding sheets are disabled when this protection is enabled. Protection can be configured with or without a password, depending on the desired level of security. + + + -### Protecting workbooks via the UI +@code { + + public byte[] DataSourceBytes { get; set; } + + public SfSpreadsheet SpreadsheetInstance; + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task UnprotectHandler() + { + // Unprotect a specific sheet by name. + await SpreadsheetInstance.UnprotectSheetAsync("Sheet1"); + + // Unprotect multiple sheets individually. + await SpreadsheetInstance.UnprotectSheetAsync("DataSheet"); + await SpreadsheetInstance.UnprotectSheetAsync("Summary"); + } +} + +{% endhighlight %} +{% endtabs %} + +## Workbook Protection + +The **Workbook Protection** support restricts structural modifications within a workbook. Actions such as inserting, deleting, renaming, or hiding sheets are disabled when this protection is enabled. + +### Protecting a workbook via the UI To protect the workbook: * Go to the **Review** tab in the Ribbon toolbar. - -* Select **Protect Workbook**, enter and confirm the desired password, and then click **OK** to apply the protection. +* Select **Protect Workbook**, and then click **OK** to apply the protection. ![Protected Workbook Dialog](./images/protect-workbook.gif) +### Protecting a workbook programmatically + +Workbook protection is applied through the same [ProtectSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ProtectSheetAsync_System_String_) method, called with a `null` or empty `sheetName` argument. When no sheet name is provided, the entire workbook (all sheets and the workbook structure) is protected using the default protection settings. No password is applied, so any user with access to the workbook can unprotect it. + +**Examples** + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + + public byte[] DataSourceBytes { get; set; } + + public SfSpreadsheet SpreadsheetInstance; + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task ProtectWorkbookHandler() + { + // Protects the entire workbook (structure and all sheets) using the default protection settings. + await SpreadsheetInstance.ProtectSheetAsync(); + } +} + +{% endhighlight %} +{% endtabs %} + ## Unprotect Workbook The **Unprotect Workbook** support enables structural modifications within a workbook. Once unprotected, actions such as inserting, deleting, renaming, moving, copying, hiding, or unhiding sheets become available. -### Unprotecting workbooks via the UI +### Unprotecting a workbook via the UI To unprotect the workbook: * Select **Unprotect Workbook** from the **Review** tab in the Ribbon toolbar. - -* Enter the correct password in the dialog box, then click **OK**. +* When the workbook is protected with a password, perform the following steps: + 1. Enter the correct password in the **Unprotect Workbook** dialog. + 2. Click **OK** to apply the unprotection. +* When the workbook is protected without a password, no password entry is required and the workbook is unprotected immediately. ![Unprotected Workbook Dialog](./images/unprotect-workbook.png) + +### Unprotecting a workbook programmatically + +Workbook unprotection is applied through the same [UnprotectSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_UnprotectSheetAsync_System_String_) method, called with a `null` or empty `sheetName` argument. When no sheet name is provided, all workbook structure protection is removed. + +**Examples** + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + + public byte[] DataSourceBytes { get; set; } + + public SfSpreadsheet SpreadsheetInstance; + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task UnprotectWorkbookHandler() + { + // Removes protection from the entire workbook (structure and all sheets). + await SpreadsheetInstance.UnprotectSheetAsync(); + } +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/rows-and-columns.md b/Document-Processing/Excel/Spreadsheet/Blazor/rows-and-columns.md index 8f50e9befe..18c14b7fcb 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/rows-and-columns.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/rows-and-columns.md @@ -1,7 +1,7 @@ --- layout: post title: Rows and columns in Blazor Spreadsheet component | Syncfusion -description: Checkout and learn here all about Rows and columns in the Syncfusion Blazor Spreadsheet component and more. +description: Check out and learn all about rows and columns in the Syncfusion Blazor Spreadsheet component and more. platform: document-processing control: Spreadsheet documentation: ug @@ -9,10 +9,10 @@ documentation: ug # Rows and columns in Blazor Spreadsheet component -[Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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, +The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) is a tabular format consisting of rows and columns. The intersection of a row and a column is called a cell. The operations that you can perform on rows and columns include, -* Insert -* Setting Column and Row Count +* Insert +* Setting Row and Column Count ## Insert @@ -20,21 +20,38 @@ You can insert rows or columns anywhere in a spreadsheet. ### Row -The rows can be inserted in the following ways, +You can insert rows in the following ways, -* Using [`InsertRowAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertRowAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_RowPosition_) method, you can insert the rows once the component is loaded. +* Using the [InsertRowAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertRowAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_RowPosition_) method, you can insert rows once the component is loaded. * Using context menu, insert the rows in the desired position. The following code example shows the options for inserting rows in the spreadsheet. +#### InsertRowAsync parameters + +| Parameter | Type | Description | +| -- | -- | -- | +| startIndex | int | The zero-based row index where the insertion begins. | +| rowCount | int | The number of rows to insert. | +| sheet | string \| int (Optional) | The target sheet. Pass a `string` to use the sheet name or an `int` to use the sheet index. If omitted, the active sheet is used. | +| position | Enum | The position relative to `startIndex`. Valid values are `Above` and `Below`. Default: `Above`. | + +#### RowPosition enum values + +| Member | Description | +| -- | -- | +| `Above` | Inserts the rows above the `startIndex` row. | +| `Below` | Inserts the rows below the `startIndex` row. | + {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons - + @@ -48,7 +65,7 @@ The following code example shows the options for inserting rows in the spreadshe DataSourceBytes = File.ReadAllBytes(filePath); } - public async Task InsertRowsHandler() + public async Task InsertRowsHandler() { // Insert 2 rows above row index 0 in the active sheet await SpreadsheetInstance.InsertRowAsync(0, 2); @@ -67,24 +84,43 @@ The following code example shows the options for inserting rows in the spreadshe {% endhighlight %} {% endtabs %} +N> If the `sheet` parameter is `null` or omitted, the operation targets the active sheet. When the `sheet` parameter is an `int`, the value is treated as the zero-based sheet index (for example, `3` targets the fourth sheet in the workbook). + ### Column -The columns can be inserted in the following ways, +You can insert columns in the following ways, -* Using [`InsertColumnAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertColumnAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_ColumnPosition_) method, you can insert the columns once the component is loaded. -* Using context menu, insert the columns in the desired position. +* Using the [InsertColumnAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertColumnAsync_System_Int32_System_Int32_System_Object_Syncfusion_Blazor_Spreadsheet_ColumnPosition_) method, you can insert columns once the component is loaded. +* Using context menu, insert the columns in the desired position.* The following code example shows the options for inserting columns in the spreadsheet. +#### InsertColumnAsync parameters + +| Parameter | Type | Description | +| -- | -- | -- | +| startIndex | int | The zero-based column index where the insertion begins. | +| columnCount | int | The number of columns to insert. | +| sheet | string \| int (Optional) | The target sheet. Pass a `string` to use the sheet name or an `int` to use the sheet index. If omitted, the active sheet is used. | +| position | Enum | The position relative to `startIndex`. Valid values are `Left` and `Right`. Default: `Right`. | + +#### ColumnPosition enum values + +| Member | Description | +| -- | -- | +| `Left` | Inserts the columns to the left of the `startIndex` column. | +| `Right` | Inserts the columns to the right of the `startIndex` column. | + {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons - - + + @code { @@ -116,30 +152,38 @@ The following code example shows the options for inserting columns in the spread {% endhighlight %} {% endtabs %} -## Setting Row and Column Count +N> If the `sheet` parameter is `null` or omitted, the operation targets the active sheet. When the `sheet` parameter is an `int`, the value is treated as the zero-based sheet index (for example, `3` targets the fourth sheet in the workbook). -The Blazor Spreadsheet component enables you to define the initial number of rows and columns using the [`RowCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RowCount) and [`ColumnCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ColumnCount) properties. +### Inserting rows and columns via the context menu -* The default `RowCount` is **1000**. -* The default `ColumnCount` is **200**. +To insert rows or columns using the right-click context menu: -### Rendering Behavior +1. Right-click the row header (for rows) or column header (for columns) at the position where the new row or column should appear. +2. Choose **Insert Rows Above**, **Insert Rows Below**, **Insert Columns to the Left**, or **Insert Columns to the Right**, depending on the desired position. +3. The new rows or columns are inserted at the selected position with formatting inherited from the adjacent cells. -- **Without Data Source:** +N> When the sheet is protected, **Insert Rows Above**, **Insert Rows Below**, **Insert Columns to the Left**, and **Insert Columns to the Right** are available only when the **Insert Rows** or **Insert Columns** permission is enabled in the protection sheet option settings. - - When no data is bound to the spreadsheet, the sheet renders empty cells up to the specified row and column counts. +## Setting Row and Column Count + +The Blazor Spreadsheet component enables you to define the initial number of rows and columns using the [`RowCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RowCount) and [`ColumnCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ColumnCount) properties. -- **With Data Source (e.g., byte array or imported file):** +* The default `RowCount` is **1000**. +* The default `ColumnCount` is **200**. - - If the data source contains fewer rows and columns than the specified row and column counts, the spreadsheet renders additional empty rows and columns to meet those counts. - - If the data source contains more rows and columns than the specified row and column counts, the spreadsheet renders enough rows and columns to display all the data (i.e., it extends beyond those counts to fit the data). Your data is never truncated by these properties. +### Rendering Behavior +* **Without Data Source:** When no data is bound to the spreadsheet, the sheet renders empty cells up to the specified row and column counts. +* **With Data Source (e.g., byte array or imported file):** + * If the data source contains fewer rows and columns than the specified row and column counts, the spreadsheet renders additional empty rows and columns to meet those counts. + * If the data source contains more rows and columns than the specified row and column counts, the spreadsheet extends beyond the counts to fit the data. These properties never truncate data. You can set these properties as follows: {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/selection.md b/Document-Processing/Excel/Spreadsheet/Blazor/selection.md index 25c36d0306..66ad5d1a69 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/selection.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/selection.md @@ -1,7 +1,7 @@ --- layout: post title: Selection in Blazor Spreadsheet Component | Syncfusion -description: Learn about the comprehensive selection functionality in the Syncfusion Blazor Spreadsheet component, including programmatic and UI-driven methods. +description: Learn about selection features in the Syncfusion Blazor Spreadsheet component, including SelectRangeAsync and UI-based selection options. platform: document-processing control: Spreadsheet documentation: ug @@ -9,84 +9,104 @@ documentation: ug # Selection in Blazor Spreadsheet Component -The selection feature in the spreadsheet component enables interactive highlighting and manipulation of cells, rows, or columns for data analysis and editing operations. The functionality offers intuitive mouse and keyboard interactions for efficient data management. +The selection feature in the spreadsheet component enables interactive highlighting and manipulation of cells, rows, or columns for data analysis and editing operations. The component supports both mouse and keyboard interactions. -The Blazor Spreadsheet provides multiple selection options to manage and analyze data effectively: +The Blazor Spreadsheet provides the following selection options: -* **Cell Selection**: Select individual cells or range of cells for data manipulation -* **Row Selection**: Select entire rows for row-based operations -* **Column Selection**: Select entire columns for column-based operations +* **Cell Selection**: Select individual cells or a range of cells. +* **Row Selection**: Select entire rows. +* **Column Selection**: Select entire columns. -**Accessing selection via the UI** +## Selection via the UI -In the active sheet, selection can be performed using any of the following ways: +In the active sheet, selection can be performed in any of the following ways. -* **Using Mouse Interaction**: +* **Mouse Interaction**: * Click a cell to select it. * Click and drag to select a range of cells. - * Click a row or column header to select the entire row or column. + * Click a row header to select that row. + * Click a column header to select that column. + * Click and drag across row headers to select adjacent rows. + * Click and drag across column headers to select adjacent columns. + * Hold **Shift** and click a row or column header to extend the selection to that header. + * Hold **Ctrl** and click additional row or column headers to add non-adjacent rows or columns to the selection. -* **Using Keyboard Navigation**: - * Use **Arrow** keys to navigate between cells - * Use **Shift + Arrow** keys for range selection - * Use **Ctrl + Click** for non-adjacent selections +* **Keyboard Navigation**: + * Use **Arrow** keys to navigate between cells. + * Use **Shift + Arrow** keys for range selection. + * Use **Ctrl + Click** for non-adjacent cell selections. + * Use **Ctrl + Shift + Arrow** keys to extend a selection to the next non-empty cell in the direction of the arrow. -* **Using Name Box**: Enter a cell reference (e.g., `C5`) or a range (`A1:E5`) and press **Enter** key to select the specified range. +* **Name Box**: Enter a cell reference (for example, `C5`) or a range (for example, `A1:E5`) in the Name Box and press **Enter** to select the specified range. The Name Box can be focused by clicking it directly; on most browsers, the cell reference can also be typed immediately after pressing **F2** in some spreadsheet-like applications. + +### Clearing a selection + +To clear an active selection: + +* Press any **Arrow** key to move the selection to a single cell. +* Click a single cell outside the selected range. +* Press **Escape** while a range is selected to revert the selection to the active cell. +* Press **Ctrl + Shift + Space** to select the entire sheet. + +When the active worksheet is protected, selection is restricted to the cells that have been marked as selectable in the worksheet protection configuration. For more details, refer to the [Worksheet Protection](./protection#protect-sheet) documentation. ## Cell Selection -The Blazor Spreadsheet component allows selecting individual cells or ranges of cells for various data operations. Cell selection forms the foundation of most Spreadsheet interactions and serves as the basis for data entry and formatting. +The Blazor Spreadsheet component allows selecting individual cells or ranges of cells for various data operations. Cell selection forms the foundation of most Spreadsheet interactions and is the basis for data entry and formatting. -The single cell selection mode allows users to focus on a specific cell for data entry or formatting tasks. Range selection enables multiple adjacent cells to be selected for batch operations such as formatting, data entry, or calculations. Multiple range selection provides the ability to select non-adjacent cells or ranges, making it possible to apply operations to scattered data within the sheet. +* **Single cell selection** focuses on a specific cell for data entry or formatting tasks. +* **Range selection** enables multiple adjacent cells to be selected for batch operations such as formatting, data entry, or calculations. +* **Multiple range selection** selects non-adjacent cells or ranges, making it possible to apply operations to scattered data within the sheet. **Selecting ranges via the UI** To select non-adjacent ranges: -* Select the first cell or range using any of the above ways -* Hold **Ctrl** and click additional cells or drag to select additional ranges -* Each selected range is highlighted independently -* The **Name Box** displays the first selected cell reference +1. Select the first cell or range using any of the above methods. +2. Hold **Ctrl** and click additional cells, or drag to select additional ranges. +3. Each selected range is highlighted independently. +4. The **Name Box** displays the first selected cell reference. ## Row selection -The row selection feature allows entire rows to be selected for operations such as formatting or insertion. This selection type is especially useful when working with complete records or data entries. Rows can be selected individually or as multiple row groups. +The row selection feature allows entire rows to be selected for operations such as formatting or insertion. This selection type is especially useful when working with complete records or data entries. **Selecting rows via the UI** The row selection operation can be performed using the following methods: -* **Adjacent rows**: Click the first row header, then drag to the last desired row header -* **Adjacent rows with keyboard**: Click the first row header, then hold **Shift** key and click the last row header -* **Non-adjacent rows**: Hold **Ctrl** key while clicking individual row headers -* **Range with keyboard**: Use **Shift + Arrow** keys after selecting the initial row +* **Adjacent rows**: Click the first row header, then drag to the last desired row header. +* **Adjacent rows with keyboard**: Click the first row header, then hold **Shift** and click the last row header. +* **Non-adjacent rows**: Hold **Ctrl** while clicking individual row headers. +* **Range with keyboard**: Use **Shift + Arrow** keys after selecting the initial row. ## Column selection -The column selection feature allows entire columns to be selected for operations such as formatting and sorting. This selection type is essential for working with data fields or attributes. Columns can be selected individually or as multiple column groups. +The column selection feature allows entire columns to be selected for operations such as formatting and sorting. This selection type is essential for working with data fields or attributes. **Selecting columns via the UI** The column selection operation can be performed using the following methods: -* **Adjacent columns**: Click the first column header, then drag to the last desired column header -* **Adjacent columns with keyboard**: Click the first column header, then hold **Shift** and click the last column header -* **Non-adjacent columns**: Hold **Ctrl** while clicking individual column headers -* **Range with keyboard**: Use **Shift + Arrow** keys after selecting the initial column +* **Adjacent columns**: Click the first column header, then drag to the last desired column header. +* **Adjacent columns with keyboard**: Click the first column header, then hold **Shift** and click the last column header. +* **Non-adjacent columns**: Hold **Ctrl** while clicking individual column headers. +* **Range with keyboard**: Use **Shift + Arrow** keys after selecting the initial column. -## Implementing Selection Programmatically +## Programmatic Selection The Spreadsheet component supports programmatic selection for cells, rows, and columns using the [SelectRangeAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SelectRangeAsync_System_String_) method. This method accepts various range formats and selection patterns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons - + @@ -94,7 +114,7 @@ The Spreadsheet component supports programmatic selection for cells, rows, and c public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef { get; set; } + public SfSpreadsheet SpreadsheetInstance { get; set; } protected override void OnInitialized() { @@ -102,9 +122,9 @@ The Spreadsheet component supports programmatic selection for cells, rows, and c DataSourceBytes = File.ReadAllBytes(filePath); } - public async Task SelectRangeHandler() + public async Task SelectRangeOnSheet() { - await SpreadsheetRef.SelectRangeAsync("A5:GR5"); + await SpreadsheetInstance.SelectRangeAsync("A5:GR5"); } } diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/sorting.md b/Document-Processing/Excel/Spreadsheet/Blazor/sorting.md index 00cb0f52d5..04e60d59b4 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/sorting.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in Blazor Spreadsheet Component | Syncfusion -description: Learn how to perform data sorting in the Blazor Spreadsheet component, including multi-column sorting, custom sort orders, and more. +description: Learn how to perform data sorting in the Blazor Spreadsheet component, including single-column sorting, filter-dialog sort options, and programmatic sort APIs. platform: document-processing control: Spreadsheet documentation: ug @@ -9,14 +9,31 @@ documentation: ug # Sorting in Blazor Spreadsheet Component -The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component provides built-in sorting functionality that enables users to organize worksheet data in either ascending or descending order. This feature helps improve readability and simplifies data analysis by arranging content according to selected columns. The sorting behavior is controlled by the [`AllowSorting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowSorting) property, which is set to `true` by default. When [`AllowSorting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowSorting) is set to `false`, all sorting options are removed from the interface, including the Ribbon and Context Menu, and related API methods become inactive. Additionally, sorting is disabled if the worksheet is protected. For more information on worksheet protection, refer to the [worksheet protection documentation](./protection#protect-sheet). +The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component provides built-in sorting functionality that enables users to organize worksheet data in either ascending or descending order. This feature helps improve readability and simplifies data analysis by arranging content according to selected columns. The sorting behavior is controlled by the [`AllowSorting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowSorting) property, which is set to **true** by default. When [`AllowSorting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowSorting) is set to **false**, all sorting options are removed from the interface, including the Ribbon and Context Menu, and related API methods become inactive. Additionally, sorting is disabled if the worksheet is protected. For more information on worksheet protection, refer to the [worksheet protection documentation](./protection#protect-sheet). -## Sort Operations +## Disabling sorting -The component supports two types of sort orders that help organize data for analysis and presentation: +The example below shows how to disable sorting across the entire Spreadsheet: -* **Ascending**: Arranges data from lowest to highest (e.g., A to Z, 0 to 9). -* **Descending**: Arranges data from highest to lowest (e.g., Z to A, 9 to 0). +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + +## Sort operations + +The component supports two sort orders that help organize data for analysis and presentation: + +* **Ascending** - Arranges data from smallest to largest (e.g., **A → Z**, **0 → 9**, **earliest → latest date**). +* **Descending** - Arranges data from largest to smallest (e.g., **Z → A**, **9 → 0**, **latest → earliest date**). ### Sort via UI @@ -52,29 +69,33 @@ If filtering is enabled, sorting can also be performed using the filter dialog. ![Sort option via Filter Dialog](./images/filter-dialog-sort.gif) -### Sort by active cell +### Used range + +The **used range** is the rectangular block of cells that contain data (or formatting) in a worksheet. When a sort operation is performed without an explicitly selected range, the component automatically identifies the used range of the active worksheet and applies the sort across that range. If the active sheet is empty, sorting has no effect. -When a sort operation is performed without an explicitly selected range, the component automatically identifies the **used range** of the worksheet. The used range includes all contiguous cells that contain data. Sorting is applied to this entire range using the column of the **active cell** as the sort key. +### Sort by active cell -The **sort key** is the column whose values determine the order of the rows during sorting. It compares the values in this column and rearranges the rows accordingly. +When a sort operation is performed through the UI without an explicitly selected range, the component automatically identifies the **used range** of the worksheet. Sorting is applied to this entire range using the column of the **active cell** as the sort key - the column whose values determine the order of the rows during sorting. This behavior ensures that the entire dataset is sorted cohesively, preserving row integrity and preventing data misalignment. **Example** -If the **active cell** is located in **Column C** and no range is selected, it's sorts all rows within the used range based on the values in **Column C**. +If the **active cell** is located in **Column C** and no range is selected, it sorts all rows within the used range based on the values in **Column C**. -### Sorting a Selected Range +### Sorting a selected range -When a specific cell range is selected, the sort operation is restricted to that range. The column of the active cell within the selected range is used as the sort key. This method allows for targeted sorting of a subset a data without affecting the rest of the worksheet. +When a specific cell range is selected in the UI, the sort operation is restricted to that range. The column of the active cell within the selected range is used as the sort key. This method allows for targeted sorting of a subset of data without affecting the rest of the worksheet. **Example** If the range **B2:D10** is selected and the active cell is in **Column D**, the component sorts only the rows within **B2:D10** based on the values in **Column D**. -### Sort via programmatically +### Sort programmatically + +The programmatic API lets you trigger a sort from code, for example from a toolbar button, a context-menu action, or after data is loaded. Use the API when the sort order must be determined by application logic rather than direct user interaction. -The [SortRangeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SortRangeAsync_System_String_Syncfusion_Blazor_Spreadsheet_SortDirection_) method enables sorting of a specified range of cells based on the values in a specific column. This method provides a programmatic way to sort data without using the UI. The available parameters in the `SortRangeAsync` method are: +The [SortRangeAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SortRangeAsync_System_String_Syncfusion_Blazor_Spreadsheet_SortDirection_) method enables sorting of a specified range of cells based on the values in a specific column. This method provides a programmatic way to sort data without using the UI. The available parameters in the `SortRangeAsync()` method are: | **Parameter** | **Type** | **Description** | |-------------------|----------------------------|-----------------| @@ -84,9 +105,11 @@ The [SortRangeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spr {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons - + diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/ui-builder-skill.md b/Document-Processing/Excel/Spreadsheet/Blazor/ui-builder-skill.md index 26890b7f4a..a286ccb078 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/ui-builder-skill.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/ui-builder-skill.md @@ -24,10 +24,12 @@ Before installing Blazor UI Builder Skill with Spreadsheet, ensure the following - Required [Node.js](https://nodejs.org/en) version ≥ 18 - **Agent Package Manager** (APM) installed — follow [Installation Guidelines](https://microsoft.github.io/apm/quickstart/#1-install-apm) - A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) -- Active Syncfusion® license(any of the following): +- Syncfusion Blazor Spreadsheet and Themes NuGet packages referenced in your project (the skill can recommend dependencies, but they must be installed before running the app) +- Active Syncfusion® license (any of the following): - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense) - [Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +- Syncfusion license key registered in your application. See [Licensing](https://blazor.syncfusion.com/documentation/licensing) for registration steps. ## Key Benefits @@ -61,13 +63,13 @@ Before installing Blazor UI Builder Skill with Spreadsheet, ensure that APM (Age ### Verify APM Installation -Run the following command to confirm APM is installed: +Run the following command to confirm APM is installed (skip this step if you already verified APM in the Prerequisites section): ```bash apm --version ``` -### Install the Syncfusion® Blazor UI Builder Skill with Spreadsheet package using APM +### Install the Skill using APM Use the APM CLI to install the Blazor UI Builder Skill with Spreadsheet for your preferred environment: @@ -102,18 +104,20 @@ After installation, the following artifacts are added to your project for the Gi - `.agent/skills/` – contains the skill files - `.github/agents/` – contains the agent configuration -Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets. +For other targets (Cursor, Codex, Claude), skill and agent files are added to their respective agent configuration locations. Refer to the APM [targets documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets. > For [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/custom-agents#predefined-agents), use the Copilot command above to install the Blazor UI Builder. +After installing the skill, run `dotnet restore` to ensure all Syncfusion Blazor packages referenced by the generated components are available in your project. + ## How the Syncfusion® Blazor UI Builder Skill Works with Spreadsheet 1. **Intent Analysis** - Parse the user's prompt to identify Spreadsheet features, data sources, and high-level layout intent. 2. **Project Detection** - Automatically detects project framework, package manager, existing themes, and Spreadsheet configuration. -3. **Component Mapping** - Map intent to Syncfusion® Spreadsheet and components and required feature modules. +3. **Component Mapping** - Map intent to Syncfusion® Spreadsheet components and their required feature modules. 4. **Theming & Design System** Load required theming guidelines and confirm key design choices: - - CSS framework (Tailwind, Bootstrap, Material, or Greenfield (custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option—proceed with this or change the theme as preferred. + - CSS framework (Tailwind, Bootstrap, or Material). If no theme is detected in the existing project, use Greenfield (Syncfusion's custom-theme system) with the Syncfusion Tailwind3 theme as the default. Proceed with the default or change the theme as preferred. - Syncfusion theme (Tailwind3, Bootstrap5, Material3, Fluent2) - Light and Dark Mode - Core design basics (colors, spacing, typography, responsiveness, accessibility) @@ -145,6 +149,8 @@ To start using the skill: ![Set Agent](./images/blazor-ui-builder.png) 3. Start prompting the agent with a clear description of your Spreadsheet UI requirements. +> Restart your IDE or reload the window if the newly installed agent does not appear in the Agent dropdown. + > For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly. **Example Prompts:** @@ -154,7 +160,7 @@ To start using the skill: Build a financial dashboard spreadsheet with quarterly revenue data. Add custom formulas for totals and growth percentages. Use a professional layout with clearly labeled headers. {% endpromptcard %} {% promptcard Employee Directory %} -Create a employee directory using blazor spreadsheet component with columns for Product, Name, and Department. Populate with realistic sample data across departments. Maintain a clean, organized tabular layout with proper formatting, aligned columns, and consistent spacing. +Create an employee directory using the Blazor Spreadsheet component with columns for Name, Department, and Email. Populate with realistic sample data across departments. Maintain a clean, organized tabular layout with proper formatting, aligned columns, and consistent spacing. {% endpromptcard %} {% endpromptcards %} @@ -162,21 +168,21 @@ Create a employee directory using blazor spreadsheet component with columns for ## Best Practices -Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result: +Follow these guidelines to get the most out of UI Builder and ensure high-quality, production-ready results: - **Stay consistent** - Maintain consistent file organization, naming conventions, and coding standards throughout your project. -- **Use advanced AI models** - For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations. +- **Use advanced AI models** - For best results, use **Claude Sonnet 4.5 or higher** capability models to produce better code quality and more accurate implementations. - **Review all content and assets before production** - Validate the data sources, formulas, and logic. Ensure compatibility with your existing systems and data models before deployment. Test edge cases and large datasets. ## Troubleshooting -- **APM installation failure**: Refer to this [documentation](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting) +- **APM installation failure**: Refer to this [documentation](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting). - **Skills not loading**: Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE. - **Component not rendering**: Retry generation using the specific component skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured. -- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application. +- **Syncfusion license banner appears**: Register and validate your Syncfusion® license key in the application. See [Licensing](https://blazor.syncfusion.com/documentation/licensing) for detailed steps. ## FAQ @@ -197,3 +203,5 @@ The skill proposes changes and requires confirmation for insertion; automatic de - [Agent Skills Standards](https://agentskills.io/home) - [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start/) +- [Syncfusion Blazor Licensing](https://blazor.syncfusion.com/documentation/licensing) + \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/undo-redo.md b/Document-Processing/Excel/Spreadsheet/Blazor/undo-redo.md index bca88d987d..9812289ea0 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/undo-redo.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/undo-redo.md @@ -1,7 +1,7 @@ --- layout: post title: Undo and Redo in Blazor Spreadsheet Component | Syncfusion -description: Checkout and learn here all about undo and redo functionality in Syncfusion Blazor Spreadsheet component and much more. +description: Check out and learn about the undo and redo functionality in the Syncfusion Blazor Spreadsheet component. platform: document-processing control: Spreadsheet documentation: ug @@ -9,21 +9,22 @@ documentation: ug # Undo and Redo in Blazor Spreadsheet Component -The **Undo** and **Redo** functionality in the Blazor Spreadsheet component allows users to reverse or reapply recent actions. It maintains a history of spreadsheet operations, encouraging experimentation with data and formatting while preserving the ability to restore previous states. +The **Undo** and **Redo** functionality in the Blazor Spreadsheet component allows users to reverse or reapply recent actions. It maintains a history of spreadsheet operations, encouraging experimentation while preserving the ability to restore previous states. Undo and Redo are supported for most common operations, including: + * Cell editing and formatting * Structural changes (e.g., inserting or deleting rows/columns) -* Data manipulation (e.g., sorting and filtering) +* Data operations (e.g., sorting and filtering) * Resizing rows and columns The keyboard shortcuts **Ctrl + Z** for Undo and **Ctrl + Y** for Redo provide quick access without requiring interaction with the user interface. -N> The undo and redo history is limited to **25 operations** to optimize memory usage; once this limit is reached, older actions are automatically discarded. Additionally, the history is cleared when worksheet protection is enabled. +N> The undo and redo history is limited to the built-in history size to optimize memory usage; once this limit is reached, older actions are automatically discarded. Additionally, the history is cleared when [worksheet protection](./protection#protect-sheet) is enabled. ## Undo -The **Undo** operation reverses the most recent action performed within the Spreadsheet, restoring the previous state of the component and enabling safe modifications to content and formatting. End users can perform the undo operation through the user interface (UI) in the following ways: +The **Undo** operation reverses the most recent action performed within the Spreadsheet, restoring the previous state of the component and enabling safe modifications to content and formatting. End users can undo through the UI in the following ways: * Click the **Undo** button located in the **Home** tab of the **Ribbon** to reverse the latest operation. * Use the keyboard shortcut **Ctrl + Z** for a quick way to undo the last action. @@ -32,13 +33,92 @@ The **Undo** operation reverses the most recent action performed within the Spre N> The **Undo** button is automatically disabled when there are no reversible operations available. + + +### Undo Programmatically + +The undo action can also be performed programmatically by calling the [Undo()](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.spreadsheet.sfspreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_Undo) method on the `SfSpreadsheet` instance. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + public SfSpreadsheet SpreadsheetInstance; + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task PerformUndo() + { + // Reverses the most recent action in the active worksheet. + await SpreadsheetInstance.Undo(); + } +} + +{% endhighlight %} +{% endtabs %} + ## Redo -The **Redo** operation reapplies an action that was previously undone, allowing end users to move forward through the operation history and restore both data and interface states. Redo actions can be performed via the user interface in the following ways: +The **Redo** operation reapplies an action that was previously undone, allowing end users to move forward through the operation history. Redo actions can be performed via the user interface in the following ways: -* Click the **Redo** button located in the **Home** tab of the **Ribbon** to reapply the most recently undone operation. -* Use the keyboard shortcut **Ctrl + Y** for quick access to redo the last undone action. +* Click the **Redo** button located in the **Home** tab of the **Ribbon** to reapply the most recently undone operation. +* Use the keyboard shortcut **Ctrl + Y** for quick access to redo the last undone action. ![UI showing redo option](./images/redo-feature.png) -N> The **Redo** button is automatically disabled when no actions are available to reapply or when a cell is in edit mode. The redo history is cleared whenever a new action is performed after an undo. +N> The **Redo** button is automatically disabled when no actions are available to reapply or when a cell is in edit mode.The redo history is cleared whenever a new action is performed after an undo. + +N> In some browsers, **Ctrl + Y** opens the browser history. If the shortcut does not trigger redo, click inside the Spreadsheet area before pressing the shortcut. + +### Redo Programmatically + +The redo action can also be performed programmatically by calling the [Redo()](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.spreadsheet.sfspreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_Redo) method on the `SfSpreadsheet` instance. + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + public SfSpreadsheet SpreadsheetInstance; + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } + + public async Task PerformRedo() + { + // Reapplies the most recently undone action in the active worksheet. + await SpreadsheetInstance.Redo(); + } +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/worksheet.md b/Document-Processing/Excel/Spreadsheet/Blazor/worksheet.md index a999293881..95b230b8bc 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/worksheet.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/worksheet.md @@ -1,7 +1,7 @@ --- layout: post -title: Worksheet operations in Blazor Spreadsheet component | Syncfusion -description: Checkout and learn here about the comprehensive worksheet management functionalities in the Syncfusion Blazor Spreadsheet component and more. +title: Worksheet operations in Blazor Spreadsheet component |Syncfusion +description: Learn about the comprehensive worksheet management functionalities in the Syncfusion Blazor Spreadsheet component and more. platform: document-processing control: Spreadsheet documentation: ug @@ -21,19 +21,19 @@ The Insert sheet feature in the [Blazor Spreadsheet Editor](https://www.syncfusi To add or insert a new sheet using the UI, follow these steps: -* Click the `+` icon button in the **Sheet** tab. This will insert a new empty sheet next to current active sheet. +* Click the `+` icon button in the **Sheet** tab. This will insert a new empty sheet next to the current active sheet. ![Add sheet option](images/addsheet.png) -* Right-click on a **Sheet** tab, and then select **Insert** option from the context menu to insert a new empty sheet after the current active sheet. +* Right-click on a **Sheet** tab, and then select the **Insert** option from the context menu to insert a new empty sheet after the current active sheet. ![Insert sheet context menu](images/insert-sheet-option.png) ### Insert Sheet Programmatically -Use the [InsertSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertSheetAsync_System_Nullable_System_Int32__System_Int32_) method to add one or more sheets to a workbook programmatically. It supports two main scenarios: adding multiple sheets with default names or adding a single sheet with a user-defined name. Below are the details for each scenario, including code examples and parameter information. +Use the [InsertSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertSheetAsync_System_Nullable_System_Int32__System_Int32_) method to add one or more sheets to a workbook programmatically. It supports two main scenarios: adding multiple sheets with default names or adding a single sheet with a user-defined name. Below are the details for each scenario, including code examples and parameter information. **Insert multiple sheets at a specific index** -This method inserts one or more sheets at a specified position in the workbook with default names (e.g., Sheet1, Sheet2). For example, if the spreadsheet has three sheets named Sheet1, Sheet2, and Sheet3, adding two sheets at position 1 results in: Sheet1, Sheet4, Sheet5, Sheet2, Sheet3. If no position is provided, the sheets are added based on active sheet index. This is ideal for scenarios requiring multiple sheets, such as organizing large datasets or creating templates for repetitive tasks. +This method inserts one or more sheets at a specified position in the workbook. The new sheets are assigned default names based on the next sequential numbers that are not already used in the workbook (for example, Sheet1 and Sheet2 if available; otherwise, the next unused numbers such as Sheet4 and Sheet5 when Sheet1 through Sheet3 already exist). For example, if the spreadsheet has three sheets named Sheet1, Sheet2, and Sheet3, adding two sheets at position 1 results in: Sheet1, Sheet4, Sheet5, Sheet2, Sheet3. If no position is provided, the sheets are added based on active sheet index. This is ideal for scenarios requiring multiple sheets, such as organizing large datasets or creating templates for repetitive tasks. | Parameter | Type | Description | | -- | -- | -- | @@ -41,19 +41,20 @@ This method inserts one or more sheets at a specified position in the workbook w | count | int (optional) | The number of sheets to add. Defaults to 1 if not specified. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -64,28 +65,31 @@ This method inserts one or more sheets at a specified position in the workbook w public async Task InsertSheetHandler() { // Insert 2 sheets at index 1. - await SpreadsheetRef.InsertSheetAsync(1, 2); + await SpreadsheetInstance.InsertSheetAsync(1, 2); } } {% endhighlight %} {% endtabs %} +**Insert a single sheet with a user-defined name** -### Get Active Worksheet Programmatically - -The [GetActiveWorksheet](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_GetActiveWorksheet) method retrieves properties of the active worksheet. This method is useful when it is necessary to obtain details about the currently active sheet. If no worksheet is active, this method returns null. - -**Retrieve the active worksheet** +This method adds one sheet at a specific position with a user-defined name. Each call to this method adds only one sheet. Using meaningful names like "Budget" or "Inventory" makes the workbook easier to understand. If a negative index value is provided, the method will exit without adding any sheet. -This method retrieves details of the currently active worksheet. Properties of the active worksheet, such as sheet name, index, or selected range, can be accessed for diagnostics, automation, or integration with other logic. +| Parameter | Type | Description | +| -- | -- | -- | +| index | int | The zero-based index where the sheet will be inserted. If the specified index is invalid (e.g., negative or beyond the workbook's sheet count), no action occurs. | +| sheetName | string | The name for the new sheet. If the name already exists in the workbook, no action occurs. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" @using Syncfusion.Blazor.Spreadsheet - - + + + @@ -99,33 +103,41 @@ This method retrieves details of the currently active worksheet. Properties of t DataSourceBytes = File.ReadAllBytes(filePath); } - public async Task GetActiveWorksheet() + public async Task InsertSheetHandler() { - // Get the active sheet snapshot - var active = SpreadsheetInstance.GetActiveWorksheet(); + // Insert a sheet at index 1 with a user-defined name. + await SpreadsheetInstance.InsertSheetAsync(1, "Sales"); } } + {% endhighlight %} {% endtabs %} -### Get Worksheet Data Programmatically +## Get Active Worksheet -The [GetData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_GetData_System_String_) method retrieves content from the worksheet. This method provides data as a dictionary, where each entry consists of a cell address and its associated `CellData` object. The returned data includes the actual value, number format, display text, wrap and lock status, hyperlinks, and calculated style of each cell in the target area. If the specified cell address is invalid or not set, the method returns null. +The [GetActiveWorksheet](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_GetActiveWorksheet) method retrieves properties of the active worksheet. This method is useful when it is necessary to obtain details about the currently active sheet. If no worksheet is active, this method returns null. -**Retrieve cell or range data from an active worksheet** +**Retrieve the active worksheet** -Call this method by passing the desired cell or range as the address. For example, provide a reference such as "A1" for a single cell, "A2:B5" for a range, or "Sheet1!A2:B5" to target a range on a specific sheet. The result can be iterated to read individual cell data for further processing, logging, or custom display. +This method retrieves details of the currently active worksheet. Properties of the active worksheet, such as sheet name, index, or selected range, can be accessed for diagnostics, automation, or integration with other logic. -| Parameter | Type | Description | -| :-- | :-- | :-- | -| cellAddress | string | Specifies the cell or range to read. Supports addresses such as "A1", "A2:B5", or "Sheet1!A2:B5". If omitted or invalid, the return value is null. | +**Return value properties** + +The method returns an object describing the active worksheet. The following properties are available on the returned object: + +| Property | Type | Description | +| -- | -- | -- | +| Index | int | The zero-based index of the active worksheet within the workbook. | +| Name | string | The name of the active worksheet. | +| SelectedRange | string | The currently selected cell or range address in the active worksheet (for example, "A1" or "A2:B5"). | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - - + + @@ -139,38 +151,54 @@ Call this method by passing the desired cell or range as the address. For exampl DataSourceBytes = File.ReadAllBytes(filePath); } - public async Task GetData() + public void GetActiveWorksheet() { - // Get the cellData snapshot - var data = SpreadsheetInstance.GetData("Sheet2!D5:E6"); + // Get the active sheet snapshot + var active = SpreadsheetInstance.GetActiveWorksheet(); } } {% endhighlight %} {% endtabs %} -**Insert a single sheet with a user-defined name** +## Get Worksheet Data -This method adds one sheet at a specific position with a user-defined name. Each call to this method adds only one sheet. Using meaningful names like "Budget" or "Inventory" makes the workbook easier to understand. If a negative index value is provided, the method will exit without adding any sheet. +The [GetData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_GetData_System_String_) method retrieves content from the worksheet. This method provides data as a dictionary, where each entry consists of a cell address and its associated `CellData` object. The returned data includes the actual value, number format, display text, wrap and lock status, hyperlinks, and calculated style of each cell in the target area. If the specified cell address is invalid or not set, the method returns null. + +**Retrieve cell or range data from an active worksheet** + +Call this method by passing the desired cell or range as the address. For example, provide a reference such as "A1" for a single cell, "A2:B5" for a range, or "Sheet1!A2:B5" to target a range on a specific sheet. The result can be iterated to read individual cell data for further processing, logging, or custom display. | Parameter | Type | Description | +| :-- | :-- | :-- | +| cellAddress | string | Specifies the cell or range to read. Supports addresses such as "A1", "A2:B5", or "Sheet1!A2:B5". If omitted or invalid, the return value is null. | + +**CellData properties** + +Each entry in the returned dictionary maps a cell address to a `CellData` object that exposes the following properties: + +| Property | Type | Description | | -- | -- | -- | -| index | int | The zero-based index where the sheet will be inserted. If the specified index is invalid (e.g., negative or beyond the workbook's sheet count), no action occurs. | -| sheetName | string | The name for the new sheet. If the name already exist in workbook, no action occurs. | +| Value | object | The raw underlying value of the cell. | +| DisplayText | string | The value formatted as text, suitable for display. | +| NumberFormat | string | The number format string applied to the cell (for example, `0.00%` or `m/d/yyyy`). | +| Hyperlink | string | The hyperlink configured on the cell, or null if no hyperlink is set. | +| WrapText | bool | Indicates whether text wrapping is enabled for the cell. | +| isLocked | bool | Indicates whether the cell is locked when sheet protection is enabled. | +| Style | object | The calculated cell style, including font, fill, border, and alignment information for the cell. | {% tabs %} -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - - - + + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -178,13 +206,12 @@ This method adds one sheet at a specific position with a user-defined name. Each DataSourceBytes = File.ReadAllBytes(filePath); } - public async Task InsertSheetHandler() + public void GetData() { - // Insert a sheet at index 1 with a user-defined name. - await SpreadsheetRef.InsertSheetAsync(1, "Sales"); + // Get the cellData snapshot + var data = SpreadsheetInstance.GetData("Sheet2!D5:E6"); } } - {% endhighlight %} {% endtabs %} @@ -196,7 +223,7 @@ The Spreadsheet component supports removing sheets from a workbook. When the wor To remove a sheet using the user interface (UI), follow these steps: -1. Right-click a **Sheet** tab, and then select **Delete** option from the context menu. +1. Right-click a **Sheet** tab, and then select the **Delete** option from the context menu. ![Delete sheet option](images/delete-sheet-option.png) @@ -206,7 +233,7 @@ To remove a sheet using the user interface (UI), follow these steps: ### Delete Sheet Programmatically -Sheets can be deleted at a specific index using the [DeleteSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DeleteSheetAsync_System_Nullable_System_Int32__) method. It supports two main scenarios: delete sheet by index or delete sheet by name. Below are the details for each scenario, including code examples and parameter information. +Sheets can be deleted using the [DeleteSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DeleteSheetAsync_System_Nullable_System_Int32__) method (by index) or the [DeleteSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DeleteSheetAsync_System_String_) overload (by name). Below are the details for each scenario, including code examples and parameter information. **Delete sheet by index** @@ -217,19 +244,20 @@ This method removes a sheet at a specific index. It works best when the sheet lo | index | int (optional) | The zero-based index of the sheet to delete. If no index is provided, the active sheet is deleted. If the index is invalid (e.g., negative or beyond the workbook's sheet count) or the workbook has only one sheet, no action occurs. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -240,7 +268,7 @@ This method removes a sheet at a specific index. It works best when the sheet lo public async Task DeleteSheetHandler() { // Remove sheet at index 0. - await SpreadsheetRef.DeleteSheetAsync(0); + await SpreadsheetInstance.DeleteSheetAsync(0); } } @@ -256,19 +284,20 @@ This method removes a sheet that matches the given name. It helps when the exact | sheetName | string | The name of the sheet to delete. If the name does not exist or the workbook has only one sheet, no action occurs. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -279,7 +308,7 @@ This method removes a sheet that matches the given name. It helps when the exact public async Task DeleteSheetHandler() { // Remove sheet named "Sales". - await SpreadsheetRef.DeleteSheetAsync("Sales"); + await SpreadsheetInstance.DeleteSheetAsync("Sales"); } } @@ -288,9 +317,19 @@ This method removes a sheet that matches the given name. It helps when the exact ## Rename Sheet -The rename sheet feature allows assigning user-defined name to a sheet for better organization. Sheet names must be unique within the workbook, and renaming does not affect data or formulas. This feature is essential for improving workbook clarity, especially in complex workbooks with multiple sheets. +The rename sheet feature allows assigning a user-defined name to a sheet for better organization. Sheet names must be unique within the workbook, and renaming does not affect data or formulas. This feature is essential for improving workbook clarity, especially in complex workbooks with multiple sheets. -To rename a sheet: +**Sheet naming rules** + +When renaming a sheet through the user interface or programmatically, the new name must follow these Excel-compatible naming rules: + +* Maximum of 30 characters. +* Cannot contain any of the following characters: `\`, `/`, `?`, `*`, `[`, `]`. +* Cannot be blank. + +If any of these rules are violated when renaming programmatically, no action occurs. + +To rename a sheet through the user interface (UI): 1. Right-click a **Sheet** tab and select **Rename** from the context menu. @@ -310,7 +349,7 @@ Hiding sheets in the Spreadsheet component prevents unauthorized access or accid * Hidden sheets can still be referenced in formulas and calculations. -* Access the sheet selection menu to view all sheets, including hidden ones. +* Access the sheet selection menu to view all sheets, including hidden ones. Hidden sheets appear in a dimmed, disabled state within the sheet selection menu, clearly indicating that they are hidden. ![Hide sheet option](images/hide-sheet-option.png) @@ -328,9 +367,9 @@ The Spreadsheet component allows reordering sheets by moving them to different p To move a sheet using the user interface (UI), follow these steps: -* Click and hold on a **Sheet** tab, then drag it to the desired position. +1. Click and hold on a **Sheet** tab, then drag it to the desired position. -* Right-click on a **Sheet** tab and select **Move Left** or **Move Right** options from the context menu to reposition the sheet accordingly. +2. Right-click on a **Sheet** tab and select the **Move Left** or **Move Right** options from the context menu to reposition the sheet accordingly. N> **Move Right** is enabled only if a sheet exists to the right, and **Move Left** is enabled only if a sheet exists to the left. @@ -339,7 +378,7 @@ N> **Move Right** is enabled only if a sheet exists to the right, and **Move Lef ### Move Sheet Programmatically -The [MoveSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_MoveSheetAsync_System_Nullable_System_Int32__System_Int32_) method moves a sheet from one index to another programmatically. This method requires two parameters: the current zero-based index of the sheet to move and the destination zero-based index where the sheet will be placed. If either index is invalid (negative or beyond the sheet count), the method will not perform any action. +The [MoveSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_MoveSheetAsync_System_Nullable_System_Int32__System_Int32_) method moves a sheet from one index to another programmatically. This method requires two parameters: the current zero-based index of the sheet to move and the destination zero-based index where the sheet will be placed. If either index is invalid (negative or beyond the sheet count), the method will not perform any action. | Parameter | Type | Description | | -- | -- | -- | @@ -347,19 +386,20 @@ The [MoveSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spr | destinationIndex | int | The zero-based index where the sheet will be moved. If invalid, no action occurs. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -370,7 +410,7 @@ The [MoveSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spr public async Task MoveSheetHandler() { // Move sheet from index 0 to index 2. - await SpreadsheetRef.MoveSheetAsync(0, 2); + await SpreadsheetInstance.MoveSheetAsync(0, 2); } } @@ -389,7 +429,7 @@ To duplicate a sheet using the user interface (UI), simply right-click on the de ### Duplicate Sheet Programmatically -Use the [DuplicateSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DuplicateSheetAsync_System_Nullable_System_Int32__) method to duplicate a worksheet programmatically by specifying its index or name. The duplicated sheet is inserted immediately after the original sheet. Below are details for duplicating a sheet by index or by name, including parameter information and code examples. +Use the [DuplicateSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DuplicateSheetAsync_System_Nullable_System_Int32__) method to duplicate a worksheet programmatically by specifying its index or name. The duplicated sheet is inserted immediately after the original sheet. Below are details for duplicating a sheet by index or by name, including parameter information and code examples. **Duplicate sheet by index** @@ -400,19 +440,20 @@ This method creates a copy of the sheet at the specified index. If no index is p | index | int (optional) | The zero-based index of the sheet to duplicate. If no index is provided, the active sheet is duplicated. If the index is invalid (e.g., negative or beyond sheet count), no action occurs. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -423,7 +464,7 @@ This method creates a copy of the sheet at the specified index. If no index is p public async Task DuplicateSheetHandler() { // Duplicate the sheet at index 0. - await SpreadsheetRef.DuplicateSheetAsync(0); + await SpreadsheetInstance.DuplicateSheetAsync(0); } } @@ -439,19 +480,20 @@ This method creates a copy of the sheet with the specified name. The sheet name | `sheetName` | `string` | The name of the sheet to duplicate. If the name does not exist, no action occurs. | {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + @code { public byte[] DataSourceBytes { get; set; } - public SfSpreadsheet SpreadsheetRef; + public SfSpreadsheet SpreadsheetInstance; protected override void OnInitialized() { @@ -462,7 +504,7 @@ This method creates a copy of the sheet with the specified name. The sheet name public async Task DuplicateSheetHandler() { // Duplicates the sheet named "Sheet1". - await SpreadsheetRef.DuplicateSheetAsync("Sheet1"); + await SpreadsheetInstance.DuplicateSheetAsync("Sheet1"); } } @@ -471,8 +513,6 @@ This method creates a copy of the sheet with the specified name. The sheet name ## Gridlines -Gridlines provide a border-like appearance that helps distinguish cells on a worksheet. Gridlines can be shown or hidden through the Ribbon UI: - -- Navigate to the **View** tab in the Ribbon toolbar and select the **Hide Gridlines** option to hide gridlines in the active worksheet. +Gridlines provide a border-like appearance that helps distinguish cells on a worksheet. To hide gridlines, navigate to the **View** tab in the Ribbon toolbar and select the **Hide Gridlines** option; to show gridlines again, select the **Show Gridlines** option in the same tab, and these actions apply to the active worksheet. ![Hide Gridlines option](images/hide-gridlines-option.gif) \ No newline at end of file