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.
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.
You can bind the editor's Value property to a field. If a user changes the input value, the editor updates its
Value property. Use the BindValueMode property to specify when the update should happen. The following modes are available:
OnLostFocus(default) - The editor value is updated after the editor loses focus.
OnInput- The editor value is updated whenever a user types.
OnDelayedInput- The editor value is updated with a delay after a user makes changes.
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.
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.
Our Spin Edit component supports masked input. If you specify a mask, the input box only accepts values in a specific numeric format.
To enable this functionality, assign the pattern to the component's Mask property. The DxNumericMaskProperties component specifies additional mask settings (such as culture). For more information about Numeric masks, refer to the following help topic: Numeric Masks.
Try the Mask and Culture settings to explore the different date-time mask 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: