Monday, 2 August 2010

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 PatternNameExample
Short date pattern
Long date pattern
Monday, August 16, 2010
Short time pattern
2:42 PM
TLong time pattern2:42:00 PM
fFull date/time pattern (short time)Monday, August 16, 2010 2:42 PM
Full date/time pattern (long time)
Monday, August 16, 2010 2:42:00 PM
gGeneral date/time pattern (short time)8/16/2010 2:42 PM
GGeneral date/time pattern (long time)8/16/2010 2:42:00 PM
m or MMonth day patternAugust 16
r or RRFC1123 patternMon, 16 Aug 2010 14:42:00 GMT
y or YYear month patternAugust, 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,


No comments:

Post a Comment