- Getting Started
- Making a URL Clickable in an ASP.NET GridView
- Formatting Number Fields in an ASP.NET GridView
- Summary
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:
- Choose Edit Columns.
- Select the number from the Selected fields list.
- Under BoundField > Behavior properties, set HtmlEncode to False.
- Under BoundField > Data Properties, setDataFormatString to {0:C2}. (The C means Currency, and the 2 represents the number of positions after the decimal point.)
- 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:
- Choose Edit Columns.
- Select the percent field from the Selected fields list.
- Under BoundField > Behavior properties, set HtmlEncode to False.
- Under BoundField > Data Properties, setDataFormatString to {0:P2}. (The P means Percent, and the 2 represents the number of positions after the decimal point.)
- 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:
- Choose Edit Columns.
- Select the field containing the phone number from the Selected Fields list.
- Click the Convert this field into a TemplateField link.
- Click OK.
- Switch to Code View.
- Find the generated code for the phone number field:
- In the ItemTemplate node (highlighted above in blue), select the code highlighted in yellow and replace it with this code:
- Save your page and preview in browser.
<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>
<%# String.Format("{0:(###) ###-####}",Convert.ToInt64(DataBinder.Eval (Container.DataItem, "homephone")))%>