DxEditorButton Class

A custom button displayed in an editor.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxEditorButton :
    DxEditorButtonBase,
    IEditorButton,
    IEditorButtonBase

Remarks

You can add custom command buttons (DxEditorButton) to different Blazor editors, for instance, DxDateEdit<T>, DxComboBox<TData, TValue>, DxSpinEdit<T>.

Follow the steps below:

Add the <Buttons></Buttons> tag to the component’s markup to define the Buttons collection.
Add the DxEditorButton object to the Buttons collection.
Set up button properties:
Handle the Click event to respond to the button click.

The following code adds a custom currency button to the Spin editor.

Razor
CSS

razor

@using System.Globalization

<DxSpinEdit @bind-Value="@Price"
                Mask="@NumericMask.Currency">
        <Buttons>
            <DxEditorButton IconCssClass="@($"editor-icon {CurrencyButtonIconClass}")"
                            Tooltip="Change currency"
                            Click="@OnChangeCultureInfoButtonClick"
                            CssClass="dx-demo-editor-width" />
        </Buttons>
        <ChildContent>
            <DxNumericMaskProperties Culture="MaskCultureInfo" />
            </ChildContent>
</DxSpinEdit>

@code{
double Price { get; set; }
string CurrencyButtonIconClass { get; set; } = "editor-icon-euro";
CultureInfo MaskCultureInfo { get; set; } = CultureInfoItems[0];
    static CultureInfo[] CultureInfoItems { get; set; } = {
            CultureInfo.GetCultureInfo("en-US"),
            CultureInfo.GetCultureInfo("de-DE")
    };
    void OnChangeCultureInfoButtonClick() {
        var isCurrentCultureUs = MaskCultureInfo.Equals(CultureInfoItems[0]);
        MaskCultureInfo = isCurrentCultureUs ? CultureInfoItems[1] : CultureInfoItems[0];
        CurrencyButtonIconClass = isCurrentCultureUs ? "editor-icon-dollar" : "editor-icon-euro";
    }
}

css

.dx-demo-editor-width {
    max-width: 320px;
    width: 100%;
}

Run Demo: Editors - Command Buttons

Implements

Inheritance

Object ComponentBase DevExpress.Blazor.Internal.RenderComponentBase DevExpress.Blazor.Internal.Editors.DxEditorButtonBase DxEditorButton