A MASTER/DETAIL WEB PAGE 1079

Property	Setting
DataGrid2 Control
DataSource	DSOrders1
DataMember	Orders
DataKeyField	OrderID

DataGrid3 Control

DataSource	DSDetails1
DataMember	Order Details

Customizing the Appearance of the DataGrid Control

At this point comes the most challenging part of the project, and it isn’t its code. We must customize the DataGrid controls, and there are quite a few items you can customize: the pager section at the bottom of the top DataGrid control, the formatting of the date and numeric fields, and the alignment of the numeric fields (they must be aligned to the right).

All the formatting options are clustered together in the Properties dialog box of the DataGrid control. Right-click the DataGrid control you want to customize and select Property Builder. On the dialog box that appears, select Format, and you will see a list of items you can format separately (shown previously in Figure 24.16):

DataGrid Here you can specify the overall appearance of the DataGrid (its font, its foreground and background colors, and so on).

Header Here you can specify the appearance of the control’s header.

Footer Here you can specify the appearance of the control’s footer.

Pager Here you can specify the appearance of the pager.

Items An item is a row of the control, and there are several groups of rows. All rows in a group have common formatting. Here you can specify the appearance of the normal and alternating items, the appearance of the selected item, as well as the appearance of the row in edit mode.

Columns Here you can specify the contents of each column (you can also leave it to the control to automatically generate a column for each field in the DataSet).

Expand the Columns item in the Objects list, then expand one of the Columns. You will see the names of the columns, and under each column are three categories of items you can customize: the column’s Header, Footer, and Items. Each cell in the specific column is formatted according to the settings of the Items object. You can set the foreground/background colors of the cell’s text, the font and the alignment of the cell.

Besides the appearance of the cells, you will also have to specify how dates and numeric values will be formatted. In the Columns tab of the control’s Properties dialog box, select a numeric or date field and enter the appropriate formatting expression in the Data Formatting Expression box. This

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com

1080 Chapter 24 ACCESSING DATA ON THE WEB

expression is the same one you would use with the ToString method. The formatting expression {0: #,###.00} signifies that the amount (represented by the argument 0) must be formatted with a thousands separator and two decimal digits (the second argument is the format specification). A value like 14302.5785 will be formatted as 14,302.58, and a value like 14.496 will be formatted as 14.50. The same is true for dates. The specification {0:dd MMMM yyyy} will format the date 9/7/2001 as “07 September 2001.”

On the Columns tab, clear the option Create Columns Automatically At Runtime and add the columns you want to display on the control (CompanyName and ContactName) from the Available Columns list to the Selected Columns list. (Figure 24.14 shows the same tab for another DataGrid control). Select each field in the Selected Columns list and set its text. Then add a Button column to the control, set the button’s Text property to Orders, and set its ButtonType property to PushButton. This is the column with the buttons, and each one of them will populate the second DataGrid control with the selected customer’s orders.

Do the same for the second DataGrid control with the Orders. Additionally, you must set the Data Formatting Expression for the OrderDate and OrderTotal columns. The formatting string for the OrderDate field is {0:dd MMM yyyy}, and for the OrderTotal field it’s {0: #,###.00}. Finally, add the Details button.

Customize the third DataGrid control as discussed earlier, and set the formatting string for the SubTotal column to {0: #,###.00}.

Programming the Select Button

As for the code of the application, this is the simplest part. When the form is loaded for the first time, the DSCustomerNames DataSet is loaded and is used to populate the DataGrid control:

Private Sub Page_Load(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles MyBase.Load

If Not Me.IsPostBack Then

DACustomers.Fill(DSCustomerNames1, “Customers”)

DataGrid1.DataBind()

End If

End Sub

The following code populates the second DataGrid control with the orders of the selected customer. This code must reside in the event handler that’s raised when one of the buttons in the last column of the top DataGrid is clicked. This is the control’s ItemCommand event:

Private Sub DataGrid1_ItemCommand(ByVal source As Object, _

ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.ItemCommand

If e.Item.ItemType = ListItemType.Pager Then Exit Sub

Dim custID As String = DataGrid1.DataKeys(e.Item.ItemIndex) DAOrders.SelectCommand.Parameters(“@CustID”).Value = custID DAOrders.Fill(DSOrders1, “Orders”)

DataGrid2.DataBind() End Sub

Copyright ©2002 SYBEX, Inc., Alameda, CA

www.sybex.com