Default Spin Edit

The Bootstrap Spin Edit control provides easy numeric value editing by incrementing and decrementing edit values using spin buttons, a mouse wheel, or keyboard. This example demonstrates the Bootstrap Spin Edit control with default settings.

@(Html.DevExpress()
    .BootstrapSpinEdit("spinEditDefault")
    .Value(1)
)

MinValue and MaxValue

In this example, the MinValue and MaxValue methods are used to specify the minimum and maximum values allowed to be entered using the Spin Editor.

@(Html.DevExpress()
    .BootstrapSpinEdit("minValueAndMaxValueSpinEdit")
    .Value(1)
    .MinValue(0)
    .MaxValue(10)
)

Null Text

This demo illustrates how the NullText method can be used to display prompt text (watermark) in the editor's edit box. Specified text is displayed when the value of the editor is null and the editor is not focused. The prompt text disappears when the editor receives focus. To show the null text even in the focused editor call the NullTextDisplayMode method with the UnfocusedAndFocused argument.

@(Html.DevExpress()
    .BootstrapSpinEdit("nullTextSpinEdit")
    .MinValue(18)
    .MaxValue(100)
    .NullText("Enter Your Age")
)

Display Format

The DisplayFormatString method specifies the pattern used to format the value of an editor for display purposes when the editor is not focused. Display values can be formatted using the standard formatting mechanism described in MSDN. For more information about composing format patterns, see the following MSDN topics: Numeric Format Strings and Date and Time Format Strings.

@(Html.DevExpress()
    .BootstrapSpinEdit("displayFormatSpinEdit")
    .Value(200)
    .MinValue(0)
    .MaxValue(1000)
    .DisplayFormatString("C")
)

Caption and HelpText

In this example, the Spin Edit control displays a caption on the top and auxiliary help text at the bottom of the editor.

@(Html.DevExpress()
    .BootstrapSpinEdit("captionAndHelpTextSpinEdit")
    .Caption("Age")
    .MinValue(18)
    .MaxValue(100)
    .HelpText("Enter your age")
)
Screen Size
Color Themes
Demo QR Code