When you add a GridViewcontrol to the page in VWD, it turns off the AutoGenerateColumnsfeature, and instead creates the code to implement the columns in the original data source. This allows you to change the column types used for each column in the data source to produce a display that is more in line with your requirements. You will explore this feature now to see some of the things that are possible.
1.
Open the page TestMenu2.aspxthat you built in Chapter 3. Mouse over the GridViewcontrol. Then open the GridView Tasks pane, and click the Edit Columns . . . link (see Figure 4-3).Figure 4-3: Clicking Edit Columns . . . in the GridView Tasks pane
2.
This opens the Fields dialog for the GridViewcontrol. In the top left is a list of the available field types, with the existing fields that contain values from the database shown as being ofFigure 4-4: Viewing properties for the ItemNamefield
3.
Select the GraphicFileNamecolumn in the “Selected fields” list, and click the button next to the list to remove this column (see Figure 4-5). Then repeat this to delete the MenuItemIDcolumn.Figure 4-5: Removing the GraphicFileNamecolumn
4.
Select the ImageFieldtype in the “Available fields” list, and click the Add button. You will see anew ImageFieldappear in the “Selected fields” list, with its properties shown in the right-hand
Figure 4-6: Viewing the properties of the ImageFieldtype
5.
Now you can set the properties of the new ImageFieldcolumn. This column type will gener- ate an ASP.NET Imagecontrol in each row. In the Data section of the list of properties, set theDataAlternateTextFieldproperty to the name of the column that will provide the data to
set the AlternateTextproperty of the Imagecontrol (used to create the altattribute when the page is displayed). Use the ItemNamecolumn for this. Then set the DataImageUrlField property to the name of the column that will provide the data to set the ImageUrlproperty of
the Imagecontrol (the path to the image file to be displayed). Use the GraphicFileName
6.
The MenuItemstable contains just the filename of the images for the menu page, and not the full path. The images are, in fact, in a subfolder named images. To get the correct path in theImageUrlproperty of each Imagecontrol, you must also set the DataImageUrlFormatString
property of the new ImageFieldcolumn to the format string images/{0}(see Figure 4-8). This format string will cause the column value to be set to the text in the string, but with the place- holder {0}replaced by the value from the column that you specified for the DataImageUrlField property. Therefore, you will get — for example —images/pizza2.gifas the value of the
ImageUrlproperty for the second pizza row.
Figure 4-8: Setting the DataImageUrlFormatStringproperty
7.
There are some more properties you should set for the new ImageFieldcolumn. Set theNullImageUrlproperty by selecting it and clicking the three dots (...) button that appears.
Select the image file blank.giffrom the imagesfolder. This is the image that will be displayed if there is no value in the column that normally provides the value for the ImageUrlproperty and prevents the user seeing a “broken image” in the page in this case. Notice that VWD precedes the file you select with the tilde (~) character. This signifies the root folder of the site and makes sure that the correct path to the image is used, even if you move the page to a subfolder afterwards. Set the ShowHeaderproperty to False, so there is no header displayed for this column. Finally, set the AccessibleHeadertextproperty to Picture of item. This text will be used as an abbrattribute of the column when the page is displayed, making it possible for users of specialist nonvisual user agents to more easily tell what the column contains.
8.
Now go to the “Selected fields” list and use the up arrow button to move the new column to theFigure 4-10: Adding a new field
10.
In the properties for the new HyperlinkField, set the Textproperty to Search. This is the text to display in this column for every row. If you want the text of a hyperlink to be different in each row, and reflect the data in the underlying data source, you set the DataTextFieldproperty to name of the column containing the text for the hyperlink, and optionally the DataTextFormatString property. These properties work in the same way as the DataImageUrlFieldandDataImageUrlFormatStringproperties you set for the ImageFieldcolumn in step 6. Set the
Targetproperty to the value blank(from the drop-down list) to force the page that opens from
the hyperlink to appear in a new browser window.
11.
Set the DataNavigateUrlFieldsproperty to the value MenuItemType,ItemName. You can click this property entry and open the String Collection Editor dialog using the three dots (...) button that appears, or simply type the value directly. This property holds a list of thecolumns in the source data that will be referenced when building the URL of the hyperlink to be displayed in this column. Then set the DataNavigateUrlFormatStringproperty to the value
www.google.com/search?q={0} {1}(see Figure 4-11). This URL will allow users to search the
Google Web site for more information about the items on the PPQ menu. The two placeholders in the string are replaced for each row by the values from the two columns specified as the
12.
The final change to the columns in the GridViewcontrol is to specify the formatting of theItemPricecolumn. At present, this just displays as a number, such as 12.9500(as you saw in
Figure 4-2 earlier in this chapter). You can specify a format string for the DataFormatString property of the column to change this, and the obvious choice is currency format using the for- mat string {0:c}, as shown at the bottom of the Fieldsdialog in Figure 4-12. However, this depends on the regional settings of the server, and you may prefer to be more precise about the actual currency symbol to display by using the format string $ {0:F2}, as shown in Figure 4-12.
Figure 4-12: Changing the DataFormatStringproperty
Chances are that the prices stored in your database are in a specific currency, such as U.S. dollars. In this case, using the {0:c}format string means that the currency symbol and number format depends on the regional settings of the server, whereas the value in the table is always U.S. dollars. Therefore, it is always wise to consider using format strings that specify the currency symbol, and format the remainder of the numeric value with a fixed number of decimal places. The format string $ {0:F2}
forces a U.S. dollar currency symbol to appear, with the value formatted to two decimal places.
13.
Now you can click OK to close the fields dialog, and run the page to see the results. Figure 4-13 shows that the first column now contains an image of the item in the menu, and the final col- umn contains a Search link. If you hover over this link, you will see the target URL appear in the status bar of the browser, in this case http://www.google.com/search?q=Pizza Hawaiian. Also notice the formatting of the values in the ItemSizecolumn.Figure 4-13: Image inserted into first column and hyperlink in final column
There are plenty of other properties for the columns that you can set to experiment with changing the appearance of the GridViewoutput. For example, you can set or change the header text (or use an image), or apply specific formatting to the contents. However, there are other ways that you can exert even more control over the appearance, as you will see next.