Skip to main content

IBarCheckableButton Interface

A checkable button on the Rich Text Editor‘s ribbon or toolbar.

Namespace: DevExpress.Blazor.Office

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IBarCheckableButton :
    IBarButton,
    IBarItemWithImageBase,
    IBarItem,
    IBarItemBase

Remarks

The following code snippet creates a custom checkable button that allows users to save the document.

<DxRichEdit CustomizeToolbar=OnCustomizeToolbar BarMode=BarMode.Toolbar/>

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        BarGroupCollection groups = toolbar.Groups;
        groups.Clear();
        AddFileCommonGroup(groups);
        // ...
    }

    void AddFileCommonGroup(BarGroupCollection groups) {
        IBarGroup fileCommonGroup = groups.Add(RichEditRibbonGroupNames.FileCommon);
        // ...

        // adds a custom checkable button
        IBarCheckableButton saveButton = fileCommonGroup.Items.AddCustomCheckButton(1, "Save",
            async () => await rich.SaveDocumentAsync(),
            () => !modified
        );
        saveButton.IconUrl = "_content/BlazorDemo/images/Save.svg";
        saveButton.Tooltip = "Save the document.";

    }    
}

Add a Custom Checkable Button

Run Demo: Toolbar Customization

See Also