Default Spin Edit

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

<dx:BootstrapSpinEdit runat="server" Number="1">
</dx:BootstrapSpinEdit>

MinValue and MaxValue

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

<dx:BootstrapSpinEdit runat="server" Number="1" MinValue="0" MaxValue="10">
</dx:BootstrapSpinEdit>

Large Increment

The Spin Edit control allows you to edit numeric values with ease by clicking small or large increment buttons.

• SpinButtons.ShowIncrementButtons - controls the visibility of small increment buttons
• SpinButtons.ShowLargeIncrementButtons - controls the visibility of large increment buttons
• Increment - specifies the increment with which the editor's value is changed when a small increment button is clicked
• LargeIncrement - specifies the increment with which the editor's value is changed when a large increment button is clicked
• SpinButtons.Position - determines the position of increment buttons

<dx:BootstrapSpinEdit runat="server" Number="1">
    <SpinButtons ShowLargeIncrementButtons="true" />
</dx:BootstrapSpinEdit>

Float Number

In this example, the Spin Edit control allows editing float numbers.

• NumberType - specifies whether a spin editor edits float or integer values
• DecimalPlaces - specifies the number of decimal places in float mode

In float mode, culture-specific separators are supported, allowing decimal separators to be uniquely displayed in various cultures.

<dx:BootstrapSpinEdit runat="server" Number="1.1" MinValue="0" MaxValue="10" Increment="0.1" LargeIncrement="1" NumberType="Float">
    <SpinButtons ShowLargeIncrementButtons="true" />
</dx:BootstrapSpinEdit>

Null Text

This demo illustrates how the NullText property 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 set the NullTextDisplayMode property to UnfocusedAndFocused.

<dx:BootstrapSpinEdit runat="server" MinValue="18" MaxValue="100" NullText="Enter Your Age">
</dx:BootstrapSpinEdit>

Display Format

The DisplayFormatString property 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.

<dx:BootstrapSpinEdit runat="server" Number="200" MinValue="0" MaxValue="1000" DisplayFormatString="C">
</dx:BootstrapSpinEdit>

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.

• Caption - specifies the caption text
• HelpText - specifies the help text

<dx:BootstrapSpinEdit runat="server" Caption="Age" MinValue="18" MaxValue="100" HelpText="Enter your age">
    <ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
</dx:BootstrapSpinEdit>

Screen Size

Color Themes

Demo QR Code