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/getting-started-webapp.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md index 5bdaf22de..af0f53e2f 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,60 @@ 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 %} + +## 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 %} ## 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..43e08e1d6 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,57 @@ 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 %} + +## 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 %} ## Add import namespaces 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..2a62e7781 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Blazor/ribbon-customization.md @@ -0,0 +1,752 @@ +--- +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 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. + +## 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. + +### 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. + +| 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 %} + +### 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. + +| 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 %} + +### 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. + +| 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** | + +{% 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 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 } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +### 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. | +| 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 %} + +### 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. | +| 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 %} + +### 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. | +| 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 = "fontStyleGroup", + Index = 4, // Insert after existing formatting items + Template = CreateCustomItemTemplate() + } + }; + } + + private RenderFragment CreateCustomItemTemplate() + { + return @ + + + ; + } + + private void OnHighlightText() + { + // Highlight logic + Console.WriteLine("Highlight Text clicked"); + } +} + +{% endhighlight %} +{% endtabs %} + +## 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. + +### 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. + +{% 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 %} + +### 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. + +{% 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 %} + +### 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void HideItems() + { + SpreadsheetInstance.HideRibbonItems(new List { "cut", "paste" }); + } + + private void ShowItems() + { + SpreadsheetInstance.ShowRibbonItems(new List { "cut", "paste" }); + } +} + +{% endhighlight %} +{% endtabs %} + +### 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + public SfSpreadsheet SpreadsheetInstance { get; set; } + + private void DisableItems() + { + SpreadsheetInstance.DisableRibbonItems(new List { "cut", "italic", "bold" }); + } + + private void EnableItems() + { + SpreadsheetInstance.EnableRibbonItems(new List { "cut", "italic", "bold" }); + } +} + +{% endhighlight %} +{% endtabs %} + +### 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Ribbon + + + + + + + +@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 %} + +### 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@page "/" +@using Syncfusion.Blazor.Spreadsheet +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Ribbon + + + + + + + +@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 %} + +## Customizing the File Menu + +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. + +### 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. + +{% 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 %} + +### 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. + +{% 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 %} + +### 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. + +{% 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 | + +### 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 | + +### 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 |