BarItemCollection Class

A collection of items in the Rich Text Editor‘s ribbon group or toolbar group.

Assembly: DevExpress.Blazor.v24.1.dll

Declaration

public class BarItemCollection :
    BarItemCollectionBase<IBarItem>

The following members return BarItemCollection objects:

Remarks

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

Use the BarItemCollection class methods to add default or custom items to the bar.

Add Default Items

The Add method overloads allow you to add a predefined item to a ribbon or toolbar group. Use the RichEditBarItemNames class properties to obtain names of all built-in items.

The following code snippet customizes the ribbon as follows:

Gets the default Insert tab.
Gets the tab’s Insert Header and Footer group.
Adds the default Insert Date Field and Insert Time Field items to this group.

<DxRichEdit CustomizeRibbon=OnCustomizeRibbon />

@code {
    void OnCustomizeRibbon(IRibbon ribbon) {
        IRibbonTab insertTab = ribbon.Tabs[RichEditRibbonTabNames.Insert];
        IBarGroup group = insertTab.Groups[RichEditRibbonGroupNames.InsertHeaderAndFooter];
        // Inserts the Insert Time Field item at the end of the item collection
        group.Items.Add(RichEditBarItemNames.InsertTimeField);
        // Inserts the Insert Date Field item at the first position in the item collection
        group.Items.Add(0, RichEditBarItemNames.InsertDateField);
    }
}

Add Default Items

Run Demo: Toolbar Customization Run Demo: Ribbon Customization

Add Custom Items

Call one of the following method overloads to add a custom item to the item collection:

The following code snippet creates a custom group on the File ribbon tab and adds the following items to this group:

A button that allows users to export a document to a specific format.
A combo box that allows users to select a target document format.

<DxRichEdit @ref=@rich DocumentFormat=@documentFormat @bind-Modified=@modified 
    CustomizeRibbon=OnCustomizeRibbon/>

@code {
    DxRichEdit rich;
    DocumentFormat documentFormat = DocumentFormat.OpenXml;
    bool modified = false;

    void OnCustomizeRibbon(IRibbon ribbon) {
        ribbon.Tabs[RichEditRibbonTabNames.File].Groups.Clear();
        IBarGroup fileGroup = ribbon.Tabs[RichEditRibbonTabNames.File].Groups.AddCustomGroup(0);
        // Inserts a custom combo box at the end of the item collection
        IBarComboBox documentFormatComboBox = fileGroup.Items.AddCustomComboBox(
            () => documentFormat,
            (value) => Task.FromResult(documentFormat = (DocumentFormat)value)
        );
        documentFormatComboBox.Items.Add("DOCX", DocumentFormat.OpenXml);
        documentFormatComboBox.Items.Add("RTF", DocumentFormat.Rtf);
        // Inserts a custom button at the first position in the item collection
        IBarButton exportButton = fileGroup.Items.AddCustomButton(0, "Export", DownloadDocumentAsync);  
    }

    async Task DownloadDocumentAsync() {
        if (documentFormat == DocumentFormat.OpenXml)
            await rich.ExportDocumentAsync("C:\\Users\\Public\\annual-report.docx", documentFormat);
        else
            await rich.ExportDocumentAsync("C:\\Users\\Public\\annual-report.rtf", documentFormat);
    }
}

Add Custom Items