DxSpinEdit<T>.Buttons Property

Allows you to add command buttons to the Spin editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment Buttons { get; set; }

Property Value

Type	Description
RenderFragment	A collection of buttons (UI fragments).

Remarks

The Spin Edit component has the built-in buttons that increase/decrease an editor value. You can use the ShowSpinButtons property to hide these buttons.

You can also add custom command buttons to the Spin Edit:

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

2. Fill the Buttons collection. The following buttons are available:

   • DxSpinButtons - Spin buttons that allow you to increase and decrease a value (can be added to the DxSpinEdit<T> only).
   • 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

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

We do not recommend that you use conditional render within the <Buttons></Buttons tag. This may cause an incorrect button order. The following example demonstrates a case when the Button1 may change its position.

<Buttons>    
    @if(condition) {
        <DxEditorButton Text="Button1"/>    
    }    
    <DxEditorButton Text="Button2"/>    
    <DxEditorButton Text="Button3"/>
</Buttons>

If you need to hide a button, set the Visible property to false.