Step 16 - Enhancing the Order Detail GridView

In this step you will enhance the Order Detail DataGrid's appearance and set it up for in-place editing.

Adding Columns to the Order Details GridView

1. If the Web Forms application is running, shut it down by clicking Visual Studio's Stop button.

2. In the Solution Explorer, double-click OrderEdit.aspx to open the form in design mode.

3. Select the Order Detail GridView, then 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.

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

   

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

   

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

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

   

8. In the Available fields list expand the CommandField item and select Edit, Update, Cancel. Click Add to add this item to the Selected fields box:

   

9. In the Properties sheet on the right of the dialog, set the ButtonType property to Button.

10. Next, add the following columns to the GridView by first selecting BoundField in the Available fields list, clicking the Add button, and then setting the specified Header Text and DataField properties:

    Column Type	Header Text	DataField
    BoundField	Product	ProductID
    BoundField	Price	UnitPrice
    BoundField	Qty	Quantity
    BoundField	Discount	Discount

11. Now you need to add a Delete button to the GridView. To do this, select Delete beneath the CommandField node in the Available fields list and then click the Add button. Next, in the Properties sheet on the right of the dialog, set the ButtonType property to Button:

    

12. Click the OK button to close the dialog. Your Order Detail GridView should look like this:

    

Adding Editing Code for the Order Details GridView

In this section, you create event handlers that respond to the Order Details GridView RowCancelingEdit, RowDeleting, RowEditing and RowUpdating events.

1. Select the Order Details GridView in design mode, go to the Properties panel and click the Events button (the lightning bolt).

2. Double-click the RowCancelingEdit event in the Properties panel. This adds a grdOrderDetail_RowCancelingEdit() event handler method to the code-behind file.

3. Reselect the form in design mode then go back to the Properties panel and double-click the following events which adds an event handler method for each to the code-behind file:
   • RowDeleting
     
   • RowEditing
     
   • RowUpdating

4. Now add the following code to each of the event handler methods:

   Protected Sub grdOrderDetail_RowCancelingEdit(sender As Object, e As GridViewCancelEditEventArgs) Handles grdOrderDetail.RowCancelingEdit
   	' Retrieve the previous Order Detail entity list
   	Dim orderDetailList As mmBindingList(Of OrderDetailEntity) = Me.GetEntityListFromSession(Of OrderDetailEntity)("CurrentOrderDetail")
   	Me.OrderDetail.SetCurrentEntityList(orderDetailList, False)
   	Me.grdOrderDetail.EditIndex = -1
   	Me.BindControl(Me.grdOrderDetail)
   End Sub
    
   Protected Sub grdOrderDetail_RowDeleting(sender As Object, e As GridViewDeleteEventArgs) Handles grdOrderDetail.RowDeleting
   	' Retrieve the previous Order Detail entity list
   	Dim orderDetailList As mmBindingList(Of OrderDetailEntity) = Me.GetEntityListFromSession(Of OrderDetailEntity)("CurrentOrderDetail")
   	' Tell the business object to delete the specified row
   	Me.OrderDetail.DeleteEntity(orderDetailList, orderDetailList(e.RowIndex))
   	' Rebind the GridView
   	Me.BindControl(Me.grdOrderDetail)
   End Sub
    
   Protected Sub grdOrderDetail_RowEditing(sender As Object, e As GridViewEditEventArgs) Handles grdOrderDetail.RowEditing
   	' Retrieve the previous Order Detail entity list
   	Dim orderDetailList As mmBindingList(Of OrderDetailEntity) = Me.GetEntityListFromSession(Of OrderDetailEntity)("CurrentOrderDetail")
   	Me.OrderDetail.SetCurrentEntityList(orderDetailList, False)
   	Me.grdOrderDetail.EditIndex = e.NewEditIndex
   	Me.BindControl(Me.grdOrderDetail)
   End Sub
    
   Protected Sub grdOrderDetail_RowUpdating(sender As Object, e As GridViewUpdateEventArgs) Handles grdOrderDetail.RowUpdating
   	' Get the item to be updated
   	Me.grdOrderDetail.EditIndex = e.RowIndex
   	' Retrieve the previous Order Detail entity list
   	Dim orderDetailList As mmBindingList(Of OrderDetailEntity) = Me.GetEntityListFromSession(Of OrderDetailEntity)("CurrentOrderDetail")
   	' Save the OrderDetail entity list (the GridView automatically binds back)
   	' The List of Integers specifies which entities should be marked as "Added"...just the last one in the list
   	Me.Save(Me.OrderDetail, orderDetailList, New List(Of Integer)({orderDetailList.Count - 1}))
   	' Reset the edited item and rebind the GridView
   	Me.grdOrderDetail.EditIndex = -1
   	Me.BindControl(Me.grdOrderDetail)
   End Sub

Testing the Enhanced GridView

1. To run the Web Forms application, click the Start button on the Visual Studio toolbar. When the Customer Orders form displays, enter ROMEY in the Customer ID text box, and then click the Get Orders button. The Web Form should display all orders for customer ROMEY. Select the first order 10281

2. The Order Detail GridView should look like this:

   

3. Click the GridView Edit button in the first row. The GridView expands into edit mode, displaying an Update and Cancel button:

   

4. Change the price to 7.4000 and then click the Update button. This contracts the GridView and displays the new price:

   

5. Pick any order detail item and click Delete. This deletes the item from the data source.

See also:
Step 17 - Adding Items to the Order Detail GridView