DxSpinEdit<T> Class

A Spin Edit component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxSpinEdit<T> :
    DxResizableEditorBase<T, SpinEditJSInteropProxy>,
    IInputBase,
    ISpinEditJSInteropProxyServer,
    IJSCallback,
    IDisposable

Type Parameters

Name Description
T

The data type.

Remarks

The DevExpress Spin Edit for Blazor (<DxSpinEdit>) allows you to display and edit numeric values. Users can do any of the following to change the editor’s value:

  • Press the spin buttons. When a user presses or holds a spin button, it continuously increments/decrements the editor’s value.
  • Scroll the mouse wheel.
  • Use the Up and Down arrow keys.
  • Type a new value in the edit box.

SpinEdit Overview

Touch screens display the increment and decrement spin buttons separately.

SpinEdit Overview Touch

Run Demo: Spin Edit - Overview

Add a Spin Edit to a Project

Follow the steps below to add the Spin Edit component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxSpinEdit></DxSpinEdit> markup to a Razor page.
  3. Configure the component (see the sections below).

Edit Value

Use the Value property to specify an editor’s value or to bind the value to a data source object. You can use the @bind attribute to bind the Value property to a data field. Refer to the following topic for details: Two-Way Data Binding.

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

<DxSpinEdit @bind-Value="@DecimalValue"></DxSpinEdit>

@code {
    Decimal DecimalValue { get; set; } = 15;
}

The component supports the following data types:

The Value property is updated when the editor loses focus (OnLostFocus mode). You can set the BindValueMode property to OnInput to update the Value property when a user changes the input value.

If you do not use two-way data binding, handle the ValueChanged event to respond to the editor’s value change. The code below enables the Update Value button when a user changes the editor value.

<DxSpinEdit Value="@NumericValue" ValueChanged="@((int newValue) => OnValueChanged(newValue))"></DxSpinEdit>
<DxButton Enabled="@IsEnabled">Update Value</DxButton>

@code {
    int NumericValue = 0;
    bool IsEnabled = true;

    void OnValueChanged(int newValue) {
        NumericValue = newValue;
        if (newValue != 0)
            IsEnabled = false;
        else IsEnabled = true;
    }
}

Nullable Value and Placeholder

If the Spin Edit’s data type is nullable, users can delete the editor value (set it to null).

You can also set the ClearButtonDisplayMode property to Auto to show the Clear button when the editor has a non-null value. Use the NullText property to display the prompt text (placeholder) in the editor when its value is null.

<DxSpinEdit @bind-Value="@NumericValue"
            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
            NullText="Type a value..."></DxSpinEdit>

@code {
    int? NumericValue { get; set; } = 721;
}

SpinEdit ClearButton

Run Demo: Spin Edit - Nullable Value and Placeholder

Minimum / Maximum Values

Use the MinValue and MaxValue properties to limit the editor’s minimum and maximum values.

<DxSpinEdit @bind-Value="DecimalValue" MinValue="0" MaxValue="1" />

Once you specify these values, the Spin Edit does not allow a user to set a value that is less or more than the MinValue and MaxValue.

Increment Value

Use the Increment property to change the editor’s unit value. This value is added to/subtracted from the Value property value each time a user clicks the increment/decrement spin button.

<DxSpinEdit @bind-Value="DecimalValue" Increment="0.1m" MinValue="0" MaxValue="1" />

@code {
    Decimal DecimalValue { get; set; } = 0.5m;
}

SpinEdit Increment

Run Demo: Spin Edit - Custom Increment

Display Format

Use the DisplayFormat property to format the Spin Edit’s display value when the editor is not focused. See the Standard Numeric Format Strings and Custom Numeric Format Strings help topics for more information.

The following example demonstrates how to apply the currency format:

<DxSpinEdit @bind-Value="@DecimalValue" DisplayFormat="C"></DxSpinEdit>

@code {
    Decimal DecimalValue { get; set; } = 320.5m;
}

SpinEdit DisplayFormat

Run Demo: Spin Edit - Display Format

Size Modes

Use the SizeMode property to specify a Spin Edit size. The code below applies different size modes to Spin Edit components.

<DxSpinEdit @bind-Value="@DecimalValue" SizeMode="SizeMode.Small"></DxSpinEdit>

<DxSpinEdit @bind-Value="@DecimalValue" SizeMode="SizeMode.Medium"></DxSpinEdit>

<DxSpinEdit @bind-Value="@DecimalValue" SizeMode="SizeMode.Large"></DxSpinEdit>

@code {
    Decimal DecimalValue { get; set; } = 15;
}

For more information, refer to the following topic: Size Modes.

Input Validation

You can add a standalone Spin Edit or the Form Layout component to the Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.

<EditForm Model="@starship" Context="EditFormContext">
    <DataAnnotationsValidator />
    <DxFormLayout >
        <DxFormLayoutItem Caption="Maximum Accommodation:" ColSpanMd="6" >
            <Template >
                <DxSpinEdit @bind-Value="@starship.MaximumAccommodation" />
            </Template >
        </DxFormLayoutItem >
        @*...*@
    </DxFormLayout>
</EditForm>

@code {
    private Starship starship=new Starship();
}

For more information, refer to the following help topic: Validate Input.

Run Demo: Form Validation

Hide Spin Buttons

Set the ShowSpinButtons property to false.

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

SpinEdit HideSpinButtons

Read-Only State

<DxSpinEdit> supports a read-only state. Set the ReadOnly property to true to activate this option.

<DxSpinEdit ReadOnly="true"> </DxSpinEdit>

Run Demo: Spin Edit - Read-Only and Disabled Modes

HTML Attributes and Events

You can use HTML attributes and events to configure the Spin Edit.

<DxSpinEdit Value="1" 
            list="values" 
            maxlength="2" 
            @onwheel="MyFunction">
</DxSpinEdit>

@*Supply a list of the predefined values*@
<datalist id="values">
    <option value=10/>
    <option value=30/>
    <option value=50/>
</datalist>

@code {
    void MyFunction(){
        //...
    }
}

Spin Edit - HTML Attributes

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.SpinEditJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<T, DevExpress.Blazor.Internal.JSInterop.SpinEditJSInteropProxy>
DxDataEditorBase<T, DevExpress.Blazor.Internal.JSInterop.SpinEditJSInteropProxy>
DxResizableEditorBase<T, DevExpress.Blazor.Internal.JSInterop.SpinEditJSInteropProxy>
DxSpinEdit<T>
See Also