Skip to main content

DxEditorButton Class

A custom button displayed in an editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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:

  1. Add the <Buttons></Buttons> tag to the component’s markup to define the Buttons collection.
  2. Add the DxEditorButton object to the Buttons collection.
  3. Set up button properties:

  4. 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>

SpinEdit - Add Command Button

Run Demo: Editors - Command Buttons

Inheritance

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