The previous section showed how you can change the way the GridViewcontrol displays the data exposed by a data source control. You replaced the standard BoundFieldcontrol for some of the columns with an ImageFieldand a HyperlinkField, so that the output contains images and links to other pages. You also changed the format of the text in the result, so that the price displays with the appropriate currency symbol.
1.
With the page TestMenu2.aspxstill open from the previous example, open the GridView Tasks pane, and click the Edit Columns . . . link to open the Fields dialog. Remove all the columns in the “Selected fields” list except for the GraphicFileName, Description,andSearchcolumns. Then select the Descriptioncolumn and click the link at the bottom right
of the Fieldsdialog to convert this column into a TemplateField(see Figure 4-14).
Figure 4-14: Converting the Descriptioncolumn
2.
Click OK to close the Fields dialog, and go back to the GridView Tasks pane. Click the Edit Templates link, as shown in Figure 4-15.3.
This changes the GridView Tasks pane into template editing mode. The pane now shows a list of the templates that are available for the control, listed by column name. There is only oneTemplateFieldcolumn in your GridViewcontrol — the column named Descriptionat index 1
(the second column in the control because the index starts at zero), as shown in Figure 4-16. Select
the ItemTemplate, and the control displays an editing panel that contains a Labelcontrol.
Figure 4-16: Selecting ItemTemplate
The Template Editing Mode pane opens showing the ItemTemplateby default. Normally the edit area is empty, but there is a Labelhere in this case because you converted the existing Description
column (which used a Labelcontrol to display the contents) into a TemplateField. If you select the
EditItemTemplatefrom the drop-down list, you will see that there is a TextBoxin this template.
Again, this is because you converted the existing Descriptioncolumn into a TemplateField. Data display controls display the contents of the appropriate template depending on which mode they are in, and so the TextBoxdisplays only in the row that is in edit mode. The remaining rows display
the Labelcontrol.
4.
Close the GridView Tasks pane, and select the Labelcontrol. Open the Label Tasks pane using the small arrow icon that appears and click the Edit DataBindings . . . link (see Figure 4-17).Figure 4-18: Text property bound to the Descriptioncolumn
Usually, you will bind the Textproperty of a control to the column in the underlying data source. However, you can bind other properties, such as the NavigateUrlof a Hyperlinkcontrol, or the
AlternateTextproperty of an Imagecontrol. Notice that you can display all the properties of a control
by setting the checkbox below the “Bindable properties” list.
6.
The binding of the Labelcontrol’s Textproperty to the source data, in this example, is a two-waybinding (because you converted the BoundColumnto a TemplateColumn). The code expression is
Bind(“column-name”). This means that any changes to the value in the control (for example
if it were a TextBox) will be pushed back into the database automatically. As you are just dis- playing data in this page, you can untick the checkbox in the Field bindingsection of the dialog to specify one-way binding.
7.
Click OK to close the Label1 DataBindingdialog, and close the Label Taskspane. Now you will add more controls to the ItemTemplatesection to specify how the source data will display in this column. Drag a Labelcontrol from the Toolbox into the ItemTemplate editing area, and use the Edit DataBindings . . . link on the Label Tasks pane to open the DataBindings dialog for this control. Select the ItemNamecolumn in the “Bound to” drop-down list. Notice that, by default, this is not a two-way binding, and so the code expression is Eval(“column-name”), as shown in Figure 4-19.Figure 4-19: Binding for ItemNamecolumn
8.
Drag another Labelcontrol from the Toolbox onto the ItemTemplate editing area. Bind this control (Label3) to the PizzaToppingscolumn, but this time add a format string by typing the text generously topped with {0} into the Format section of the DataBindings dialog (see Figure 4-20).9.
Continue by adding two more Labelcontrols to the ItemTemplate. Bind one (Label4) to theItemSizecolumn. Bind the other (Label5) to the ItemPricecolumn, and type $ {0:F2} into the
Format box to ensure that the price is displayed with a dollar symbol and two decimal places (as in the previous example). Then, rearrange the Labelcontrols by dragging them into position in the ItemTemplate, and typing text and carriage returns between them to get the layout shown in Figure 4-21 — you can drag the border of the control to give yourself more room inside the template editing area. Then change the text size, and the color and style, using the controls on the VWD Formatting toolbar if you wish.
Figure 4-21: Arranging Labelcontrols
10.
Now, click the End Template Editing link in the GridView Tasks pane, and open the Properties window for the GridViewcontrol (right-click on it and select Properties from the context menu). Change the GridLinesproperty to Verticaland the ShowHeaderproperty to False. Then run your page to see the results. As you can see in Figure 4-22, the output is no longer just a table of values, but a page where you have exerted complete control over how the values extracted from the source data appear.Look at the list of drinks toward the end of the page, and you will see why we specified a format string for
the PizzaToppingscolumn, but typed the other text that you see directly into the ItemTemplate
section. Where there is no value (NULL) for a column, the format cannot be applied and the bound control
displays nothing. This means that for drinks (which have NULLfor the PizzaToppingscolumn), the text “generously topped with . . .” does not appear at all.