# Mask

FlexGrid provides built-in mask editor which lets you validate the user input automatically as it is typed. Know how to implement mask in FlexGrid cells.

## Content

Mask editor refers to pre-defined templates for getting input from users which also automatically validates the user input as it is typed. Mask strings have two types of characters; literal characters and template characters. While literal characters are the ones which become part of the input, the template characters serve as placeholders for characters belonging to specific categories (for example, digits or alphabets). For example, the code below assigns a "(999) 999-9999" editing mask to the first column, which holds phone numbers. Here, special characters such as braces ("()") and hyphen ("-") are the literals and the digit "9" is a placeholder that stands for any digit.

![Mask-editor](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/builtin-editor-mask.png)

The FlexGrid control supports masked editing through the <span data-popup-content="This property is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022C1.Win.FlexGrid.5~C1.Win.FlexGrid.C1FlexGridBase~EditMask.html\u0022\u003e.NET\u003c/a\u003e." data-popup-title="EditMask" data-popup-theme="ui-tooltip-green qtip-green">EditMask</span> property, which can be used with regular text fields and with drop-down combo fields. To apply different masks within the same column, you can trap the <span data-popup-content="This event is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET\u003c/a\u003e." data-popup-title="BeforEdit" data-popup-theme="ui-tooltip-green qtip-green">BeforEdit</span> event and set the **EditMask** property to appropriate value.

```csharp
// Set up a phone number edit mask
 c1FlexGrid1.Cols[1].EditMask = "(999) 999-9999";
```

```vbnet
' Set up a phone number edit mask
 c1FlexGrid1.Cols(1).EditMask = "(999) 999-9999"                
```

You can also set the **EditMask** property at design time using the **Input Mask** dialog. You can access the dialog by clicking the ellipsis button against **Edit Mask** field in **Column Tasks** menu. It also means that the Edit Mask field is specific to the column selected at that time.

![Mask input dialog](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/mask-input-dialog.png)

Note that when the **EditMask** property is set to a non-empty string, the grid uses the masked editor even if the column contains **DateTime** values. Usually, grid uses the built-in Date editor to edit DateTime type cells.

## See Also

**Documentation**

[Date](/componentone/docs/win/online-flexgrid/features/Edit/cell-editors/date)