How to format GridView Rows/Columns in Design/Run time

Please visit my new Web Site https://coderstechzone.com

Here i will discuss how you can format data in GridView rows. Most of the time we require to render our GridView control by custom formatting since data source format does not contain our exact required formats. Like, you want to display numeric values in two decimal format or want to display short date instead of considering time portion from databse. In this post i will try to resolve below issues:

*** How to format date/numeric data in GridView in design time
*** How to format data in GridView in run time/code behind
*** How to format Template Column
*** How to use DataFormatString property to format data
*** What is HtmlEncode?

List of Date Formats:

Format character	Description	Pattern	Example
d	Short date	MM/dd/yyyy	12/1/2009
D	Long date	dddd, dd MMMM yyyy	Sunday, April 12, 2009
t	Short time	HH:mm	5:12 PM
T	Long time	HH:mm:ss	5:12:00 PM
f	Full date/time(short time)	dddd, dd MMMM yyyy HH:mm	Sunday, April 12, 2009 5:12 PM
F	Full date/time(long time)	dddd, dd MMMM yyyy HH:mm:ss	Sunday, April 12, 2009 5:12:00 PM
g	General date/time(short time)	MM/dd/yyyy HH:mm	4/12/2009 5:12 PM
G	General date/time(long time)	MM/dd/yyyy HH:mm:ss	4/12/2009 5:12:00 PM
m or M	Month day	MMMM dd	April 12
r or R	GMT	ddd, dd MMM yyyy HH':'mm':'ss 'GMT'	Sun, 12 Apr 2009 7:12:00 GMT
s	Sortable date/time	yyyy'-'MM'-'dd'T'HH':'mm':'ss	2009-04-12T14:12:00
u	UniversalSortableDateTimePattern using universal time	yyyy'-'MM'-'dd HH':'mm':'ss'Z'	2009-04-12 14:12:00z
U	Full date and time (long date and long time) using universal time	dddd, dd MMMM yyyy HH:mm:ss	Sunday, April 12, 2009 10:12:00 PM
y or Y	Year month	MMMM yyyy	April, 2009

Format date in bound column:

Consider we have a GridView that displays Supplier information with Code, Name, Address, Contact no and Supply date where the Supply date is stored with time in database. To do that for bound column apply the below technique:

<asp:BoundField DataField="LastDelivery" HeaderText="Recent Delivery" DataFormatString = "{0:y}" HtmlEncode="false"></asp:BoundField>

OR

<asp:BoundField DataField="LastDelivery" HeaderText="Recent Delivery" DataFormatString = "{0:MMMM yyyy}" HtmlEncode="false"></asp:BoundField>

If you want to format date using SQL query then Click Here.

i.e. You can use both format or pattern column to format date column like below:



Formatting columnar data in a GridView code-behind:

protected void gvEdit_RowDataBound(object sender, GridViewRowEventArgs e)
{if (e.Row.RowType == DataControlRowType.DataRow)
{e.Row.Cells[4].Text = Convert.ToDateTime(((DataRowView)e.Row.DataItem)["LastDelivery"]).ToString("y");
}
}

Format Template Column:
Add a template column with textbox/label etc.. then format it in the below way:

<asp:TemplateField HeaderText="Recent Delivery">
<ItemTemplate><asp:Label ID="lbl" runat="server" Text='<%# Eval("LastDelivery", "{0:y}") %>'></asp:Label>
</ItemTemplate></asp:TemplateField>

List of Numeric Formats:

Format	Description	Example
C	Currency format	$10.00
D	Decimal format	10
E	Scientific format	1.000000E+001
F	Fixed format	10.00
G	General format	10
N	Number format	10.00
X	Hexadecimal format	A

Note: Format characters are not case-sensitive, except for "X"

The value after the format character specifies the number of significant digits or decimal places to display. For example, the formatting string "{0:F2}" displays a fixed-point number with two decimal places.

Format numeric data in bound column:

<asp:BoundField DataField="Price" HeaderText="Price" DataFormatString="{0:C2}" HtmlEncode="false">

Format numeric data in Template Column:

<asp:TemplateField HeaderText="Recent Delivery">
<ItemTemplate>
<asp:Label ID="lbl" runat="server" Text='<%# Eval("Price", "{0:C2}") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

Formatting columnar data in a GridView code-behind:

protected void gvEdit_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
((Label)e.Row.FindControl("lbl")).Text = Convert.ToDecimal(((DataRowView)e.Row.DataItem)["ID"]).ToString("C5");
}

You may need to add few prefix like AU/US then use :
DataFormatString="AU {0:C5}" HtmlEncode="false"
OR
DataFormatString="US {0:C5}" HtmlEncode="false"



NOTE: Most of the beginner forget to add HtmlEncode="false"

What is HtmlEncode?
Microsoft introduced this new property to prevent cross site scripting (CSS) attacks. This way if there is any malicious text in the fields, it will get encoded and will not executeon client's browser. If this property is set to true, the formatting implementation in the control first encoded the text using HttpUtility.HtmlEncode. And after that it calls String.Format method on the encoded text value.Where as when HtmlCode is set to false, the formatting is done on the data value itself. So the way to fix your problem with formatting would be to set HtmlEncode property to false.

To Read More:
http://msdn.microsoft.com/en-us/library/aa479342.aspx
http://www.netomatix.com/development/gridviewcustomdataformatting.aspx