diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/accessibility.md b/Document-Processing/Excel/Spreadsheet/Blazor/accessibility.md index 103732b05a..92cd30d055 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/accessibility.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/accessibility.md @@ -9,14 +9,15 @@ documentation: ug # Accessibility in Blazor Spreadsheet -The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA](https://www.w3.org/TR/wai-aria#roles) roles that are commonly used to evaluate accessibility. +The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA](https://www.w3.org/TR/wai-aria#roles) roles commonly used to evaluate accessibility. + -The accessibility compliance for the Spreadsheet component is outlined below. +The accessibility compliance for the Spreadsheet component is outlined below. The icons in the table indicate the level of compliance: a full check means all features meet the requirement, a partial check means some features do not, and a cross means the requirement is not met. Click any criterion to learn more about the standard.
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.
@@ -33,16 +34,16 @@ The accessibility compliance for the Spreadsheet component is outlined below. | [Axe-core Accessibility Validation](https://blazor.syncfusion.com/documentation/common/accessibility#ensuring-accessibility) | Intermediate | ## WAI-ARIA attributes -The Syncfusion Blazor Spreadsheet follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet accessibility standards. The following ARIA attributes are used in the Spreadsheet component: +The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet accessibility standards. The following ARIA attributes are used in the Spreadsheet component: | Attributes | Purpose | -|---------------|-------------| -| `role=textbox` | Identifies an element as an input field that allows text entry.| +|---|---| +| `role=textbox` | Identifies an element as an input field that allows text entry. | | `role=button` | Identifies an element that functions as a button. | | `role=combobox` | Identifies a component that combines a text input with a popup listbox or tree. | | `role=menu` | Defines a container for a collection of choices or commands presented in a contextual or dropdown format. | | `role=alert` | Designates an element that displays important, time-sensitive information. | -| `aria-label`| This attribute describes the accessible name for the interactive elements. | +| `aria-label` | This attribute describes the accessible name for the interactive elements. | | `aria-expanded` | Indicates whether a collapsible element (e.g., a dropdown) is currently expanded or collapsed. | | `aria-live` | Defines a region as "live", meaning its content updates dynamically. Values include "off", "polite" (waits until idle), or "assertive" (announces immediately). | | `aria-rowindex` | Defines the row index of a row with respect to the total number of rows in the Spreadsheet. | @@ -52,7 +53,7 @@ The Syncfusion Blazor Spreadsheet follows [WAI-ARIA](https://www.w3.org/WAI/ARIA ## Keyboard interaction -The Syncfusion Blazor Spreadsheet follows [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert#keyboardinteraction) guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet. +The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) follows [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert#keyboardinteraction) guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Spreadsheet. Clipboard @@ -80,7 +81,7 @@ The Syncfusion Blazor Spreadsheet follows [keyboard interaction](https://www.w3. | Windows | MAC | Actions | |-----|----- | -----| -| Page Up / Page Down | Fn + ↑ / ↓ |Scrolls up or down one screen at a time.| +| Page Up / Page Down | Page Up / Page Down (or Fn + ↑ / ↓ on older keyboards) |Scrolls up or down one screen at a time.| | Arrow keys | Arrow keys | Navigates between adjacent cells in the direction of the arrow key.| | Enter | Enter | Moves the active cell down one row.| | Shift + Enter | ⇧ + Enter | Moves the active cell up one row.| @@ -108,11 +109,11 @@ The Syncfusion Blazor Spreadsheet follows [keyboard interaction](https://www.w3. | Windows | MAC | Actions | |-----|----- | -----| -| Ctrl + Click | ⌘ + Click | Open the link in the selected cell.| +| Ctrl + Click | ⌘ + Click | Opens the link in the selected cell.| | Ctrl + K | ⌘ + K | Opens the hyperlink dialog to insert a new link or edit an existing one.| -> * The Command and Control keys on Mac devices can be interchanged. When this switch occurs, use the Command key in place of the Control key for the above listed key interactions with Mac devices. +N> The Command and Control keys on Mac devices can be interchanged. When this switch occurs, use the Command key in place of the Control key for the above listed key interactions with Mac devices. ## See also -* [Accessibility in Syncfusion Blazor](https://blazor.syncfusion.com/documentation/common/accessibility) +* [Accessibility in Syncfusion Blazor](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file 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..96087a6c39 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,13 +547,13 @@ 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**. | -| 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. | +| Event Arguments | Type | Description | +|---|---|---| +| ClipboardAction | string | Represents the clipboard action type. Values can be `Copy` or `Cut`. | +| CopiedRange | string | 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 | bool | Indicates whether the clipboard operation should be cancelled. Set to **true** to prevent the cut or copy action from proceeding. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -573,21 +593,21 @@ This event is applicable in scenarios that require control over paste operations **Event Arguments** -[PastingEventArgs]([Pasting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.PastingEventArgs.html)) includes the following properties: +[PastingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.PastingEventArgs.html) includes the following properties: -| Event Arguments | Description | -|----------------|-------------| -| ExternalClipboardData | An array of strings containing raw text data from external sources (like Excel or Google Sheets), with each element representing a row of data. Set to **null** when copying from within the workbook. | -| CopiedRange | A string in the format **"SheetName!Range"** (e.g., **"Sheet1!A1:A10"**) representing the source location of the copied or cut content. Set to **null** when pasting external content. | -| PasteRange | A string in the format **"SheetName!Range"** specifying the target cell range where content will be pasted. | -| Cancel | A boolean value that can be set to **true** to prevent the paste operation, allowing event handlers to control the paste behavior. The default value is **false**. | +| Event Arguments | Type | Description | +|---|---|---| +| ExternalClipboardData | string array | An array of strings containing raw text data from external sources (like Excel or Google Sheets), with each element representing a row of data. Set to **null** when copying from within the workbook. | +| CopiedRange | string | A string in the format **"SheetName!Range"** (e.g., **"Sheet1!A1:A10"**) representing the source location of the copied or cut content. Set to **null** when pasting external content. | +| PasteRange | string | A string in the format **"SheetName!Range"** specifying the target cell range where content will be pasted. | +| Cancel | bool | A boolean value that can be set to **true** to prevent the paste operation, allowing event handlers to control the paste behavior. The default value is **false**. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @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..472672560f 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 @@ -20,7 +33,7 @@ Cell editing can be initiated directly through the UI using any of the following - Use the **formula bar** to modify the cell's contents. - Press **BACKSPACE** or **SPACE** to clear the cell and begin editing. -> For additional keyboard shortcuts related to cell editing, refer to the [Keyboard Shortcuts](./accessibility#keyboard-shortcuts) documentation. +N> For additional keyboard shortcuts related to cell editing, refer to the [Keyboard Shortcuts](./accessibility#keyboard-shortcuts) documentation. ## Update 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..513cc275ec 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,10 +9,41 @@ 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. + +## 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 + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } +} + + +{% endhighlight %} +{% endtabs %} + +## Enable filtering via Ribbon + Filtering can be accessed through the user interface using the following method: - Select the **Home** tab in the **Ribbon**. @@ -145,7 +176,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 +193,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 +208,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 +224,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 +237,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 +247,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 +269,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 +278,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 +312,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 +321,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 +351,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 +391,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 +407,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 +455,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..0f714ea4e0 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,15 +94,15 @@ N> Named Ranges can be defined only for cells or ranges that contain values. To edit a Named Range: -* Open the **Name Manager** dialog. +1. Open the **Name Manager** dialog. -* Select the Named Range to be edited. +2. Select the Named Range to be edited. -* Click the **Edit** icon. +3. Click the **Edit** icon. -* Modify the name, range, or scope as needed. +4. Modify the name, range, or scope as needed. -* Click the **Update Range** button, then click **OK** button to save changes. +5. Click the **Update Range** button, then click **OK** to save changes. To delete a Named Range: @@ -103,7 +116,20 @@ N> Deleting a Named Range used in formulas may cause formula errors. Ensure the ## 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 +143,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 @@ -284,7 +310,7 @@ Returns the test for independence

CHOOSE

-Chooses a value from a list of values

+Returns a value from a list of values

CHOOSECOLS

@@ -407,7 +433,7 @@ DEC2BIN

Converts a decimal number to binary

-DECHEX

+DEC2HEX

Converts a decimal number to hexadecimal

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

EXACT

-Checks to see if two text values are identical

+Returns TRUE if two text values are identical

EXP

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

+Returns e raised to the power of a given number

EXPONDIST

@@ -511,12 +537,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

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

FLOOR

@@ -527,6 +553,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

@@ -543,7 +573,7 @@ GAMMAINV

Returns the inverse of the gamma cumulative distribution

-GAMMALIN

+GAMMALN

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

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

GESTEP

-Tests whether a number is greater than a threshold value

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

GROWTH

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

HLOOKUP

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

+Returns a value from the top row of an array

HOUR

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

IF

-Specifies a logical test to perform

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

IFERROR

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

+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

+Returns a value that corresponds to the first TRUE condition

IMABS

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

IMPRODUCT

-Returns the product of from 2 to 29 complex numbers

+Returns the product of 2 to 29 complex numbers

IMREAL

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

INDEX

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

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

INDIRECT

@@ -727,7 +757,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 +773,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

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

LAMBDA

-Allows to use own formula parameters and logic

+Returns a custom reusable formula

LARGE

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

LOOKUP

-Looks up values in a vector or array

+Returns a value from a vector or array

LOWER

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

MATCH

-Looks up values in a reference or array

+Returns a value from a reference or array

MAX

@@ -879,7 +905,7 @@ MODE

Returns the most common value in a data set

-MMONTH

+MONTH

Converts a serial number to a month

@@ -887,7 +913,7 @@ MROUND

Returns a number rounded to the desired multiple

-MULTINOMINAL

+MULTINOMIAL

Returns the multinomial of a set of numbers

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

STDEV

-Estimates standard deviation based on a sample

+Returns the standard deviation based on a sample

STDEVA

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

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

STDEVP

-Calculates standard deviation based on the entire population

+Returns the standard deviation based on the entire population

STDEVPA

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

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

STEYX

@@ -1179,6 +1205,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

@@ -1200,7 +1230,7 @@ Returns the sum of squares of differences of corresponding values in two arrays< 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.

+Returns a result corresponding to the first matching value in a list

SYD

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

TEXT

-Formats a number and converts it to text

+Returns a number as text in a specified format

TEXTBEFORE

@@ -1228,7 +1258,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

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

TEXTSPLIT

@@ -1255,7 +1285,7 @@ TOROW

Transforms an array into a single row

-TRANSPORSE

+TRANSPOSE

Returns the transpose of an array

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

-Estimates variance based on a sample

+Returns the variance based on a sample

VARA

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

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

VARP

-Calculates variance based on the entire population

+Returns the variance based on the entire population

VARPA

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

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

VDB

@@ -1312,7 +1342,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

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

WEEKDAY

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

TRUE

Returns the logical value TRUE

- + \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md index f96575242f..fb09e285d8 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md @@ -266,7 +266,7 @@ You can also experiment directly using the interactive playground below for a qu To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). -N> [View Sample In GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet). +N> [View Sample In GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet). N> Looking for the full Blazor Spreadsheet Editor component overview, features, pricing, and documentation? Visit the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) page diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md index c6cf40d28b..a06a22d98d 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md @@ -251,7 +251,7 @@ You can also experiment directly using the interactive playground below for a qu To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). -N> [View Sample In GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet). +N> [View Sample In GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet). N> Looking for the full Blazor Spreadsheet Editor component overview, features, pricing, and documentation? Visit the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) page diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/hyperlink.md b/Document-Processing/Excel/Spreadsheet/Blazor/hyperlink.md index d0e5e34d7f..334c68f3fb 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 @@ -13,11 +13,29 @@ Hyperlinks in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreads 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 %} + +## Hyperlink destinations + +Hyperlinks can point to the following destinations: -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 @@ -142,6 +162,8 @@ Hyperlinks can be edited through the user interface (UI) using any of the follow ![Edit hyperlink using Ribbon](images/edit-hyperlink-using-ribbon.gif) +N> 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. + **Using the Context Menu** - Right-click the cell containing the hyperlink. @@ -151,23 +173,25 @@ 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) -> 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 +200,7 @@ Hyperlinks can be removed programmatically by using the [RemoveHyperlinkAsync]( {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -203,22 +228,22 @@ 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 %} @@ -245,16 +270,17 @@ This event is useful for scenarios where hyperlink behavior needs to be controll 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 | -|----------------|-------------| -| Uri | Represents the hyperlink destination, which can be a web URL or an internal sheet reference in the format **"SheetName!CellReference"**. This value can be modified to redirect the hyperlink to a different location. | -| CellAddress | Specifies the cell location where the hyperlink will be inserted. The address must be specified using A1 notation (e.g., `A1`, `B5`). | -| DisplayText | Defines the visible text shown in the cell for the hyperlink. This can be customized to provide a user-friendly label, distinct from the actual hyperlink destination. | -| Cancel | Indicates whether the hyperlink creation should be aborted. Setting this property to **true** prevents the hyperlink from being added, allowing for conditional validation or restriction logic. | +| Event Arguments | Type | Description | +|---|---|---| +| Uri | string | Represents the hyperlink destination, which can be a web URL or an internal sheet reference in the format **"SheetName!CellReference"**. This value can be modified to redirect the hyperlink to a different location. | +| CellAddress | string | Specifies the cell location where the hyperlink will be inserted. The address must be specified using A1 notation (e.g., `A1`, `B5`). | +| DisplayText | string | Defines the visible text shown in the cell for the hyperlink. This can be customized to provide a user-friendly label, distinct from the actual hyperlink destination. | +| Cancel | bool | Indicates whether the hyperlink creation should be aborted. Setting this property to **true** prevents the hyperlink from being added, allowing for conditional validation or restriction logic. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -307,15 +333,16 @@ This event is useful for scenarios where actions need to be taken after a hyperl The [HyperlinkCreatedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) includes the following properties: -| Event Arguments | Description | -|----------------|-------------| -| Uri | Represents the hyperlink destination, which can be either an external web URL (e.g., `https://example.com`) or an internal sheet reference. This value is read-only and reflects the final destination of the hyperlink. | -| CellAddress | Specifies the cell location where the hyperlink has been inserted. The address is provided in A1 notation (e.g., `A1`, `B5`), and indicates 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 providing descriptive or meaningful link text. This value is read-only. | +| Event Arguments | Type | Description | +|---|---|---| +| Uri | string | Represents the hyperlink destination, which can be either an external web URL (e.g., `https://example.com`) or an internal sheet reference. This value is read-only and reflects the final destination of the hyperlink. | +| CellAddress | string | Specifies the cell location where the hyperlink has been inserted. The address is provided in A1 notation (e.g., `A1`, `B5`), and indicates the exact position of the hyperlink in the worksheet. This value is read-only. | +| DisplayText | string | 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 providing descriptive or meaningful link text. This value is read-only. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -354,15 +381,16 @@ This event is designed for observing hyperlink interactions and executing custom 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.| +| Event Arguments | Type | Description | +|---|---|---| +| Uri | string | 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 | string | 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 | string | 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 +410,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..78600a8bfd 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/illustrations.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/illustrations.md @@ -1,21 +1,38 @@ --- 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 --- -# Images and Illustrations in Blazor Spreadsheet Component +# Images 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 [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component lets you insert images into a worksheet to enhance visual presentation and provide additional context alongside data. Images such as logos, screenshots, diagrams, 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. -## Overview of Images and Illustrations Operations +## Disabling image support -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 example below shows how to disable image support across the Spreadsheet: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +{% endhighlight %} +{% endtabs %} + +## Overview of Image Operations + +The The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component also provides a range of features for working with images. Below is a quick overview of each feature. * **Insert and Position Images**: Add images to your spreadsheet and place them at the desired location. @@ -25,10 +42,13 @@ The Blazor Spreadsheet component also provides a range of features for working w * **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 -* 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 +The following limitations apply to the image support in the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor): + +* Corner resize handles are not available on inserted images. Resizing must be performed using edge handles. +* Copying and pasting external images is not supported. +* Programmatic operations for image manipulation are currently not available. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/merge-cell.md b/Document-Processing/Excel/Spreadsheet/Blazor/merge-cell.md index 44776f29b2..8d728ea6a8 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/merge-cell.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/merge-cell.md @@ -1,17 +1,32 @@ --- 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. +## Disabling Merge + +{% 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 +45,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 +64,17 @@ 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. 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: | 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. | +| mergeType | **MergeType** | Specifies the merge behavior.

The default **MergeType** is `MergeType.Cells`. Supported values:
• `MergeType.Cells` - 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. | | 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. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @@ -91,10 +109,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 +122,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 cell is unmerged. 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: | Parameter | Type | Description | | -- | -- | -- | @@ -121,6 +141,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 +172,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 Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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 607733574a..d9820e3d93 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md @@ -428,7 +428,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 "/" @@ -772,7 +772,7 @@ In Blazor WebAssembly, to preserve fonts in exported PDF use the `CustomFonts` p @using Syncfusion.Blazor.Spreadsheet - + diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/performance-metrics.md b/Document-Processing/Excel/Spreadsheet/Blazor/performance-metrics.md index 41a4bba24e..d92f387ba3 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/performance-metrics.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/performance-metrics.md @@ -1,16 +1,15 @@ --- layout: post -title: Performance Metrics in Blazor Spreadsheet Control | Syncfusion -description: Learn here all about performance metrics in the Blazor Spreadsheet control, including how it manages data, handles rendering speed and more. +title: Performance Metrics in Blazor Spreadsheet Component | Syncfusion +description: Learn about performance metrics in the Blazor Spreadsheet component, including rendering, styling, and file import/export. platform: document-processing -control: Performance +control: Spreadsheet documentation: ug --- -# Performance Metrics in blazor Spreadsheet Control - -Performance metrics show how efficiently the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) handles large datasets and core operations such as rendering, styling, number Formats and file import/export. This documentation provides the measured results for these operations to give a clear view of how the control performs under different workloads. +# Performance Metrics in Blazor Spreadsheet Component +Performance metrics show how efficiently the [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) handles large datasets and core operations such as rendering, styling, number formats, and file import/export. This documentation provides the measured results for these operations to give a clear view of how the component performs under different workloads. ## Environment @@ -28,50 +27,47 @@ The following environment configuration is used for performance evaluation: ## Spreadsheet Features -This section outlines the operations evaluated in the Spreadsheet when working with large datasets. It covers actions such as rendering cells, applying styles, number formats and file import/export to help understand how the control processes common spreadsheet tasks. - -### Server +This section outlines the operations evaluated in the Spreadsheet when working with large datasets. It covers actions such as rendering cells, applying styles, applying number formats, and file import/export to help understand how the component processes common spreadsheet tasks. -| Operation | Dataset Size | Time (sec) | -|-----------------------------|--------------|-------------| -| Initial Rendering | 250k cells | 1.31 sec | -| Applying Styles | 250k cells | 12.0 sec | -| Applying Number Formats | 250k cells | 0.97 sec | +### Blazor Server +| Operation | Dataset Size | Time (sec) | +|--|--|--| +| Initial Rendering | 250K cells | 1.31 | +| Applying Styles | 250K cells | 12.0 | +| Applying Number Formats | 250K cells | 0.97 | -### Wasm +### Blazor WebAssembly (Wasm) -| Operation | Dataset Size | Time (sec) | -|-----------------------------|--------------|-------------| -| Initial Rendering | 250k cells | 6.99 sec | -| Applying Styles | 250k cells | 15.98 sec | -| Applying Number Formats | 250k cells | 9.45 sec | +| Operation | Dataset Size | Time (sec) | +|--|--|--| +| Initial Rendering | 250K cells | 6.99 | +| Applying Styles | 250K cells | 15.98 | +| Applying Number Formats | 250K cells | 9.45 | - -## Import and export performance metrics +## Import and Export Performance Metrics This section focuses on evaluating how the Spreadsheet handles file import and export operations involving large datasets with formatting and validation. It provides insight into how efficiently these operations are processed under varying data conditions. -### Server - -| Operation | Dataset Size | Time (sec) | -|-----------------------------------------|-----------------------------------|------------| -| Importing | 250k cells without formats | 2.35 sec | -| Importing | 250k cells with formats | 3.12 sec | -| Exporting | 250k cells without formats | 1.07 sec | -| Exporting | 250k cells with formats | 1.26 sec | +### Blazor Server -### Wasm +| Operation | Dataset Size | Time (sec) | +|--|--|--|--| +| Importing | 250K cells without formats | 2.35 | +| Importing | 250K cells with formats | 3.12 | +| Exporting | 250K cells without formats | 1.07 | +| Exporting | 250K cells with formats | 1.26 | +### Blazor WebAssembly (Wasm) -| Operation | Dataset Size | Time (sec) | -|-----------------------------------------|-----------------------------------|------------| -| Importing | 250k cells without formats | 38 sec | -| Importing | 250k cells with formats | 50 sec | -| Exporting | 250k cells without formats | 6.25 sec | -| Exporting | 250k cells with formats | 8.14 sec | +| Operation | Dataset Size | Time (sec) | +|--|--|--|--| +| Importing | 250K cells without formats | 38 | +| Importing | 250K cells with formats | 50 | +| Exporting | 250K cells without formats | 6.25 | +| Exporting | 250K cells with formats | 8.14 | -> **Disclaimer:**  Performance metrics and memory benchmarking are based on internal tests under specific conditions. Actual results may vary depending on the environment and usage. +N> **Disclaimer:**  Performance metrics and memory benchmarking are based on internal tests under specific conditions. Actual results may vary depending on the environment and usage. ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/protection.md b/Document-Processing/Excel/Spreadsheet/Blazor/protection.md index 28e1a17803..8d68abd53b 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/protection.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/protection.md @@ -1,46 +1,96 @@ --- 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 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. +* Go to the **Review** tab in the Ribbon and select **Protect Sheet**. -In the **Protect Sheet** dialog, you can set a password and specify which actions users are allowed to perform. +* Right-click the sheet's tab at the bottom of the workbook and select **Protect Sheet** from the context menu. + +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 [ProtectSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ProtectSheetAsync_System_String_) method protects a specific worksheet using the default protection settings. This method provides a programmatic way to protect a sheet without using the UI. The available parameters in the [ProtectSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ProtectSheetAsync_System_String_) method are: + +| Parameter | Type | Description | +|---|---|---| +| sheetName | string (optional, default **null**) | Specifies the name of the sheet to protect. 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 SfSpreadsheet SpreadsheetInstance; + + public async Task ProtectHandler() + { + // Protect a specific sheet by name. + await SpreadsheetInstance.ProtectSheetAsync("Sheet1"); + } +} + +{% endhighlight %} +{% endtabs %} + +### Unlocking cells or ranges via the UI To allow editing of specific cells or ranges in a protected sheet: -* Open the **Protect Sheet** dialog. +1. Open the **Protect Sheet** dialog from the **Review** tab in the Ribbon. + +2. Select the **Unlock Range** tab. -* Navigate to the **Unlock Range** tab. +3. Enter a unique **Range Name** in the corresponding field. -* 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. +4. Enter the cell reference (for example, `B2:D5`) in the **Range Value** field. + +5. Click **Add Range** to include the range in the unlocked-ranges list. + +6. Optionally, repeat steps 3–5 to add additional unlocked ranges. + +7. Click **OK** to apply the protection with the specified unlocked ranges. The selected ranges remain editable while the rest of the sheet stays protected. ![Unlocked Ranges - Protected Sheet UI](./images/unlocked-range.gif) ### 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: @@ -52,10 +102,10 @@ To enable specific functionalities while the sheet is protected: * 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 +120,158 @@ 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 a sheet via the UI + +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. + +* Right-click the sheet tab and select **Unprotect Sheet** from the context menu. + +To unprotect a sheet that was protected with a password: -### Unprotecting sheets via the UI +1. Select **Unprotect Sheet** from the Ribbon or the context menu to open the **Unprotect Sheet** dialog. -In the active sheet, the sheet unprotection can be done by any of the following ways: +2. Enter the password that was set when the sheet was protected. -* Select **Unprotect Sheet** from the **Review** tab in the Ribbon toolbar. +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. + +The available parameters are: + +| Parameter | Type | Description | +|---|---|---| +| sheetName | string (optional, default **null**) | Specifies the name of the sheet to unprotect. 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 SfSpreadsheet SpreadsheetInstance; + + public async Task UnprotectHandler() + { + // Unprotect a specific sheet by name. + await SpreadsheetInstance.UnprotectSheetAsync("Sheet1"); + } +} + +{% 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 + +The [ProtectSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ProtectSheetAsync_System_String_) method, when called with a `null` or empty `sheetName` argument, applies default protection settings to the entire workbook, including all sheets and the workbook structure. This method provides a programmatic way to protect a workbook without using the UI. + +**Examples** + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + + public SfSpreadsheet SpreadsheetInstance; + + 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 SfSpreadsheet SpreadsheetInstance; + + 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/ribbon-customization.md b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md index 598d1e47cd..ccd89b275c 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md @@ -1,7 +1,7 @@ --- layout: post title: Ribbon Customization in Blazor Spreadsheet Component | Syncfusion -description: Checkout and learn here about ribbon customization in the Syncfusion Blazor Spreadsheet component and more. +description: Learn how to customize the ribbon, tabs, groups, items, and File menu in the Syncfusion Blazor Spreadsheet component. platform: document-processing control: Spreadsheet documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Ribbon Customization in Blazor Spreadsheet Component -The Blazor Spreadsheet component provides a comprehensive ribbon interface that can be customized to match your application's needs. You can control the visibility, state, and layout of ribbon elements including tabs, groups, and items. Additionally, you can add custom tabs, groups, and items to extend the ribbon with your own functionality. +The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) component includes a ribbon interface that can be customized to match your application's needs. You can control the visibility, state, and layout of tabs, groups, and items, or add custom tabs, groups, and items to extend the ribbon with your own functionality. ## Overview -The Spreadsheet ribbon component is organized hierarchically, with tabs at the top level, groups as related containers within tabs, and items as individual controls within groups. Ribbon customization can be performed either declaratively using property binding or dynamically using methods, based on your application requirements. +The Spreadsheet ribbon is organized hierarchically: tabs at the top level, groups as related containers within tabs, and items as individual controls within groups. Customization can be performed declaratively using property binding or dynamically using methods, depending on your application requirements. ## Customizing the Ribbon Using Property Binding @@ -25,9 +25,9 @@ Built-in tabs can be customized using the [RibbonTabItems](https://help.syncfusi | Property | Type | Description | |--|--|--| -| TabId | string | The unique identifier of the ribbon tab (e.g., "homeTab", "insertTab") | -| IsVisible | bool | Controls whether the tab is visible in the ribbon. Default is **true** | -| Order | int? | Sets the tab's display order. Lower values appear first. Default is **null** | +| TabId | string | The unique identifier of the ribbon tab (for example, `homeTab`, `insertTab`). | +| IsVisible | bool | Controls whether the tab is visible in the ribbon. The default is **true**. | +| Order | int? | Sets the tab's display order. Lower values appear first. The default is **null**. | | HeaderText | string | Overrides the tab's display label. | {% tabs %} @@ -67,10 +67,10 @@ Built-in groups within tabs can be customized using the [RibbonGroupItems](https | Property | Type | Description | |--|--|--| -| GroupId | string | The unique identifier of the ribbon group (e.g., "clipboardGroup", "fontStyleGroup") | -| TabId | string | The ID of the parent tab containing this group | -| IsVisible | bool | Controls whether the group is visible. Default is **true** | -| Order | int? | Sets the group's display order within its tab. Lower values appear first. Default is **null** | +| GroupId | string | The unique identifier of the ribbon group (for example, `clipboardGroup`, `fontStyleGroup`). | +| TabId | string | The ID of the parent tab containing this group. | +| IsVisible | bool | Controls whether the group is visible. The default is **true**. | +| Order | int? | Sets the group's display order within its tab. Lower values appear first. The default is **null**. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -106,11 +106,11 @@ Individual ribbon items can be customized using the [RibbonItems](https://help.s | Property | Type | Description | |--|--|--| -| ItemId | string | The unique identifier of the ribbon item (e.g., "bold", "italic").| -| GroupId | string | The ID of the parent group containing this item | -| IsVisible | bool | Controls whether the item is visible. Default is **true** | -| IsEnabled | bool? | Controls whether the item is enabled. Default is **null** | -| Order | int? | Sets the item's display order within its group. Lower values appear first. Default is **null** | +| ItemId | string | The unique identifier of the ribbon item (for example, `bold`, `italic`). | +| GroupId | string | The ID of the parent group containing this item. | +| IsVisible | bool | Controls whether the item is visible. The default is **true**. | +| IsEnabled | bool? | Controls whether the item is enabled. The default is **null**. | +| Order | int? | Sets the item's display order within its group. Lower values appear first. The default is **null**. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -149,8 +149,8 @@ The ribbon can be extended with completely new tabs using the [CustomRibbonTabs] | Property | Type | Description | |--|--|--| -| Index | int | The position where the tab will be inserted. | -| Template | RenderFragment | The Blazor markup defining the tab's content and layout | +| Index | int | The position where the tab is inserted. | +| Template | RenderFragment | The Blazor markup defining the tab's content and layout. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -212,9 +212,9 @@ Custom groups can be added to existing tabs using the [CustomRibbonGroups](https | Property | Type | Description | |--|--|--| -| TabId | string | The ID of the parent tab where the group will be added | -| Index | int | The position where the group will be inserted within the tab. | -| Template | RenderFragment | The Blazor markup defining the group's content | +| TabId | string | The ID of the parent tab where the group is added. | +| Index | int | The position where the group is inserted within the tab. | +| Template | RenderFragment | The Blazor markup defining the group's content. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -236,7 +236,7 @@ Custom groups can be added to existing tabs using the [CustomRibbonGroups](https new SpreadsheetCustomRibbonGroup { TabId = "homeTab", - Index = 8, // Insert after existing groups + Index = 8, // Insert after the existing groups Template = CreateCustomGroupTemplate() } }; @@ -273,9 +273,9 @@ Custom items can be added to existing groups using the [CustomRibbonItems](https | Property | Type | Description | |--|--|--| -| GroupId | string | The ID of the parent group where the item will be added | -| Index | int | The position where the item will be inserted within the group. | -| Template | RenderFragment | The Blazor markup defining the item's content | +| GroupId | string | The ID of the parent group where the item is added. | +| Index | int | The position where the item is inserted within the group. If the index exceeds the group size, the item is appended. | +| Template | RenderFragment | The Blazor markup defining the item's content. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -297,7 +297,7 @@ Custom items can be added to existing groups using the [CustomRibbonItems](https new SpreadsheetCustomRibbonItem { GroupId = "fontStyleGroup", - Index = 4, // Insert after existing formatting items + Index = 4, // Insert at position 4 within the group Template = CreateCustomItemTemplate() } }; @@ -325,11 +325,11 @@ Custom items can be added to existing groups using the [CustomRibbonItems](https ## Customizing the Ribbon Using Methods -Methods provide programmatic control over ribbon elements during the component lifecycle. This approach is ideal for dynamic customizations based on user actions or application state. +Methods provide programmatic control over ribbon elements during the component lifecycle. They are well suited for dynamic customizations based on user actions or application state. ### Showing and Hiding Tabs -Tab visibility can be controlled using the [ShowRibbonTabs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowRibbonTabs_System_Collections_Generic_List_System_String__) and [HideRibbonTabs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_HideRibbonTabs_System_Collections_Generic_List_System_String__) methods. +Tab visibility can be controlled using the [ShowRibbonTabs()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowRibbonTabs_System_Collections_Generic_List_System_String__) and [HideRibbonTabs()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_HideRibbonTabs_System_Collections_Generic_List_System_String__) methods. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -362,9 +362,11 @@ Tab visibility can be controlled using the [ShowRibbonTabs](https://help.syncfus {% endhighlight %} {% endtabs %} +N> If a tab name in the list does not match a built-in tab, the call is ignored and no error is raised. + ### Enabling and Disabling Tabs -Tab interactivity can be controlled using the [EnableRibbonTabs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableRibbonTabs_System_Collections_Generic_List_System_String__) and [DisableRibbonTabs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DisableRibbonTabs_System_Collections_Generic_List_System_String__) methods. Disabled tabs appear grayed out but remain visible. +Tab interactivity can be controlled using the [EnableRibbonTabs()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableRibbonTabs_System_Collections_Generic_List_System_String__) and [DisableRibbonTabs()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DisableRibbonTabs_System_Collections_Generic_List_System_String__) methods. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -399,7 +401,7 @@ Tab interactivity can be controlled using the [EnableRibbonTabs](https://help.sy ### Showing and Hiding Items -Item visibility can be controlled using the [ShowRibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowRibbonItems_System_Collections_Generic_List_System_String__) and [HideRibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_HideRibbonItems_System_Collections_Generic_List_System_String__) methods. Hidden items are completely removed from the ribbon interface. +Item visibility can be controlled using the [ShowRibbonItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowRibbonItems_System_Collections_Generic_List_System_String__) and [HideRibbonItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_HideRibbonItems_System_Collections_Generic_List_System_String__) methods. Hidden items are completely removed from the ribbon interface. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -432,9 +434,11 @@ Item visibility can be controlled using the [ShowRibbonItems](https://help.syncf {% endhighlight %} {% endtabs %} +N> Item IDs are case-sensitive. An unknown item ID is silently ignored. + ### Enabling and Disabling Items -Item interactivity can be controlled using the [EnableRibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableRibbonItems_System_Collections_Generic_List_System_String__) and [DisableRibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DisableRibbonItems_System_Collections_Generic_List_System_String__) methods. Disabled items appear grayed out but remain visible. +Item interactivity can be controlled using the [EnableRibbonItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableRibbonItems_System_Collections_Generic_List_System_String__) and [DisableRibbonItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DisableRibbonItems_System_Collections_Generic_List_System_String__) methods. Disabled items remain visible but appear grayed out and cannot be clicked. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -469,7 +473,12 @@ Item interactivity can be controlled using the [EnableRibbonItems](https://help. ### Adding Ribbon Tabs -Custom tabs can be added dynamically using the [AddRibbonTab](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddRibbonTab_Syncfusion_Blazor_Navigations_RibbonTab_System_Int32_) method. +Custom tabs can be added dynamically using the [AddRibbonTab()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddRibbonTab_Syncfusion_Blazor_Ribbon_RibbonTab_System_Int32_) method. + +| Parameter | Type | Description | +|--|--|--| +| tab | Class | The [RibbonTab](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ribbon.RibbonTab.html) model to add to the ribbon. The tab can contain custom groups and items. | +| index | int | The zero-based index at which to insert the new tab within the ribbon. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -506,7 +515,14 @@ Custom tabs can be added dynamically using the [AddRibbonTab](https://help.syncf ### Adding Ribbon Items -Custom items can be added to existing groups using the [AddRibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddRibbonItems_System_String_System_Collections_Generic_List_Syncfusion_Blazor_Navigations_RibbonItem__System_Int32_Syncfusion_Blazor_Navigations_RibbonGroup_) method. +Custom items can be added to existing groups using the [AddRibbonItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddRibbonItems_System_String_System_Collections_Generic_List_Syncfusion_Blazor_Ribbon_RibbonItem__System_Int32_Syncfusion_Blazor_Ribbon_RibbonGroup_) method. + +| Parameter | Type | Description | +|--|--|--| +| tabName | string | The **displayed tab name** (for example, `Home`) that contains the target group. | +| items | List | The list of items to add. A list with a single item is also accepted. | +| index | int | The zero-based collection index where items should be inserted within the tab. | +| group *(optional)* | Class | The target group. When omitted, the first available group in the tab is used. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -538,7 +554,7 @@ Custom items can be added to existing groups using the [AddRibbonItems](https:// } }; - // Add item to a group in Home tab at index 0 + // Add the item to the first group in the Home tab at index 0 SpreadsheetInstance.AddRibbonItems("Home", new List { item }, index: 0); } @@ -557,7 +573,12 @@ The File menu in the Spreadsheet component can be customized to add, show or hid ### Adding File Menu Items -Custom menu items can be added to the File menu using the [AddFileMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddFileMenuItems_System_Collections_Generic_List_Syncfusion_Blazor_Navigations_MenuItem__System_Int32_) method. +Custom menu items can be added to the File menu using the [AddFileMenuItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddFileMenuItems_System_Collections_Generic_List_Syncfusion_Blazor_Navigations_MenuItem__System_Int32_) method. + +| Parameter | Type | Description | +|--|--|--| +| items | List | The list of menu items to add. | +| index | int | The zero-based index at which to insert the menu items within the File menu. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -595,7 +616,7 @@ Custom menu items can be added to the File menu using the [AddFileMenuItems](htt } }; - // Add export menu at position 0 + // Insert the export menu at position 0 SpreadsheetInstance.AddFileMenuItems(exportMenu, index: 0); } } @@ -605,7 +626,7 @@ Custom menu items can be added to the File menu using the [AddFileMenuItems](htt ### Showing and Hiding File Menu Items -Menu item visibility can be controlled using the [ShowFileMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowFileMenuItems_System_Collections_Generic_List_System_String__) and [HideFileMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_HideFileMenuItems_System_Collections_Generic_List_System_String__) methods. +Menu item visibility can be controlled using the [ShowFileMenuItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ShowFileMenuItems_System_Collections_Generic_List_System_String__) and [HideFileMenuItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_HideFileMenuItems_System_Collections_Generic_List_System_String__) methods. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -627,13 +648,13 @@ Menu item visibility can be controlled using the [ShowFileMenuItems](https://hel private void HideItems() { // Hide menu items - SpreadsheetInstance.HideFileMenuItems(new List { "Open", "Save As"}); + SpreadsheetInstance.HideFileMenuItems(new List { "Open", "Save As" }); } private void ShowItems() { // Show previously hidden menu items - SpreadsheetInstance.ShowFileMenuItems(new List { "Open", "Save As"}); + SpreadsheetInstance.ShowFileMenuItems(new List { "Open", "Save As" }); } } @@ -642,7 +663,7 @@ Menu item visibility can be controlled using the [ShowFileMenuItems](https://hel ### Enabling and Disabling File Menu Items -Menu item interactivity can be controlled using the [EnableFileMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableFileMenuItems_System_Collections_Generic_List_System_String__) and [DisableFileMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DisableFileMenuItems_System_Collections_Generic_List_System_String__) methods. +Menu item interactivity can be controlled using the [EnableFileMenuItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableFileMenuItems_System_Collections_Generic_List_System_String__) and [DisableFileMenuItems()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DisableFileMenuItems_System_Collections_Generic_List_System_String__) methods. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -683,70 +704,70 @@ The following section contains identifier references for customizing the ribbon ### Ribbon Tab -| Tab ID | Display Name | Description | +| Tab ID | Header Text | Description | |--|--|--| -| `homeTab` | Home | Contains formatting, editing, and data protection commands | -| `insertTab` | Insert | Contains commands for inserting images, hyperlinks, and functions | -| `formulasTab` | Formulas | Contains calculation options and named range management commands | -| `reviewTab` | Review | Contains worksheet protection and name manager commands | -| `viewTab` | View | Contains view options such as gridlines | +| `homeTab` | Home | Contains formatting, editing, and data operations commands. | +| `insertTab` | Insert | Contains commands for inserting images, hyperlinks, and functions. | +| `formulasTab` | Formulas | Contains calculation options and named-range management commands. | +| `reviewTab` | Review | Contains worksheet and workbook protection commands. | +| `viewTab` | View | Contains view options such as gridlines. | ### Ribbon Group | Group ID | Tab | Description | |--|--|--| -| `undoRedoGroup` | Home | Undo and redo cell modifications | -| `clipboardGroup` | Home | Cut, copy, and paste operations | -| `numberFormatGroup` | Home | Number format selection and application | -| `fontFamilyGroup` | Home | Font family selection | -| `fontSizeGroup` | Home | Font size adjustment | -| `fontStyleGroup` | Home | Text formatting options: bold, italic, underline, strikethrough, font color | -| `bordersGroup` | Home | Border styling and color application | -| `backgroundColorGroup` | Home | Cell background color and cell merge operations | -| `fontAlignmentGroup` | Home | Text alignment and wrap options | -| `conditionalFormattingGroup` | Home | Conditional formatting rule creation and management | -| `dataOperationsGroup` | Home | Data clearing and sorting operations | -| `insertGroup` | Insert | Hyperlink and image insertion | -| `insertFunctionsGroup` | Formulas | Function insertion and formula building | -| `calculationOptionGroup` | Formulas | Calculation mode selection | -| `manualCalculationGroup` | Formulas | Manual sheet and workbook calculation | -| `namedRangesGroup` | Formulas | Named range definition and management | -| `protectionGroup` | Review | Worksheet and workbook protection | -| `viewGroup` | View | Grid display and view customization options | +| `undoRedoGroup` | Home | Undo and redo cell modifications. | +| `clipboardGroup` | Home | Cut, copy, and paste operations. | +| `numberFormatGroup` | Home | Number format selection and application. | +| `fontFamilyGroup` | Home | Font family selection. | +| `fontSizeGroup` | Home | Font size adjustment. | +| `fontStyleGroup` | Home | Text formatting options: bold, italic, underline, strikethrough, font color. | +| `bordersGroup` | Home | Border styling and color application. | +| `backgroundColorGroup` | Home | Cell background color and cell merge operations. | +| `fontAlignmentGroup` | Home | Text alignment and wrap options. | +| `conditionalFormattingGroup` | Home | Conditional formatting rule creation and management. | +| `dataOperationsGroup` | Home | Data clearing and sorting operations. | +| `insertGroup` | Insert | Hyperlink and image insertion. | +| `insertFunctionsGroup` | Formulas | Function insertion and formula building. | +| `calculationOptionGroup` | Formulas | Calculation mode selection. | +| `manualCalculationGroup` | Formulas | Manual sheet and workbook calculation. | +| `namedRangesGroup` | Formulas | Named range definition and management. | +| `protectionGroup` | Review | Worksheet and workbook protection. | +| `viewGroup` | View | Grid display and view options. | ### Ribbon Items | Item ID | Description | |--|--| -| `undo` | Undo the last cell modification | -| `redo` | Redo the last undone action | -| `cut` | Remove selected cells to clipboard | -| `copy` | Copy selected cells to clipboard | -| `paste` | Paste clipboard contents to selected cells | -| `numberFormat` | Apply number format to selected cells | -| `fontFamily` | Change the font family of selected text | -| `fontSize` | Adjust the font size of selected text | -| `bold` | Apply or remove bold formatting | -| `italic` | Apply or remove italic formatting | -| `underline` | Apply or remove underline formatting | -| `strikethrough` | Apply or remove strikethrough formatting | -| `fontColor` | Change the color of selected text | -| `borderPicker` | Apply borders to selected cells | -| `colorPicker` | Set the background color of selected cells | -| `mergeCell` | Merge selected cells into one | -| `horizontalAlignment` | Set horizontal text alignment | -| `verticalAlignment` | Set vertical text alignment | -| `wrapText` | Enable or disable text wrapping in cells | -| `conditionalFormat` | Create and apply conditional formatting rules | -| `clear` | Clear contents from selected cells | -| `sort` | Sort data in ascending or descending order | -| `link` | Insert or edit a hyperlink | -| `image` | Insert an image into the worksheet | -| `insertFunction` | Insert a formula function | -| `calculationOption` | Change the calculation mode | -| `calculateSheet` | Recalculate the current sheet | -| `calculateWorkbook` | Recalculate all sheets in the workbook | -| `nameManager` | Define and manage named ranges | -| `protectSheet` | Enable or disable worksheet protection | -| `protectWorkbook` | Enable or disable workbook protection | -| `gridlines` | Show or hide gridlines in the worksheet | \ No newline at end of file +| `undo` | Undo the last cell modification. | +| `redo` | Redo the last undone action. | +| `cut` | Remove selected cells to clipboard. | +| `copy` | Copy selected cells to clipboard. | +| `paste` | Paste clipboard contents to selected cells. | +| `numberFormat` | Apply a number format to the selected cells. | +| `fontFamily` | Change the font family of selected text. | +| `fontSize` | Adjust the font size of selected text. | +| `bold` | Apply or remove bold formatting. | +| `italic` | Apply or remove italic formatting. | +| `underline` | Apply or remove underline formatting. | +| `strikethrough` | Apply or remove strikethrough formatting. | +| `fontColor` | Change the color of selected text. | +| `borderPicker` | Apply borders to selected cells. | +| `colorPicker` | Set the background color of selected cells. | +| `mergeCell` | Merge selected cells into one. | +| `horizontalAlignment` | Set horizontal text alignment. | +| `verticalAlignment` | Set vertical text alignment. | +| `wrapText` | Enable or disable text wrapping in cells. | +| `conditionalFormat` | Create and apply conditional formatting rules. | +| `clear` | Clear contents from selected cells. | +| `sort` | Sort data in ascending or descending order. | +| `link` | Insert or edit a hyperlink. | +| `image` | Insert an image into the worksheet. | +| `insertFunction` | Insert a formula function. | +| `calculationOption` | Change the calculation mode. | +| `calculateSheet` | Recalculate the current sheet. | +| `calculateWorkbook` | Recalculate all sheets in the workbook. | +| `nameManager` | Define and manage named ranges. | +| `protectSheet` | Enable or disable worksheet protection. | +| `protectWorkbook` | Enable or disable workbook protection. | +| `gridlines` | Show or hide gridlines in the worksheet. | \ 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..ddd6b8fd43 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,42 @@ 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 context menu, insert the rows in the desired position. +#### Insert Rows via UI -The following code example shows the options for inserting rows in the spreadsheet. +To insert a row using the context menu: + +1. Click the **row header** where the new row should appear. + +2. **Right-click** the row header to open the context menu. + +3. Select **Insert Rows Above** to insert the new row above the selected row, or **Insert Rows Below** to insert it below. + +4. The new row is added to the worksheet, and formatting from the adjacent row is preserved. + +#### Insert rows programmatically + +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. The available parameters in 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 are: + +| 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`. | + +**Example** {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons - + @@ -48,7 +69,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,23 +88,46 @@ 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, + +#### Insert Columns Via UI + +To insert a column using the context menu: + +1. Click the **column header** of the column where the new column should appear. + +2. **Right-click** the column header to open the context menu. + +3. Select **Insert Columns to the Left** to insert the new column to the left of the selected column, or **Insert Columns to the Right** to insert it to the right. + +4. The new column is added to the worksheet, and formatting from the adjacent column is preserved. -* 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. +#### Insert Columns programmatically -The following code example shows the options for inserting columns in the spreadsheet. +* 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. The available parameters in 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 are: + +| 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`. | + +**Example** {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Buttons - + @@ -116,12 +160,14 @@ The following code example shows the options for inserting columns in the spread {% endhighlight %} {% endtabs %} +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 **Protect Sheet** dialog. + ## 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. -* The default `RowCount` is **1000**. -* The default `ColumnCount` is **200**. +* The default `RowCount` is **1000**. +* The default `ColumnCount` is **200**. ### Rendering Behavior @@ -134,27 +180,17 @@ The Blazor Spreadsheet component enables you to define the initial number of row - 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. - You can set these properties as follows: {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@page "/" @using Syncfusion.Blazor.Spreadsheet - + -@code { - public byte[] DataSourceBytes { get; set; } - - protected override void OnInitialized() - { - string filePath = "wwwroot/Sample.xlsx"; - DataSourceBytes = File.ReadAllBytes(filePath); - } -} - {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/selection.md b/Document-Processing/Excel/Spreadsheet/Blazor/selection.md index 25c36d0306..41c8bb25d2 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 programmatic and UI-based selection options. platform: document-processing control: Spreadsheet documentation: ug @@ -9,84 +9,93 @@ 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 [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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 Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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 **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. -* **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. + +N> 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 Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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. +The [Blazor Spreadsheet Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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 +103,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 +111,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..0a3e651686 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,42 @@ 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 + + + + + +@code { + public byte[] DataSourceBytes { get; set; } + + protected override void OnInitialized() + { + string filePath = "wwwroot/Sample.xlsx"; + DataSourceBytes = File.ReadAllBytes(filePath); + } +} + + +{% 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 @@ -54,27 +82,25 @@ If filtering is enabled, sorting can also be performed using the filter dialog. ### Sort by active cell -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. - -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 [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 +110,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..5a5de09bc4 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/ui-builder-skill.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/ui-builder-skill.md @@ -24,34 +24,34 @@ 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): +- 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) ## Key Benefits -### **AI-Driven UI Generation** +### AI-Driven UI Generation - Converts prompts into complete Blazor components—not just snippets - Automatically selects appropriate Syncfusion® Spreadsheet features (formulas, formatting, data binding, etc.) - Produces structured, maintainable code -### **Component Usage & API Accuracy** +### Component Usage & API Accuracy - Uses correct Syncfusion® Spreadsheet APIs - Injects required feature modules (sorting, filtering, number formatting, etc.) - Avoids unsupported or deprecated patterns -### **Patterns & Best Practices** +### Patterns & Best Practices - Recommended component composition and Blazor lifecycle integration - Event handling aligned with Blazor standards - Secure and scalable coding patterns for data-driven applications -### **Accessibility & Responsiveness** +### Accessibility & Responsiveness - WCAG 2.1 AA–aligned output - Semantic HTML with ARIA support - Mobile-first responsive layouts -### **Design-System Integration** +### Design-System Integration - Supports Tailwind, Bootstrap, Material, or custom themes - Ensures consistent Syncfusion® styling and theme usage @@ -104,13 +104,15 @@ After installation, the following artifacts are added to your project for the Gi Refer to the [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. +N> 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. @@ -129,7 +131,7 @@ Key enforcement points: - Generates semantic HTML with ARIA attributes and keyboard support - Avoids unsupported or deprecated API usages for Syncfusion® Spreadsheet -> The assistant handles most stages automatically and may request confirmation where required. +N> The assistant handles most stages automatically and may request confirmation where required. ## Using the AI Assistant @@ -145,7 +147,7 @@ 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. -> 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. +N> 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 +156,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 Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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,7 +164,7 @@ 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. @@ -170,7 +172,7 @@ Follow these guidelines to get the most out of UI Builder and ensure high-qualit ## 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. @@ -197,3 +199,4 @@ 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/) + \ 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..90d63a086f 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 Editor](https://www.syncfusion.com/spreadsheet-editor-sdk/blazor-spreadsheet-editor) 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 **25 operations** 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,90 @@ 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. + +{% 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. + + +{% 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..2ca637e914 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