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:

   • CssClass
   • NavigateUrl
   • IconPosition
   • Position
   • and so on

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>

Run Demo: Editors - Command Buttons

Implements

IComponent

IHandleAfterRender

IHandleEvent

IDisposable

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.RenderComponentBase

DevExpress.Blazor.Internal.Editors.DxEditorButtonBase

DxEditorButton