From 5e75f49b3d317b59ee69e3c00a5b8affa35380ff Mon Sep 17 00:00:00 2001 From: Srisabari Venkatesan Date: Mon, 25 May 2026 14:03:57 +0530 Subject: [PATCH 1/4] 1027607: Added UG for ribbon-customization. --- .../Blazor/ribbon-customization.md | 751 ++++++++++++++++++ 1 file changed, 751 insertions(+) create mode 100644 Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md new file mode 100644 index 000000000..d1bdf40b5 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md @@ -0,0 +1,751 @@ +--- +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. +platform: document-processing +control: Spreadsheet +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. + +## Overview + +The ribbon in the Spreadsheet 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 achieved either declaratively using property binding or dynamically using methods, depending on your application requirements. + +## Ribbon Customization Through Property Binding + +Property binding enables declarative customization of the ribbon during component initialization, making it ideal for defining static configurations in advance. + +### Customize Built-in Ribbon Tabs + +Built-in tabs can be customized using the [RibbonTabItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RibbonTabItems) property. Tabs can be hidden, reordered, and their display text changed. + +| 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** | +| HeaderText | string | Overrides the tab's display label. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +@code { + + private List GetTabCustomizations() + { + return new List + { + // Hide the Review tab + new SpreadsheetRibbonTab { TabId = "reviewTab", IsVisible = false }, + + // Reorder View tab to appear after Home + new SpreadsheetRibbonTab { TabId = "viewTab", Order = 1 }, + + // Rename the Insert tab + new SpreadsheetRibbonTab { TabId = "insertTab", HeaderText = "Add Objects" } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +### Customize Built-in Ribbon Groups + +Built-in groups within tabs can be customized using the [RibbonGroupItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RibbonGroupItems) property. Groups can be hidden and reordered within their parent tab. + +| 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** | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +@code { + + private List GetGroupCustomizations() + { + return new List + { + // Hide the Borders group in Home tab + new SpreadsheetRibbonGroup { GroupId = "bordersGroup", TabId = "homeTab", IsVisible = false }, + + // Move Font Alignment group to appear first in Home tab + new SpreadsheetRibbonGroup { GroupId = "fontAlignmentGroup", TabId = "homeTab", Order = 0 } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +### Customize Built-in Ribbon Items + +Individual ribbon items can be customized using the [RibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RibbonItems) property. Items can be hidden, disabled, and reordered within their group. + +| 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 (clickable). Default is **null** | +| Order | int? | Sets the item's display order within its group. Lower values appear first. Default is **null** | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet + + + + + +@code { + + private List GetItemCustomizations() + { + return new List + { + // Hide the Strikethrough button + new SpreadsheetRibbonItem { ItemId = "strikethrough", IsVisible = false }, + + // Always disable the Protect Sheet button (still visible but grayed out) + new SpreadsheetRibbonItem { ItemId = "protectSheet", IsEnabled = false }, + + // Reorder Italic button to appear first in Font Style group + new SpreadsheetRibbonItem { ItemId = "italic", Order = 0 } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +### Add Custom Ribbon Tabs + +The ribbon can be extended with completely new tabs using the [CustomRibbonTabs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CustomRibbonTabs) property. Custom tabs are rendered using Blazor components. + +| Property | Type | Description | +|--|--|--| +| Index | int | The position where the tab will be inserted. Use **-1** to append at the end. Default is **-1** | +| Template | RenderFragment | The Blazor markup defining the tab's content and layout | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Ribbon + + + + + +@code { + + private List GetCustomTabs() + { + return new List + { + new SpreadsheetCustomRibbonTab + { + Index = 2, // Insert after Insert tab + Template = CreateCustomTabTemplate() + } + }; + } + + private RenderFragment CreateCustomTabTemplate() + { + return @ + + + + + + + + + + + + + + ; + } + + private void OnAnalyzeClick() + { + // Custom analyze logic + Console.WriteLine("Analyze clicked"); + } +} + +{% endhighlight %} +{% endtabs %} + +### Add Custom Ribbon Groups + +Custom groups can be added to existing tabs using the [CustomRibbonGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CustomRibbonGroups) property. + +| 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. Use **-1** to append at the end | +| Template | RenderFragment | The Blazor markup defining the group's content | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Ribbon + + + + + +@code { + + private List GetCustomGroups() + { + return new List + { + new SpreadsheetCustomRibbonGroup + { + TabId = "homeTab", + Index = 8, // Insert after existing groups + Template = CreateCustomGroupTemplate() + } + }; + } + + private RenderFragment CreateCustomGroupTemplate() + { + return @ + + + + + + + + + + ; + } + + private void OnExportPdf() + { + // Export to PDF logic + Console.WriteLine("Export PDF clicked"); + } +} + +{% endhighlight %} +{% endtabs %} + +### Add Custom Ribbon Items + +Custom items can be added to existing groups using the [CustomRibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CustomRibbonItems) property. + +| 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. Use **-1** to append at the end | +| Template | RenderFragment | The Blazor markup defining the item's content | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Ribbon + + + + + +@code { + + private List GetCustomItems() + { + return new List + { + new SpreadsheetCustomRibbonItem + { + GroupId = "clipboardGroup", + Index = 3, // Insert after Paste item + Template = CreateCustomItemTemplate() + } + }; + } + + private RenderFragment CreateCustomItemTemplate() + { + return @ + + ; + } + + private void OnPasteSpecial() + { + // Paste special logic + Console.WriteLine("Paste Special clicked"); + } +} + +{% endhighlight %} +{% endtabs %} + +## Ribbon Customization Through 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. + +### Show and Hide 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void HideTabs() + { + SpreadsheetInstance.HideRibbonTabs(new List { "Review", "View" }); + } + + private void ShowTabs() + { + SpreadsheetInstance.ShowRibbonTabs(new List { "Review", "View" }); + } +} + +{% endhighlight %} +{% endtabs %} + +### Enable and Disable 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void DisableTabs() + { + SpreadsheetInstance.DisableRibbonTabs(new List { "Home", "Review", "View" }); + } + + private void EnableTabs() + { + SpreadsheetInstance.EnableRibbonTabs(new List { "Home", "Review", "View" }); + } +} + +{% endhighlight %} +{% endtabs %} + +### Show and Hide 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + public byte[] DataSourceBytes { get; set; } = File.ReadAllBytes("wwwroot/Sample.xlsx"); + + private void HideItems() + { + SpreadsheetInstance.HideRibbonItems(new List { "cut", "paste" }); + } + + private void ShowItems() + { + SpreadsheetInstance.ShowRibbonItems(new List { "cut", "paste", "strikethrough" }); + } +} + +{% endhighlight %} +{% endtabs %} + +### Enable and Disable 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + public byte[] DataSourceBytes { get; set; } = File.ReadAllBytes("wwwroot/Sample.xlsx"); + + private void DisableItems() + { + SpreadsheetInstance.DisableRibbonItems(new List { "cut", "italic", "bold" }); + } + + private void EnableItems() + { + SpreadsheetInstance.EnableRibbonItems(new List { "cut", "italic", "bold" }); + } +} + +{% endhighlight %} +{% endtabs %} + +### Add 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void AddTab() + { + var tab = new RibbonTab + { + HeaderText = "Custom", + ID = "customTab" + }; + + // Add tab at position 1 (after Home) + SpreadsheetInstance.AddRibbonTab(tab, index: 1); + } +} + +{% endhighlight %} +{% endtabs %} + +### Add 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void AddButton() + { + var item = new RibbonItem + { + ID = "customButton", + Type = RibbonItemType.Button, + ButtonSettings = new RibbonButtonSettings + { + Content = "My Action", + OnClick = EventCallback.Factory.Create(this, OnCustomAction) + } + }; + + // Add item to a group in Home tab at index 0 + SpreadsheetInstance.AddRibbonItems("Home", new List { item }, index: 0); + } + + private void OnCustomAction(MouseEventArgs args) + { + Console.WriteLine("Custom button clicked"); + } +} + +{% endhighlight %} +{% endtabs %} + +## File Menu Customization + +The File menu provides customization through adding, hiding, showing, enabling, and disabling menu items. + +### Add 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void AddMenuItems() + { + var exportItems = new List + { + new MenuItem { Id = "exportXlsx", Text = "XLSX", IconCss = "e-icons e-file-excel" }, + new MenuItem { Id = "exportCsv", Text = "CSV", IconCss = "e-icons e-file-export" } + }; + + var exportMenu = new List + { + new MenuItem + { + Id = "exportAs", + Text = "Export As", + IconCss = "e-icons e-export", + Items = exportItems + } + }; + + // Add export menu at position 0 + SpreadsheetInstance.AddFileMenuItems(exportMenu, index: 0); + } +} + +{% endhighlight %} +{% endtabs %} + +### Show and Hide 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void HideItems() + { + // Hide menu items + SpreadsheetInstance.HideFileMenuItems(new List { "Open", "Save As"}); + } + + private void ShowItems() + { + // Show previously hidden menu items + SpreadsheetInstance.ShowFileMenuItems(new List { "Open", "Save As"}); + } +} + +{% endhighlight %} +{% endtabs %} + +### Enable and Disable 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void EnableItems() + { + // Enable menu items + SpreadsheetInstance.EnableFileMenuItems(new List { "Open", "Save As" }); + } + + private void DisableItems() + { + // Disable menu items (appear grayed out) + SpreadsheetInstance.DisableFileMenuItems(new List { "Open", "Save As" }); + } +} + +{% endhighlight %} +{% endtabs %} + +## Reference + +The following section contains identifier references for customizing the ribbon through property binding and methods. Use these IDs when configuring ribbon customizations through the **RibbonTabItems**, **RibbonGroupItems**, and **RibbonItems** properties, or when calling dynamic control methods during component execution. + +### Ribbon Tab + +| Tab ID | Display Name | 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 and display settings | + +### 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 | +| `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 | + +### 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 | +| `clear` | Clear contents from selected cells | +| `conditionalFormat` | Create and apply conditional formatting rules | +| `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 | From e9aa8f8c2b05de4895f6bf10326b4fe926effb09 Mon Sep 17 00:00:00 2001 From: Srisabari Venkatesan Date: Mon, 25 May 2026 17:09:13 +0530 Subject: [PATCH 2/4] 1027607: Updated the changes in ribbon customization and getting-started. --- .../Blazor/getting-started-webapp.md | 34 +++++- .../Spreadsheet/Blazor/getting-started.md | 31 ++++- .../Blazor/ribbon-customization.md | 109 +++++++++--------- 3 files changed, 118 insertions(+), 56 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md index 5bdaf22de..82399a33e 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with the Blazor Spreadsheet in Web App -This section briefly explains how to include the [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include the [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -96,6 +96,38 @@ N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget {% endtabcontent %} +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + {% endtabcontents %} ## Add import namespaces diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md index dcc0581fb..e57b8403b 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Spreadsheet Component -This section briefly explains how to include [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -85,6 +85,35 @@ N> Syncfusion® Blazor components are availa {% endtabcontent %} +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + {% endtabcontents %} ## Add import namespaces diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md index d1bdf40b5..a7a3f60a4 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md @@ -13,13 +13,13 @@ The Blazor Spreadsheet component provides a comprehensive ribbon interface that ## Overview -The ribbon in the Spreadsheet 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 achieved either declaratively using property binding or dynamically using methods, depending on your application requirements. +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. -## Ribbon Customization Through Property Binding +## Customizing the Ribbon Using Property Binding Property binding enables declarative customization of the ribbon during component initialization, making it ideal for defining static configurations in advance. -### Customize Built-in Ribbon Tabs +### Customizing Built-in Ribbon Tabs Built-in tabs can be customized using the [RibbonTabItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RibbonTabItems) property. Tabs can be hidden, reordered, and their display text changed. @@ -36,8 +36,8 @@ Built-in tabs can be customized using the [RibbonTabItems](https://help.syncfusi @page "/" @using Syncfusion.Blazor.Spreadsheet - - + + @code { @@ -61,7 +61,7 @@ Built-in tabs can be customized using the [RibbonTabItems](https://help.syncfusi {% endhighlight %} {% endtabs %} -### Customize Built-in Ribbon Groups +### Customizing Built-in Ribbon Groups Built-in groups within tabs can be customized using the [RibbonGroupItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RibbonGroupItems) property. Groups can be hidden and reordered within their parent tab. @@ -78,8 +78,8 @@ Built-in groups within tabs can be customized using the [RibbonGroupItems](https @page "/" @using Syncfusion.Blazor.Spreadsheet - - + + @code { @@ -100,7 +100,7 @@ Built-in groups within tabs can be customized using the [RibbonGroupItems](https {% endhighlight %} {% endtabs %} -### Customize Built-in Ribbon Items +### Customizing Built-in Ribbon Items Individual ribbon items can be customized using the [RibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RibbonItems) property. Items can be hidden, disabled, and reordered within their group. @@ -109,7 +109,7 @@ Individual ribbon items can be customized using the [RibbonItems](https://help.s | 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 (clickable). Default is **null** | +| 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** | {% tabs %} @@ -118,8 +118,8 @@ Individual ribbon items can be customized using the [RibbonItems](https://help.s @page "/" @using Syncfusion.Blazor.Spreadsheet - - + + @code { @@ -131,8 +131,8 @@ Individual ribbon items can be customized using the [RibbonItems](https://help.s // Hide the Strikethrough button new SpreadsheetRibbonItem { ItemId = "strikethrough", IsVisible = false }, - // Always disable the Protect Sheet button (still visible but grayed out) - new SpreadsheetRibbonItem { ItemId = "protectSheet", IsEnabled = false }, + // Always disable the Link button (still visible but grayed out) + new SpreadsheetRibbonItem { ItemId = "link", IsEnabled = false }, // Reorder Italic button to appear first in Font Style group new SpreadsheetRibbonItem { ItemId = "italic", Order = 0 } @@ -143,13 +143,13 @@ Individual ribbon items can be customized using the [RibbonItems](https://help.s {% endhighlight %} {% endtabs %} -### Add Custom Ribbon Tabs +### Adding Custom Ribbon Tabs The ribbon can be extended with completely new tabs using the [CustomRibbonTabs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CustomRibbonTabs) property. Custom tabs are rendered using Blazor components. | Property | Type | Description | |--|--|--| -| Index | int | The position where the tab will be inserted. Use **-1** to append at the end. Default is **-1** | +| Index | int | The position where the tab will be inserted. | | Template | RenderFragment | The Blazor markup defining the tab's content and layout | {% tabs %} @@ -159,8 +159,8 @@ The ribbon can be extended with completely new tabs using the [CustomRibbonTabs] @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Ribbon - - + + @code { @@ -206,14 +206,14 @@ The ribbon can be extended with completely new tabs using the [CustomRibbonTabs] {% endhighlight %} {% endtabs %} -### Add Custom Ribbon Groups +### Adding Custom Ribbon Groups Custom groups can be added to existing tabs using the [CustomRibbonGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CustomRibbonGroups) property. | 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. Use **-1** to append at the end | +| Index | int | The position where the group will be inserted within the tab. | | Template | RenderFragment | The Blazor markup defining the group's content | {% tabs %} @@ -223,8 +223,8 @@ Custom groups can be added to existing tabs using the [CustomRibbonGroups](https @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Ribbon - - + + @code { @@ -267,14 +267,14 @@ Custom groups can be added to existing tabs using the [CustomRibbonGroups](https {% endhighlight %} {% endtabs %} -### Add Custom Ribbon Items +### Adding Custom Ribbon Items Custom items can be added to existing groups using the [CustomRibbonItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CustomRibbonItems) property. | 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. Use **-1** to append at the end | +| Index | int | The position where the item will be inserted within the group. | | Template | RenderFragment | The Blazor markup defining the item's content | {% tabs %} @@ -284,8 +284,8 @@ Custom items can be added to existing groups using the [CustomRibbonItems](https @using Syncfusion.Blazor.Spreadsheet @using Syncfusion.Blazor.Ribbon - - + + @code { @@ -296,8 +296,8 @@ Custom items can be added to existing groups using the [CustomRibbonItems](https { new SpreadsheetCustomRibbonItem { - GroupId = "clipboardGroup", - Index = 3, // Insert after Paste item + GroupId = "fontStyleGroup", + Index = 4, // Insert after existing formatting items Template = CreateCustomItemTemplate() } }; @@ -306,25 +306,28 @@ Custom items can be added to existing groups using the [CustomRibbonItems](https private RenderFragment CreateCustomItemTemplate() { return @ - + + ; } - private void OnPasteSpecial() + private void OnHighlightText() { - // Paste special logic - Console.WriteLine("Paste Special clicked"); + // Highlight logic + Console.WriteLine("Highlight Text clicked"); } } {% endhighlight %} {% endtabs %} -## Ribbon Customization Through Methods +## 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. -### Show and Hide Tabs +### 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. @@ -359,7 +362,7 @@ Tab visibility can be controlled using the [ShowRibbonTabs](https://help.syncfus {% endhighlight %} {% endtabs %} -### Enable and Disable Tabs +### 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. @@ -394,7 +397,7 @@ Tab interactivity can be controlled using the [EnableRibbonTabs](https://help.sy {% endhighlight %} {% endtabs %} -### Show and Hide Items +### 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. @@ -408,13 +411,12 @@ Item visibility can be controlled using the [ShowRibbonItems](https://help.syncf - + @code { public SfSpreadsheet SpreadsheetInstance { get; set; } - public byte[] DataSourceBytes { get; set; } = File.ReadAllBytes("wwwroot/Sample.xlsx"); private void HideItems() { @@ -423,14 +425,14 @@ Item visibility can be controlled using the [ShowRibbonItems](https://help.syncf private void ShowItems() { - SpreadsheetInstance.ShowRibbonItems(new List { "cut", "paste", "strikethrough" }); + SpreadsheetInstance.ShowRibbonItems(new List { "cut", "paste" }); } } {% endhighlight %} {% endtabs %} -### Enable and Disable Items +### 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. @@ -444,13 +446,12 @@ Item interactivity can be controlled using the [EnableRibbonItems](https://help. - + @code { public SfSpreadsheet SpreadsheetInstance { get; set; } - public byte[] DataSourceBytes { get; set; } = File.ReadAllBytes("wwwroot/Sample.xlsx"); private void DisableItems() { @@ -466,7 +467,7 @@ Item interactivity can be controlled using the [EnableRibbonItems](https://help. {% endhighlight %} {% endtabs %} -### Add Ribbon Tabs +### 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. @@ -475,8 +476,8 @@ Custom tabs can be added dynamically using the [AddRibbonTab](https://help.syncf @page "/" @using Syncfusion.Blazor.Spreadsheet -@using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Ribbon @@ -503,7 +504,7 @@ Custom tabs can be added dynamically using the [AddRibbonTab](https://help.syncf {% endhighlight %} {% endtabs %} -### Add Ribbon Items +### 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. @@ -512,8 +513,8 @@ Custom items can be added to existing groups using the [AddRibbonItems](https:// @page "/" @using Syncfusion.Blazor.Spreadsheet -@using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Ribbon @@ -550,11 +551,11 @@ Custom items can be added to existing groups using the [AddRibbonItems](https:// {% endhighlight %} {% endtabs %} -## File Menu Customization +## Customizing the File Menu -The File menu provides customization through adding, hiding, showing, enabling, and disabling menu items. +The File menu in the Spreadsheet component can be customized to add, show or hide, and enable or disable menu items, allowing dynamic control over its functionality based on application requirements. -### Add File Menu Items +### 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. @@ -602,7 +603,7 @@ Custom menu items can be added to the File menu using the [AddFileMenuItems](htt {% endhighlight %} {% endtabs %} -### Show and Hide File Menu Items +### 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. @@ -639,7 +640,7 @@ Menu item visibility can be controlled using the [ShowFileMenuItems](https://hel {% endhighlight %} {% endtabs %} -### Enable and Disable File Menu Items +### 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. @@ -688,7 +689,7 @@ The following section contains identifier references for customizing the ribbon | `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 and display settings | +| `viewTab` | View | Contains view options such as gridlines | ### Ribbon Group @@ -699,7 +700,7 @@ The following section contains identifier references for customizing the ribbon | `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 | +| `fontStyleGroup` | Home | Text formatting options: bold, italic, underline, strikethrough, fontcolor | | `bordersGroup` | Home | Border styling and color application | | `backgroundColorGroup` | Home | Cell background color and cell merge operations | | `fontAlignmentGroup` | Home | Text alignment and wrap options | @@ -736,8 +737,8 @@ The following section contains identifier references for customizing the ribbon | `horizontalAlignment` | Set horizontal text alignment | | `verticalAlignment` | Set vertical text alignment | | `wrapText` | Enable or disable text wrapping in cells | -| `clear` | Clear contents from selected 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 | From 6613964f32d746e2ee2c2a4a9b7819b18d71a372 Mon Sep 17 00:00:00 2001 From: Srisabari Venkatesan Date: Mon, 25 May 2026 18:33:19 +0530 Subject: [PATCH 3/4] 1027607: Updated the .NET CLI changes. --- .../Blazor/getting-started-webapp.md | 22 +++++++++++++++++++ .../Spreadsheet/Blazor/getting-started.md | 22 +++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md index 82399a33e..af0f53e2f 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md @@ -126,6 +126,28 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} +## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App + +If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. + +* Open a command prompt, terminal, or shell. +* Ensure you’re in the project root directory where your `.csproj` file is located (or the Client project if applicable). +* Run the following command to install a [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. + +{% tabs %} + +{% highlight c# tabtitle="Package Manager" %} + +dotnet add package Syncfusion.Blazor.Spreadsheet -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} + +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. + {% endtabcontent %} {% endtabcontents %} diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md index e57b8403b..43e08e1d6 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md @@ -112,6 +112,28 @@ cd BlazorApp {% endhighlight %} {% endtabs %} +## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App + +After creating the Blazor WebAssembly App, install the required Syncfusion NuGet packages using the .NET CLI. + +* Open a command prompt, terminal, or shell. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. + +{% tabs %} + +{% highlight c# tabtitle="Package Manager" %} + +dotnet add package Syncfusion.Blazor.Spreadsheet -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} + +{% endtabs %} + +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. + {% endtabcontent %} {% endtabcontents %} From 0a959cfe31dca1699ed0b615ef906b95594ae983 Mon Sep 17 00:00:00 2001 From: Srisabari Venkatesan Date: Mon, 25 May 2026 19:09:53 +0530 Subject: [PATCH 4/4] 1027607: Updated the Ci failures --- Document-Processing-toc.html | 1 + .../Excel/Spreadsheet/Blazor/ribbon-customization.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index ef103e480..00d880e10 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5548,6 +5548,7 @@
  • Selection
  • Protection
  • Undo and Redo
    • +
  • Ribbon Customization
  • Performance Metrics
  • Accessibility
  • Events
    • diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md index a7a3f60a4..2a62e7781 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md @@ -700,7 +700,7 @@ The following section contains identifier references for customizing the ribbon | `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, fontcolor | +| `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 |