Understanding GridView Formatting

This article shows how to format a GridView. What is GridView? 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 features, 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, such as 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 the property "DataFormatString" to apply formatting. You can change colors, fonts, borders, and alignment of the 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 placeholders and format indicators, 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 detail then you can search on MSDN.

Numeric Format Strings

• Currency {0:C}: $1,234.50 Brackets indicate negative values($1,234.50). The 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 grid view.
• SelectedRowStyle: Set the style of the currently selected row.
• EditRowStyle: Set the style of the row that is in edit mode. This formatting acts in addition to the RowStyle formatting.
• EmptyDataRowStyle: Set the style that is used for 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 the AllowPaging property to be 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>