DxSpinEdit<T> Class

A Spin Edit component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxSpinEdit<T> :
    DxSpinEditBase<T>

Type Parameters

Name Description
T

The data type.

Remarks

The DevExpress Spin Edit for Blazor (<DxSpinEdit>) allows you to display and edit numeric values. Use spin buttons to increment values.

Blazor-SpinEdit-Overview

To add the <DxSpinEdit> component to an application, follow the steps below:

  • Create and configure the application as described in the Create a New Blazor Application document.

  • Add the <DxSpinEdit>...</DxSpinEdit> markup to your application.

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

<DxSpinEdit Value="123.45"></DxSpinEdit>

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

@code {
    Decimal DecimalValue = "123.45";
}

The component supports the following data types:

Handle the ValueChanged event to respond to the editor's value change. The code below enables the Update Value button once a user changes the editor value.

<DxSpinEdit Value="@Value" ValueChanged="@((newValue) => OnValueChanged(newValue))"></DxSpinEdit>
<button type="button" class="btn btn-primary" disabled="@IsDisabled">Update Value</button>

@code {

    int Value = 0;
    bool IsDisabled = true;

    void OnValueChanged(int newValue)
    {
        Value = newValue;
        if (newValue != 0)
            IsDisabled = false;

       InvokeAsync(StateHasChanged);     
    }
}

Nullable Value

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 in the editor when its value is null.

<DxDateEdit @bind-Date="@DateTimeValue"
            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
            NullText="Type a value..."></DxDateEdit>

@code {
    DateTime? DateTimeValue { get; set; }
}

Blazor-SpinEdit-ClearButton

NOTE

Online Demo: Spin Edit - Nullable Value

Minimum / Maximum Values

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

<DxSpinEdit MinValue="0" MaxValue="100"></DxSpinEdit>

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.

Read-Only State

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

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

Online Demo: Spin Edit - Read-Only Mode

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DevExpress.Blazor.Internal.DxEditorBase<T, DevExpress.Blazor.Internal.JSInterop.JSInteropProxyBase>
DxSpinEditBase<T>
DxSpinEdit<T>
See Also