How to make Devexpress XtraGrid cells accept only telephone numbers or decimal numbers with EditMask property

Devexpress XtraGrid can be used to for users' inputting. In some cases, you may want some XtraGrid cells to accept certain types of value. For example, Phone column in the grid managing Customers' information may accept only number value. This article will describe how to set the mask of your Devexpress XtraGrid column so that you do not need to manually handle user input validation.

Step 1: Create a TextEdit Column
Choose the column in your XtraGrid that allows only input as number and Press F4 to open its properties Window.

In its properties Window, choose ColumnEdit and click New -> TextEdit. You can then rename your TextEdit to something like repositoryItemTextEditPhone depending on your choice.
 In your CSharp FrmName.designer.cs you can see these new generated codes.

private DevExpress.XtraEditors.Repository.RepositoryItemTextEdit repositoryItemTextEditPhone;
this.colTelephoneNumber.ColumnEdit = this.repositoryItemTextEditPhone;

Step 2: Create a number mask for your TextEdit Column
Return to the Properties Window of your TextEdit Column. Click the plus sign in the left of 'ColumnEdit' to display its content. Under 'ColumnEdit', locate 'Mask' property.

Click the plus sign in the left of 'Mask' to display its content. Locate 'MaskType' and 'EditMask' property.
MastType = RegEx and EditMask = \d+ means that the XtraGrid cell accepts only number.

In your CSharp FrmName.designer.cs you can see these new generated codes.

this.repositoryItemTextEditPhone.AutoHeight = false;
this.repositoryItemTextEditPhone.Mask.BeepOnError = true;
this.repositoryItemTextEditPhone.Mask.EditMask = "\\d+";
this.repositoryItemTextEditPhone.Mask.MaskType = DevExpress.XtraEditors.Mask.MaskType.RegEx;
this.repositoryItemTextEditPhone.Mask.UseMaskAsDisplayFormat = true;
this.repositoryItemTextEditPhone.Name = "repositoryItemTxtDienThoai";
 
In case your telephone number accepts number and symbol such as "(" ")". For example, (123)787-20-07 you can choose to use the Devexpress defined Mask. Click the "..." button in the right of Mask property to open the Mask Editor Window.

In the 'Mask Editor' Window you can choose 'Telephone number' predefined mask. Click ok to complete your task.

In some countries, telephone numbers can be something like 07103.8918233 (accept "." symbol). In that case you case edit EditMask Property with this value: \d+(\.\d+)?

In case of decimal numbers (like -3.14) you can use -?\d+(\.+)?\d+ .

No comments:

Post a Comment

Blog Archive

About Me

My photo
I am a software developer with roughly 5 years of experience in developing end-to-end solutions in C#, Java, C/C++, PHP and HTML/CSS/Javascript. At the moment, I am joining the Professional Doctorate in Engineering degree program in Software Technology at Eindhoven University of Technology. My areas of particular interest include software design, data structures and algorithms, problem solving, software security, embedded system, machine learning, and data science.