DxEditorButton Class

A custom button displayed in an editor.

Assembly: DevExpress.Blazor.v23.2.dll

Declaration

public class DxEditorButton :
    DxEditorButtonBase,
    IEditorButton,
    IEditorButtonBase

Remarks

You can add a custom command button (DxEditorButton) to different Blazor editors: DxDateEdit<T>, DxComboBox<TData, TValue>, DxMaskedInput<T>, DxSpinEdit<T>, DxTextBox, DxTimeEdit<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:
- CssClass
- NavigateUrl
- IconPosition
- Position
- and so on
Handle the Click event to respond to the button click.

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

@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";
    }
}

<style>
    .dx-demo-editor-width {
        max-width: 320px;
        width: 100%;
    }
</style>