Use DataFormatString to format GridView fields

In a previous post, is show you how to use the GridView DataKeys property to retrieve multiple  information about the selected row. In this post, I will show you how to format GridView fields using the DataFormatString attribute. Lets start with two simples GridView showing the orders and order details from the Northwind sample database.

Currency fields

Lets start by formatting the “Freight” field from the orders and the “UnitPrice” field from the order details into currency. The formatting string used by the DataFormatString property can be any literal string. Usually, it will includes a placeholder for the field’s value. The placeholder consists of two parts separated by a colon and wrapped in braces like this: {A:Bxx}. The value before the colon represents the field value’s index but since there is only one field value in each grid view cells, this value will always be 0. The character after the colon is optional and specifies the format to display the value in. The value after the format character specifies the number of significant digits or decimal places to display.

If we do not specified any value, it will take the default value from the settings in the Regional and Language Options item in the Control Panel. Since the character to displays numeric values in currency format is ‘C’, and my default number of digits after the decimal is set to two, I can set the DataFormatString for the freight and unit price field to “{0:c}”.


To set the value of the DataFormatString property, we can either edit the fields from the GridView smart tag “Edit columns” options or set the value manually from the source window.
 

   1: <asp:BoundField DataField="Freight" DataFormatString="{0:c}" 

   2:       HeaderText="Freight" SortExpression="Freight" />

If we want to display the unit price with 4 decimals, all we have to do is to specify the number of digits after the decimal like this: “{0:c4}”.

   1: <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c4}"

   2:       HeaderText="UnitPrice" SortExpression="UnitPrice" />

This will produce the following output:

Date and time fields

Now, to format date and time fields, we can specify our own format string with characters like ‘d’, ‘M’ and ‘y’ like this “{0:yyyy/MM/dd}”. We can also refer to the following table that list the most common format string used to format date and time:

Format Pattern	Name	Example
d	Short date pattern	8/16/2010
D	Long date pattern	Monday, August 16, 2010
t	Short time pattern	2:42 PM
T	Long time pattern	2:42:00 PM
f	Full date/time pattern (short time)	Monday, August 16, 2010 2:42 PM
F	Full date/time pattern (long time)	Monday, August 16, 2010 2:42:00 PM
g	General date/time pattern (short time)	8/16/2010 2:42 PM
G	General date/time pattern (long time)	8/16/2010 2:42:00 PM
m or M	Month day pattern	August 16
r or R	RFC1123 pattern	Mon, 16 Aug 2010 14:42:00 GMT
y or Y	Year month pattern	August, 2010

Therefore, by setting DataFormatString of the date fields OrderDate, RequiredDate and ShippedDate like this:

   1: <asp:BoundField DataField="OrderDate"DataFormatString="{0:f}"

   2:    HeaderText="OrderDate" SortExpression="OrderDate" />

   3: <asp:BoundField DataField="RequiredDate" DataFormatString="{0:yyyy/MM/dd}"

   4:    HeaderText="RequiredDate" SortExpression="RequiredDate" />

   5: <asp:BoundField DataField="ShippedDate" DataFormatString="{0:D}"

   6:    HeaderText="ShippedDate" SortExpression="ShippedDate" />

We now have the following display:



Again, this is important to remember that the output is based on the settings in the Regional and Language Options item in the Control Panel. Here is how it look like for me:



I hope this will help you,

Bruno