How to: Enter numeric values

Sep 03, 2021
3 minutes to read

The Editors library contains dedicated editors (CalcEdit and SpinEdit) controls) to display and edit numeric values. You can also allow any text editor to accept numeric values.

CalcEdit and SpinEdit Controls

The CalcEdit and SpinEdit editors allow you to edit numeric values in various formats (integer and floating-point values, currency and percentage).

These editors use numeric masks (see editor.Properties.MaskSettings) to restrict user input to valid numbers.

Change the input pattern

Use the Mask Settings dialog to change the input pattern (mask) at design time. You can use one of the following actions to open this dialog:

Click the Change Mask command in the editor’s smart tag menu.
Click the ellipsis button for the MaskSettings property in the Property Grid.

The Mask Settings dialog allows you to specify a mask and customize mask options.

To specify an input mask in code, use the Properties.EditMask or Properties.MaskSettings.MaskExpression property.

C#
VB.NET

csharp

// Percentage with 2 decimal places
calcEdit1.Properties.MaskSettings.MaskExpression = "P2"; 
calcEdit1.Properties.UseMaskAsDisplayFormat = true;

' Percentage with 2 decimal places
CalcEdit1.Properties.MaskSettings.MaskExpression = "P2"
CalcEdit1.Properties.UseMaskAsDisplayFormat = True

For information on how to specify a mask on the data source layer, see Mask Type: Numeric. This topic also lists the available mask specifiers.

Customize Mask Options

Check the Advanced Settings check box in the Mask Settings dialog to show mask options.

These options include:

Specify a value assigned to the editor when a user presses Backspace or Delete to clear the editor.
Specify the output data type.
Hide the decimal separator for whole numbers.
Hide insignificant zeros.
Use the current mask as a display format when the editor is not focused.
Produce a beep sound when users enter an invalid character.

The Mask Type: Numeric topic describes these options in more detail.

Editor’s Value

Use the following properties to get and set values for standalone editors:

CalcEdit.Value (a decimal value)
SpinEdit.Value (a decimal value)

These properties are synchronized with the editor’s EditValue property which is of the object type.

Use the EditValue property for data binding.

Text Editors

To allow a text editor (TextEdit or its descendant) to accept numeric values, do the following:

Select the “Numeric” mask type.
Specify an input mask and mask settings.

Tip

If you do not specify the mask, the editor will use the default mask that accepts decimal numbers.

Do one of the following to specify the editor’s output numeric data type:
Optionally change the text alignment from the editor.Properties.Appearance.TextOptions.HAlignment property.

The following example applies the “P” mask to a text editor:

C#
VB.NET

csharp

using DevExpress.XtraEditors.Mask;

var settings = textEdit1.Properties.MaskSettings.Configure<MaskSettings.Numeric>();
settings.MaskExpression = "P";
textEdit1.Properties.MaskSettings.UseMaskAsDisplayFormat = true;
textEdit1.EditValue = 10.3;
textEdit1.Properties.Appearance.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Far;

Imports DevExpress.XtraEditors.Mask

Dim settings = TextEdit1.Properties.MaskSettings.Configure(Of MaskSettings.Numeric)()
settings.MaskExpression = "P"
TextEdit1.Properties.MaskSettings.UseMaskAsDisplayFormat = True
TextEdit1.EditValue = 10.3
TextEdit1.Properties.Appearance.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Far