DxSpinEdit<T>.Buttons Property

Allows you to add command buttons to the Spin editor.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[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:

Add the <Buttons></Buttons> tag to the component’s markup to define the Buttons collection.
Fill the Buttons collection. The following buttons are available:
Set up button properties to customize the buttons:

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.

Razor
CSS

razor

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

css

.dx-demo-editor-width {
    max-width: 320px;
    width: 100%;
}

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.

razor

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