Command Buttons

• Apr 01, 2024
• 2 minutes to read

DevExpress Blazor editors display built-in command buttons that allow users to open a drop-down, increase/decrease the value, or clear the edit box content.

You can use Show***Button properties to hide these buttons.

You can also customize default command button or add custom buttons to editors. Follow the steps below.

1. Add the <Buttons></Buttons> tag to the editor’s markup to define the Buttons collection.

2. Fill the Buttons collection.

   The following buttons are available:

   • DxComboBoxDropDownButton - A button that invokes a drop-down menu (can be added to the DxComboBox<TData, TValue> only).
   • DxDateEditDropDownButton - A button that invokes a drop-down calendar (can be added to the DxDateEdit<T> only).
   • DxSpinButtons - Spin buttons that allow you to increase and decrease a value (can be added to the DxSpinEdit<T> only).
   • DxTimeEditDropDownButton - A button that invokes a drop-down time picker (can be added to the DxTimeEdit<T> only).

   The following button is available for the DxComboBox<TData, TValue>, DxDateEdit<T>, DxMaskedInput<T>, DxSpinEdit<T>, DxTextBox, and DxTimeEdit<T> components:

   • DxEditorButton - A custom button displayed in an editor.

3. Set up button properties to customize the buttons:

   • CssClass
   • Position
   • and so on

Buttons are displayed in an editor in the following order:

• The “Clear” button
• Custom buttons and customized default buttons (in the same order as they appear in markup)
• Built-in buttons

Run Demo: Editors - Command Buttons

Examples

Hide Built-in Button

The code below hides the built-in spin buttons in the Spin editor.

<DxSpinEdit Value="15" ShowSpinButtons="false"></DxSpinEdit>

Customize Default Button

The code below hides the built-in spin buttons, adds new spin buttons, and specifies their position.

<DxSpinEdit Value="15" ShowSpinButtons="false">
        <Buttons>
            <DxSpinButtons Position="EditorButtonPosition.Left"/>
        </Buttons>
</DxSpinEdit>

Add Custom Button

The code below 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>

Watch Video: Text Box - Add Command Buttons