IBarGroup Interface

An item group on the Rich Text Editor‘s ribbon or toolbar and the HTML Editor‘s toolbar.

Namespace: DevExpress.Blazor.Office

Assembly: DevExpress.Blazor.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IBarGroup :
    IBarItemBase

Related API Members

The following members return IBarGroup objects:

• BarGroupCollection.Add(Int32, String)
• BarGroupCollection.Add(String)
• BarGroupCollection.AddCustomGroup()
• BarGroupCollection.AddCustomGroup(Int32)

Remarks

The IBarGroup interface defines an item group on a toolbar or ribbon. Use the interface properties to change group visibility or customize group appearance.

Rich Text Editor

The Rich Text Editor can display its command bar in two ways:

• Ribbon UI. The ribbon consists of multiple tabs. A tab includes groups, and a group can contain various items.

  Run Demo: Ribbon Customization

• Toolbar UI. The toolbar consists of groups, and each group contains one or more items.

  Run Demo: Toolbar Customization

The following code snippet customizes the first group on the Insert ribbon tab.

<DxRichEdit CustomizeRibbon=OnCustomizeRibbon @bind-Selection=@selection />

@code {
    Selection selection;

    void OnCustomizeRibbon(IRibbon ribbon) {
        IBarGroup firstGroup = ribbon.Tabs[RichEditRibbonTabNames.Insert].Groups[0];
        firstGroup.Text = "Insert Fields";
        firstGroup.IconUrl = "your-icon-url";
        firstGroup.GetVisible = () => selection.ActiveSubDocument.Type != SubDocumentType.TextBox;
        firstGroup.Items.Clear();
        firstGroup.Items.Add(RichEditBarItemNames.InsertFieldMenu);
    }
}

HTML Editor

The Blazor HTML Editor displays its command bar as a toolbar. The toolbar consists of groups, and each group contains one or more items.

Run Demo: Html Editor - Overview

The following code snippet customizes the Font group of the HTML Editor’s toolbar:

<DxHtmlEditor CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    bool canFormat = true;

    void OnCustomizeToolbar(IToolbar toolbar) {
        IBarGroup fontGroup = toolbar.Groups[HtmlEditorToolbarGroupNames.Font];
        fontGroup.Text = "Text Format";
        fontGroup.IconUrl = "your-icon-url";
        fontGroup.GetVisible = () => canFormat;
        fontGroup.Items.Clear();
        fontGroup.Items.Add(HtmlEditorToolbarItemNames.FontBold);
    }
}