| The DataGrid control allows you to format individual columns, and the Property Builder dialog box makes it easy to add this functionality. You might, for example, want to format the Product Sales column so that the numbers are right aligned and formatted as currency. To add this functionality, follow these steps: -
With CategorySales.aspx open in the page designer, right-click the DataGrid control. -
Select Property Builder from the context menu. -
On the grdCatSales Properties dialog box, select the Format tab and then expand the Columns node. Expand the "Columns[3] Product Sales" node and select Items. (Effectively, you'll drill down into the various members of the grid until you get to the column you'd like to format.) -
In the Horizontal Alignment drop-down list, select Right. When you're done, the page should look like Figure 16.7. Figure 16.7. Set alignment using the Property Builder.
-
Select the Columns tab and then select Product Sales in the Selected columns list. -
In the Data Formatting Expression text box, enter {0:C}. When you're done, the page should look like Figure 16.8. Figure 16.8. Enter formatting expressions on the Columns page.
What's going on with the formatting expression? Under the covers, the DataGrid control uses formatting code much like the String.Format method, applying a replaceable parameter, with formatting, to the data that's being displayed in a column. In this case, you want to replace the data with a formatted version, using currency formatting. In this case, {0}acts as the placeholder for the value, and C indicates the particular formatting you want to apply. Table 16.5 contains a list of possible formatting constants. Table 16.5. Select from These Formatting Constants | Format Character | Description | Example | | C | Currency | $12.75 | | D | Decimal | 12.75 | | E | Scientific (Exponential) | 1.275000E+001 | | F | Fixed | 12.75 | | N | Number | 12.75 | | X | Hex | 0xC | At this point, browsing the page again contains the correct formatting on the Product Sales column, as shown in Figure 16.9. Figure 16.9. The formatting works, but you'll need code for the interactivity that's required.
At this point you have the grid looking the way you want, but you do not have all the functionality yet. The next sections will walk you through adding paging, selection of data, and sorting. |
