Formatting Number Fields in an ASP.NET GridView

In Figure 1, we saw fields identified as telephone numbers, salaries, etc. that really didn’t look all that clear. In this section, you learn how to format those fields to make them more usable for your site visitors.

Format a Field as Currency

In Design View, click on the Gridview and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Then:

1. Choose Edit Columns.
2. Select the number from the Selected fields list.
3. Under BoundField > Behavior properties, set HtmlEncode to False.
4. Under BoundField > Data Properties, setDataFormatString to {0:C2}. (The C means Currency, and the 2 represents the number of positions after the decimal point.)
5. Click OK and preview in browser.

This is what the code looks like:

<asp:boundfield HtmlEncode="False" DataFormatString="{0:C2}" DataField="salary"
 SortExpression="salary" HeaderText="salary"> </asp:boundfield>

Format a Field as a Percent

The field in the Access database was defined as:

Field Size: Single

Format: Percent

Decimals Places: Auto

In Design View, click on the Gridview and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Then:

1. Choose Edit Columns.
2. Select the percent field from the Selected fields list.
3. Under BoundField > Behavior properties, set HtmlEncode to False.
4. Under BoundField > Data Properties, setDataFormatString to {0:P2}. (The P means Percent, and the 2 represents the number of positions after the decimal point.)
5. Click OK.

This is what the code looks like:

<asp:boundfield HtmlEncode="False" DataFormatString="{0:P2}" DataField="amount"
 SortExpression="amount" HeaderText="amount"> </asp:boundfield>

Formatting a Telephone Number Field in an ASP.NET GridView

This option can work if your telephone number is stored in a Text field in your Access Database. In this example, my field name is “homephone”.

In Design View, click on the Gridview and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Then:

1. Choose Edit Columns.
2. Select the field containing the phone number from the Selected Fields list.
3. Click the Convert this field into a TemplateField link.
4. Click OK.
5. Switch to Code View.
6. Find the generated code for the phone number field:

<asp:templatefield SortExpression="homephone" HeaderText="homephone">
<EditItemTemplate>
<asp:TextBox runat="server" Text='<%# Bind("homephone") %>' id="TextBox1">
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label runat="server" Text='<%# Bind("homephone") %>' id="Label1">
</asp:Label>
</ItemTemplate>
</asp:templatefield>

1. In the ItemTemplate node (highlighted above in blue), select the code highlighted in yellow and replace it with this code:

<%# String.Format("{0:(###) ###-####}",Convert.ToInt64(DataBinder.Eval
(Container.DataItem, "homephone")))%>