Overview

The Spin Edit allows you to display and edit numeric values. Users can press the spin buttons to change the editor’s value, use the ARROW UP and ARROW DOWN keys, or type a new value in the edit box.

Spin Edit works with built-in .NET data types, including System.Decimal. The editor processes values directly on the server side, without converting them to or from JavaScript number types. This ensures that values users enter never lose precision because of type conversions.

The Spin Edit component supports different size modes. To specify the component's size in code, use the SizeMode property. To apply different size modes, use the drop-down list in the demo card's header.

Bind Value On Input Change

Set the BindValueMode property to BindValueMode.OnInput to update the Value property each time the input value changes.

Custom Increment

Use the Increment property to specify the step by which the editor's value changes when a user clicks the spin buttons. The MinValue and MaxValue properties allow you to limit the editor’s minimum and maximum values.

Nullable Value

Do any of the following to clear the Spin Edit (set its value to null):

  • Delete the value in the editor.
  • Click the Clear button. This button is displayed when you set the ClearButtonDisplayMode property to Auto.

Use the NullText property to display placeholder text in the Spin Edit when its value is null.

Display Format

Use the DisplayFormat property to format the Spin Edit’s display value when the editor is not focused.

Spin Edit supports standard formats. See the Standard Numeric Format Strings and Custom Numeric Format Strings help topics for more information.

Read-Only and Disabled Modes

In this demo, the Spin Edit displays values but does not allow users to change them. To implement this behavior, you can use any of the following modes:

  • Read-only mode. In this mode, you can use the keyboard to focus and navigate the component. Set the ReadOnly property to true to activate this mode.
  • Disabled mode. In this mode, the component cannot be focused or navigated. Set the Enabled property to false to activate this mode.