How to: Enter numeric values

  • 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).

CalcEditAndSpinEdit.png

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.

    CalcEdit - Smart Tag - Change Mask Command

  • Click the ellipsis button for the MaskSettings property in the Property Grid. CalcEdit - MaskSettings in PropertyGrid

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.

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

CalcEdit-P2Mask

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.

Mask Settings dialog - 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:

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.

    Text Edit - Smart Tag - Change Mask action

  • Specify an input mask and mask settings.

Text Edit - Mask Settings - Mask P

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:

    • Set the editor’s initial value to a decimal value.
    • Bind the editor to a data source field of the decimal type.
    • Set the Value Type mask setting to Decimal.

      Numeric Mask - Output Value 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:

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;

TextEdit-NumericMaskType

See Also