Skip to main content
All docs
V25.1
  • DxSpinEdit<T>.Buttons Property

    Allows you to add command buttons to the Spin editor.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.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:

    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>
    

    SpinEdit - Add Command Button

    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.

    See Also