WebGrid has a client side built-in ability to validate masked data display.

In this topic, you will learn the basic thing on how to apply masked feature in WebGrid.

To set DateTime to a Column

1. Open WebGrid Designer.
2. Go to Advanced.
3. In the appropriate date column set DataType, for example: System.DateTime
4. Set DataFormatString property, for example: MM/dd/yyyy.
5. Set the EditType to CalendarDropDown or CalendarCombo.
6. Click OK to apply the changes.

To set Currency to a Column

1. Open WebGrid Designer.
2. Go to Advanced.
3. In the appropriate date column set DataType, for example: System.Double. 
4. Set DataFormatString property, for example: $##,###.00.
5. Set the AggregateFunction property, for example: Sum.
6. Click OK to apply the changes.

To set Number Format to a Column

1. Open WebGrid Designer.
2. Go to Advanced.
3. In the appropriate date column set DataType, for example to System.Single. 
4. Set DataFormatString property, for example: #0.##%.
5. Click OK to apply the changes.