The requested page is not available for the requested platform. You are viewing the content for Default platform.

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

A data item type.

Remarks

The DevExpress Spin Edit for Blazor (<DxSpinEdit>) allows you to display and edit numeric values. Use spin buttons to increment values. The component supports standard .NET integer and floating-point data types, including Decimal.

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

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);     
    }
}

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