Step 10: Enhancing the Orders DataGridView

In this step you will enhance the appearance of the Orders GridView using a style sheet and by specifying columns to be displayed in the GridView.

1. If the Web application is still running, stop it by clicking Visual Studio's Stop button.

2. Select the Customer Orders Web Form in design mode, then go to top of the Properties Window and select DOCUMENT from the combo box.

3. Click the down arrow to the right of the Theme property and select MMTheme from the list. This applies the mm.css style sheet (found in the Solution Explorer nested below the App_Themes node) to this page.

   Among other things, this style sheet adds spacing between cell borders in the TABLE element that contains this page's controls.

4. Next, select the grdOrders GridView.

5. Go to the Properties panel and expand the RowStyle property by clicking the (+). Set the RowStyle's Wrap property to False. This allows the columns to automatically expand to the width of the data.

6. Click on the GridView's smart tag and select Auto Format from the shortcut menu:

   

7. In the Auto Format dialog select the Classic scheme and click OK:

   

8. Click the GridView's smart tag again, but this time click the Edit Columns... link.

9. In the Fields dialog uncheck the Auto-generate fields check box:

   

10. In the Available fields list, select HyperlinkField and click the Add button to add the field to the Selected fields list:

    

    A hyperlink column displays a link the user can click at run time to navigate to another page. We'll set up this column to display Order IDs. At run time, the user can click this column and navigate to a different Web page to edit the order.

11. In the Properties sheet on the right of the dialog set the following properties:

    Property	Value	Description
    HeaderText	Order ID	Header text
    DataNavigateUrlFields	OrderID	The data source field containing the value to be passed to the target page
    DataNavigateUrlFormatString	OrderEdit.aspx?orderID={0}	The first part of the URL format string (OrderEdit.aspx) specifies the target Web page requested when a user clicks on an Order ID hyperlink. The second part of the string (?orderID={0}) specifies a parameter named "orderID" that is passed to the target page. The "{0}" is a substitution parameter. ASP.NET substitutes the value of the field specified in the DataNavigateUrlFields text box (in this case OrderID) when it creates the link at run time.
    DataTextField	OrderID	Specifies the data source field that is bound to this column at run time

12. Add the following new fields listed in the table below by clicking the Add button and setting the properties to the specified values. Note the field type is BoundField for the rest of the columns rather than HyperlinkField . The Data Format Expression used in the date columns displays the date without the associated time.

    Field Type	Header Text	HtmlEncode	DataField	DataFormatString
    BoundField	Name	True	ShipName
    BoundField	Ordered	False	OrderDate	{0:d}
    BoundField	Required	False	RequiredDate	{0:d}
    BoundField	Shipped	False	ShippedDate	{0:d}
    BoundField	Country	True	ShipCountry

    Note that you must set HtmlEncode to False for the DataFormatString to be properly applied. This is because the value is HTML-encoded before the DataFormatString is applied.

13. Click OK to close the Fields dialog. Your GridView should look something like this:

    

14. To get the DataGridView to align to the left side of the browser at run time, click in the empty space to the right of the DataGridView to select the <TD> element (the table cell). Go to the Properties window and set the style to float: left.

15. Press F5 to build and run the Web application. When the Customer Orders Web Form displays, enter ROMEY in the Customer ID text box, and then click the Get Orders button. This time, your Orders GridView should look something like this:

    

    Notice the spacing at the top of the page and between controls looks much better because of setting MMTheme as the page's Theme.

16. Hover your mouse pointer over the hyperlinks in the Order ID column (don't click the link yet, because we haven't created an Order Edit form yet). Notice the status bar at the bottom of your browser displays the hyperlink navigation information, including the current order number you are hovering over:

    

See also:
Step 11: Creating the Order Edit Form