Class SpreadsheetRibbon

Provides the Ribbon UI for the Spreadsheet, including formatting, editing, and protection commands.

Inheritance
object
ComponentBase
SpreadsheetRibbon
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Spreadsheet
Assembly: Syncfusion.Blazor.Spreadsheet.dll
Syntax
public class SpreadsheetRibbon : ComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

SpreadsheetRibbon()

Declaration
public SpreadsheetRibbon()

Properties

CustomRibbonGroups

Gets or sets custom ribbon groups to add to existing ribbon tabs in the SfSpreadsheet component's ribbon interface.

Declaration
[Parameter]
public List<SpreadsheetCustomRibbonGroup> CustomRibbonGroups { get; set; }
Property Value
Type Description
List<SpreadsheetCustomRibbonGroup>

A List<T> of SpreadsheetCustomRibbonGroup containing definitions for new groups. The default value is null.
Remarks

This parameter allows developers to add custom groups (containers for related items) to existing ribbon tabs such as Home, Insert, or formulas tabs. Groups provide visual separation and organization of related commands within a tab.

Key behaviors:

  • Custom groups are inserted into the specified parent tab via TabId.
  • Each custom group is defined by a SpreadsheetCustomRibbonGroup instance containing a RenderFragment template.
  • Set Index to control the group's position within the tab; -1 appends to the end.
  • The developer completely controls the group's appearance, content, and event handlers via the template.
  • If the parent tab does not exist, the group will not be inserted.

When this parameter is null or an empty collection, no custom groups are added to tabs.

Examples

Example: Add a custom group to the Home tab

@using Syncfusion.Blazor.Spreadsheet
@using Syncfusion.Blazor.Ribbon
@using Microsoft.AspNetCore.Components

<SfSpreadsheet @ref="SpreadsheetInstance"
               DataSource="DataSourceBytes">
    <SpreadsheetRibbon CustomRibbonGroups="@GetCustomGroups()">
    </SpreadsheetRibbon>
</SfSpreadsheet>

@code {
    public SfSpreadsheet SpreadsheetInstance { get; set; }
    public byte[] DataSourceBytes { get; set; }

    List<SpreadsheetCustomRibbonGroup> GetCustomGroups()
    {
        return new List<SpreadsheetCustomRibbonGroup>
        {
            new SpreadsheetCustomRibbonGroup
            {
                TabId = "homeTab",
                Index = 6,  // Append to end of Home tab
                Template = CustomGroupTemplate
            }
        };
    }
}

CustomRibbonItems

Gets or sets custom ribbon items to add to existing ribbon groups in the SfSpreadsheet component's ribbon interface.

Declaration
[Parameter]
public List<SpreadsheetCustomRibbonItem> CustomRibbonItems { get; set; }
Property Value
Type Description
List<SpreadsheetCustomRibbonItem>

A List<T> of SpreadsheetCustomRibbonItem containing definitions for new items. The default value is null.
Remarks

This parameter allows developers to add custom items (buttons, dropdowns, icons, etc.) to existing ribbon groups, enabling application-specific actions alongside built-in spreadsheet commands. Custom items are the basic interactive controls you can add to the ribbon.

Key behaviors:

  • Custom items are inserted into the specified parent group via GroupId.
  • Each custom item is defined by a SpreadsheetCustomRibbonItem instance containing a RenderFragment template.
  • Set Index to control the item's position within the group; -1 appends to the end.
  • The developer controls the item's appearance, label, icon, and event handlers (including click handlers) via the template.
  • If the parent group does not exist, the item will not be inserted.

When this parameter is null or an empty collection, no custom items are added to groups.

Examples

Example: Add custom button to the Clipboard group in the Home tab

@using Syncfusion.Blazor.Spreadsheet
@using Syncfusion.Blazor.Ribbon
@using Microsoft.AspNetCore.Components

<SfSpreadsheet @ref="SpreadsheetInstance"
               DataSource="DataSourceBytes">
    <SpreadsheetRibbon CustomRibbonItems="@GetCustomItems()">
    </SpreadsheetRibbon>
</SfSpreadsheet>

@code {
    public SfSpreadsheet SpreadsheetInstance { get; set; }
    public byte[] DataSourceBytes { get; set; }

    List<SpreadsheetCustomRibbonItem> GetCustomItems()
    {
        return new List<SpreadsheetCustomRibbonItem>
        {
            new SpreadsheetCustomRibbonItem
            {
                GroupId = "clipboardGroup",
                Index = 3,
                Template = CustomButtonTemplate
            }
        };
    }
}

CustomRibbonTabs

Gets or sets custom ribbon tabs to add to the SfSpreadsheet component's ribbon interface.

Declaration
[Parameter]
public List<SpreadsheetCustomRibbonTab> CustomRibbonTabs { get; set; }
Property Value
Type Description
List<SpreadsheetCustomRibbonTab>

A List<T> of SpreadsheetCustomRibbonTab containing definitions for new tabs. The default value is null.
Remarks

This parameter allows developers to add entirely new ribbon tabs with custom content and behavior beyond the built-in spreadsheet functionality. Custom tabs provide a way to extend the ribbon with application-specific commands and controls.

Key behaviors:

  • Custom tabs are rendered alongside built-in tabs (Home, Insert, Review, View) in the ribbon.
  • Each custom tab is defined by a SpreadsheetCustomRibbonTab instance containing a RenderFragment template.
  • Set Index to control the tab's position; -1 appends to the end.
  • The developer completely controls the tab's appearance, content, and event handlers via the template.
  • You can combine custom tabs with built-in tab customizations for complete ribbon control.

When this parameter is null or an empty collection, no custom tabs are added to the ribbon.

Examples

Example: Add a custom tab to the ribbon

@using Syncfusion.Blazor.Spreadsheet
@using Syncfusion.Blazor.Ribbon
@using Microsoft.AspNetCore.Components

<SfSpreadsheet @ref="SpreadsheetInstance"
               DataSource="DataSourceBytes">
    <SpreadsheetRibbon CustomRibbonTabs="@GetCustomTabs()">
    </SpreadsheetRibbon>
</SfSpreadsheet>

@code {
    public SfSpreadsheet SpreadsheetInstance { get; set; }
    public byte[] DataSourceBytes { get; set; }
    List<SpreadsheetCustomRibbonTab> GetCustomTabs()
    {
        return new List<SpreadsheetCustomRibbonTab>
        {
            new SpreadsheetCustomRibbonTab
            {
                Index = 5,  // Append to end
                Template = CustomTabTemplate
            }
        };
    }
}

RibbonGroupItems

Gets or sets the customization rules for built-in ribbon groups in the SfSpreadsheet component's ribbon tabs.

Declaration
[Parameter]
public List<SpreadsheetRibbonGroup> RibbonGroupItems { get; set; }
Property Value
Type Description
List<SpreadsheetRibbonGroup>

A List<T> of SpreadsheetRibbonGroup containing customization rules for groups. The default value is null.
Remarks

This parameter allows you to customize the visibility and display order of ribbon groups (such as Clipboard, Font Style, Borders, Alignment, etc.) within their parent tabs. Ribbon groups provide visual separation and organization of related ribbon items.

Behavior:

  • When this parameter is null or an empty collection, all built-in groups are displayed in their default order and visibility state.
  • Only groups specified in this collection are customized; other groups remain unaffected with their default settings.
  • Hidden groups do not occupy space in the tab and are completely removed from the UI.
  • Group reordering affects only groups within the same tab; groups in different tabs are unaffected.
  • Hiding a group hides all its child items; you do not need to hide items individually if you hide their parent group.
Examples

Example: Hide the Borders group and reorder Font Style to appear first in the Home tab

@using Syncfusion.Blazor.Spreadsheet
@using Syncfusion.Blazor.Ribbon

<SfSpreadsheet @ref="SpreadsheetInstance"
               DataSource="DataSourceBytes">
    <SpreadsheetRibbon RibbonGroupItems="@GetGroupCustomizations()">
    </SpreadsheetRibbon>
</SfSpreadsheet>

@code {
    public SfSpreadsheet SpreadsheetInstance { get; set; }
    public byte[] DataSourceBytes { get; set; }

    List<SpreadsheetRibbonGroup> GetGroupCustomizations()
    {
        return new List<SpreadsheetRibbonGroup>
        {
            // Hide the Borders group
            new SpreadsheetRibbonGroup 
            { 
                GroupId = "bordersGroup", 
                TabId = "homeTab",
                IsVisible = false 
            },
            // Reorder Font Style to appear first
            new SpreadsheetRibbonGroup 
            { 
                GroupId = "fontStyleGroup", 
                TabId = "homeTab",
                Order = 0
            }
        };
    }
}

RibbonItems

Gets or sets the customization rules for built-in ribbon items (buttons, controls, etc.) in the SfSpreadsheet component's ribbon groups.

Declaration
[Parameter]
public List<SpreadsheetRibbonItem> RibbonItems { get; set; }
Property Value
Type Description
List<SpreadsheetRibbonItem>

A List<T> of SpreadsheetRibbonItem containing customization rules for items. The default value is null.
Remarks

This parameter allows you to customize the visibility, enabled/disabled state, and display order of individual ribbon items such as Bold, Italic, Undo, Redo, borders, colors, etc. Ribbon items are the basic interactive controls in the ribbon UI.

Behavior:

  • When this parameter is null or an empty collection, all built-in items are displayed in their default state with dynamic enable/disable management by the framework.
  • Only items specified in this collection are customized; other items remain unaffected with their default settings.
  • When IsEnabled is null, the framework automatically enables/disables items based on context (e.g., Paste is disabled when clipboard is empty).
  • When IsEnabled is true or false, the state is locked and the framework will not change it dynamically.
  • Item reordering affects only items within the same group; items in different groups are unaffected.
Examples

Example: Hide Strikethrough, disable Protect Sheet, and reorder formatting buttons

@using Syncfusion.Blazor.Spreadsheet
@using Syncfusion.Blazor.Ribbon

<SfSpreadsheet @ref="SpreadsheetInstance"
               DataSource="DataSourceBytes">
    <SpreadsheetRibbon RibbonItems="@GetItemCustomizations()">
    </SpreadsheetRibbon>
</SfSpreadsheet>

@code {
    public SfSpreadsheet SpreadsheetInstance { get; set; }
    public byte[] DataSourceBytes { get; set; }

    List<SpreadsheetRibbonItem> GetItemCustomizations()
    {
        return new List<SpreadsheetRibbonItem>
        {
            // Hide the Strikethrough button
            new SpreadsheetRibbonItem 
            { 
                ItemId = "strikethroughbutton", 
                IsVisible = false 
            },
            // Disable the Protect Sheet button
            new SpreadsheetRibbonItem 
            { 
                ItemId = "protectsheetbutton", 
                IsEnabled = false 
            },
            // Reorder Bold button to appear first
            new SpreadsheetRibbonItem 
            { 
                ItemId = "boldButton", 
                Order = 0 
            }
        };
    }
}

RibbonTabItems

Gets or sets the customization rules for built-in ribbon tabs in the SfSpreadsheet component.

Declaration
[Parameter]
public List<SpreadsheetRibbonTab> RibbonTabItems { get; set; }
Property Value
Type Description
List<SpreadsheetRibbonTab>

A List<T> of SpreadsheetRibbonTab containing customization rules for tabs. The default value is null.
Remarks

This parameter allows you to customize the visibility, display order, and header text of built-in ribbon tabs such as Home, Insert, Review, and View.

Behavior:

  • When this parameter is null or an empty collection, all built-in tabs are displayed in their default order with their default labels.
  • Only tabs specified in this collection are customized; other tabs remain unaffected with their default settings.
  • Hidden tabs can be shown later by modifying this parameter or calling ribbon methods.
Examples

Example: Hide the Review tab, reorder Home to appear first, and customize the Insert tab header

@using Syncfusion.Blazor.Spreadsheet
@using Syncfusion.Blazor.Ribbon

<SfSpreadsheet @ref="SpreadsheetInstance"
               DataSource="DataSourceBytes">
    <SpreadsheetRibbon RibbonTabItems="@GetTabCustomizations()">
    </SpreadsheetRibbon>
</SfSpreadsheet>

@code {
    public SfSpreadsheet SpreadsheetInstance { get; set; }
    public byte[] DataSourceBytes { get; set; }

    List<SpreadsheetRibbonTab> GetTabCustomizations()
    {
        return new List<SpreadsheetRibbonTab>
        {
            // Hide the Review tab
            new SpreadsheetRibbonTab 
            { 
                TabId = "reviewTab", 
                IsVisible = false 
            },
            // Reorder Home tab to appear first
            new SpreadsheetRibbonTab 
            { 
                TabId = "homeTab", 
                Order = 0 
            },
            // Customize Insert tab header
            new SpreadsheetRibbonTab 
            { 
                TabId = "insertTab", 
                HeaderText = "Add Content",
                Order = 1
            }
        };
    }
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

Dispose()

Disposes of unmanaged resources used by the SpreadsheetRibbon component.

Declaration
public void Dispose()

Dispose(bool)

Disposes of unmanaged resources used by the SpreadsheetRibbon component.

Declaration
protected virtual void Dispose(bool disposing)
Parameters
Type Name Description
bool disposing

OnAfterRenderAsync(bool)

Performs first-render initialization of visual state in the ribbon.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

True if this is the first render.
Returns
Type
Task
Overrides

OnInitialized()

Initializes the ribbon component and subscribes to Spreadsheet events.

Declaration
protected override void OnInitialized()
Overrides

OnParametersSet()

Processes ribbon customization parameters during component initialization and updates.

Declaration
protected override void OnParametersSet()
Overrides

Implements