Display Settings in MaskedEditBox

9 Oct 20235 minutes to read

This section discusses the display settings of the MaskedEditBox control.

Separators

You can display the data along with separators specifying date, time, decimals and thousands at run time by using DateSeparator, TimeSeparator, DecimalSeparator and ThousandSeparator properties. It is not required to type separators at run time. Separators can be specified in the mask character itself.

MaskedEditBox Properties Description
DateSeparator Specifies the character to use when a date separator position is specified.The default separator is '/'.
DecimalSeparator Specifies the character to use when a decimal separator position is specified.The default separator is '.'.
ThousandSeparator Specifies the character to use when a thousands separator position is specified.The default separator is ','.
TimeSeparator Specifies the character to use when a time separator position is specified.The default separator is ':'.

For example, if you want to display the user data in date time format say mm/dd/yy, the mask character should be ‘##/##/##’.

We can change the default separators used. If you want to display the date time as ‘mm-dd-yy’, change the DateSeparator property from ‘/’ to ‘-‘.

Similarly other separators can be used.

this.maskedEditBox1.DateSeparator = '-';
this.maskedEditBox1.DecimalSeparator = '.';
this.maskedEditBox1.ThousandSeparator = ',';
this.maskedEditBox1.TimeSeparator = ':';
Me.maskedEditBox1.DateSeparator = "-"C
Me.maskedEditBox1.DecimalSeparator = "."C
Me.maskedEditBox1.ThousandSeparator = ","C
Me.maskedEditBox1.TimeSeparator = ":"C

Set date separator to WF MaskedEditBox control

Set decimal separator to WF MaskedEditBox control

Set thousand separator to WF MaskedEditBox control

Set time separator to WF MaskedEditBox control

Cursor position

You can set the cursor position of the MaskedEditBox control by using PositionAt and PositionAtDecimal properties.

MaskedEditBox Properties Description
PositionAt Defines the control's cursor position behavior on getting the focus. The options included are as follows:

Decimal

FirstPosition and

FirstMaskPosition.

The default value is 'FirstPosition'.
PositionAtDecimal Indicates whether the cursor is to be positioned at the decimal separator (if any) when the control receives focus. 
this.maskedEditBox1.PositionAt = Syncfusion.Windows.Forms.Tools.SpecialCursorPosition.Decimal;
this.maskedEditBox1.PositionAtDecimal = true;
Me.maskedEditBox1.PositionAt = Syncfusion.Windows.Forms.Tools.SpecialCursorPosition.Decimal
Me.maskedEditBox1.PositionAtDecimal = true;

DataGroups

Text can be split up and aligned using the options provided by the below given property.

MaskedEditBox Property Description
DataGroups Specifies the data groups that can be used for splitting up the text.

The DataGroups property of the MaskedEditBox defines a virtual grouping of the mask value. Each group is defined by a MaskedEditDataGroupInfo object (the DataGroups property is a collection of these objects).

A data group is defined by its GroupLength property. For example, if the mask is given as follows,

###.###.###.###

and there are 4 groups specified with group lengths of 4, 4, 4, 3 respectively, the groups will be defined as:

Group1 ###.

Group2 ###.

Group3 ###.

Group4 ###

The DataAlignment property of the MaskedEditDataGroupInfo object specifies the type of alignment to be used for the group. The data alignment behavior will be defined as given below:

  • Left : All the filled-in mask fields in the group will be grouped to the left-most positions.
  • Right : All the filled-in mask fields in the group will be grouped to the right-most positions.
  • Center : All the filled-in mask fields in the group will be grouped to the center-most positions.

The group alignments will only be enforced after the control has lost focus.

The MaskedEditDataGroupInfo.Value property can be used to get the value of a group without any parsing. For example, if the mask is given as follows,

(###) - ### #### Extent ####

3 groups can be defined as follows:

Group1 - (###)

Group2 - ### ####

Group3 Extent - ####

The value of Group 1 will be the area code, Group 2 will be the phone number, and Group 3 will be the extension.

The following code snippet uses two groups.

// Adding DataGroups.

this.maskedEditBox1.DataGroups.Add(this.maskedEditDataGroupInfo1);
this.maskedEditBox1.DataGroups.Add(this.maskedEditDataGroupInfo2);

// Defining maskedEditDataGroupInfo1.

this.maskedEditDataGroupInfo1.DataGroupAlignment = Syncfusion.Windows.Forms.Tools.MaskGroupAlignment.Left;
this.maskedEditDataGroupInfo1.DataGroupName = "One";
this.maskedEditDataGroupInfo1.DataGroupSize = 3;

// Defining maskedEditDataGroupInfo2.
this.maskedEditDataGroupInfo2.DataGroupAlignment = Syncfusion.Windows.Forms.Tools.MaskGroupAlignment.None;
this.maskedEditDataGroupInfo2.DataGroupName = "Two";
this.maskedEditDataGroupInfo2.DataGroupSize = 4;
' Adding DataGroups.
Me.maskedEditBox1.DataGroups.Add(Me.maskedEditDataGroupInfo1)
Me.maskedEditBox1.DataGroups.Add(Me.maskedEditDataGroupInfo2)

' Defining maskedEditDataGroupInfo1.
Me.maskedEditDataGroupInfo1.DataGroupAlignment = Syncfusion.Windows.Forms.Tools.MaskGroupAlignment.Left
Me.maskedEditDataGroupInfo1.DataGroupName = "One"
Me.maskedEditDataGroupInfo1.DataGroupSize = 3

' Defining maskedEditDataGroupInfo2.
Me.maskedEditDataGroupInfo2.DataGroupAlignment = Syncfusion.Windows.Forms.Tools.MaskGroupAlignment.None
Me.maskedEditDataGroupInfo2.DataGroupName = "Two"
Me.maskedEditDataGroupInfo2.DataGroupSize = 4

Displaying characters as substitutes for user input

We can display different characters as substitutes for the user input. This can be done using the below given properties.

MaskedEditBox Properties Description
Sequentially Indicates whether the control can sequentially display mask characters.
PasswordChar Indicates the character to display for password input for single-line edit controls.

The MaskedEditBox.Sequentially property indicates whether the control can sequentially display mask characters. After setting the Sequentially property to ‘True’, you can use the PasswordChar property in order to set the character, that is to be displayed as a substitute for the user input.

private void Form1_Load(object sender, System.EventArgs e)
{
    this.maskedEditBox1.Sequentially = true;
    this.maskedEditBox1.PasswordChar = '$';
}
Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Me.maskedEditBox1.Sequentially = True
Me.maskedEditBox1.PasswordChar = "$"c
End Sub

Set the character as substitutes in WF MaskedEditBox control