This article shows how to format a GridView. What is GridView? The GridView is an extremely flexible grid control for showing data in a basic grid consisting of rows and columns. It has selection, paging and editing feature, and it is extensible through templates. The great advantage of Gridview over Datagrid is its support for code free scenarios. In GridView you can do many things without writing any code like paging and selection.
Formatting Fields:
To format the grid view you have to ensure that dates, currency and other number values are in good format. Grid View has property "DataFormatString" to apply formatting. You can change colors, fonts, borders and alignment of grid. Each BoundField column provides a DataFormatString property that you can use to configure the numbers and dates using a format string.
Format strings are generally made up of a placeholder and format indicator, which are wrapped inside curly brackets, like this:
{0:C}
Here 0 shows the value that will be formatted and the letter indicates a predetermined format style. In this case C means currency format which formats a number as a dollar.
<asp:BoundField DataField="Price" HeaderText="Price" DataFormatString="{0:C}" HtmlEncode="false" />
Here we are going to discuss about few format strings, if you want to know in details then you can search on msdn.
Numeric Format Strings :
-
Currency {0:C} - $1,234.50 Brackets indicate negative values($1,234.50). Currency sign is locale specific (?1,234.50).
-
Scientific (Exponential) {0:E } - 1.234.50E+004
-
Percentage {0:P} - 35.5%
-
Fixed Decimal {0:F?} - Depends on the number of decimal places you set {0:F3} would be 123.400. {0:F0} would be 123.
Time and Date Format Strings:
<asp:BoundField DataField="DOB" HeaderText="DOB" DataFormatString="{0:MM/dd/yy}" HtmlEncode="false" />
-
Short Date {0:d} - M/d/yyyy (11/21/2003)
-
Long Date {0:D} - dddd, MMMM dd, yyyy (Saturday, March 21, 2001)
-
Long Date and Short Time {0:f} - dddd, MMMM dd, yyyy HH:mm aa (Saturday, March 21, 2003 11:00 AM)
-
Long Date and Long Time {0:F} - dddd, MMMM dd, yyyy HH:mm:ss aa (Saturday, March 21, 2003 11:00:20 AM)
-
ISO Sortable Standard {0:s} - yyyy-MM-dd HH:mm:ss (2003-01-21 11:00:21)
-
Month and Day {0:M} - MMMM dd (March 21)
-
General {0:G} - M/d/yyyy HH:mm:ss aa (depends on local specific setting) (10/21/2003 11:00:21 AM)
Styles : you can set eight GridView styles.
-
Header Style: Set the header row style that contains column titles if you do ShowHeader property true.
-
RowStyle: Set the style of every data row.
-
AlternatingRowStyle: Set the style of every alternate row in gridview.
-
SelectedRowStyle: Set the style of currently selected row.
-
EditRowStyle: Set the style of row that is in edit mode. This formatting acts in addition to the RowStyle formatting.
-
EmptyDataRowStyle: Set the style that is used fro the single row in the special case where the bound data object contains no rows.
-
FooterStyle: Set the style of the footer row at the bottom of the GridView, if you choose ShowFooter property true.
-
PagerStyle: Set the style of the row with the page links if you enable AllowPaging property true.
Example:
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" ShowFooter="True">
<RowStyle BackColor="Gray" Font-Italic="True" />
<EmptyDataRowStyle BackColor="Yellow" />
<PagerStyle BackColor="#FFC0C0" Font-Italic="True" Font-Underline="True" />
<SelectedRowStyle BackColor="#00C000" Font-Bold="True" Font-Italic="True" />
<EditRowStyle BackColor="#0000C0" />
<AlternatingRowStyle BackColor="Red" BorderColor="Green" BorderStyle="Dashed" BorderWidth="1px" Font-Bold="True" />
<FooterStyle BackColor="#00C0C0" />
<HeaderStyle BackColor="#00C000" Font-Bold="True" Font-Italic="True" Font-Underline="True" />
</asp:GridView>