Chapter 11: Managing Content Using Grid View and Details View

File: SkinFile.skin (excerpt)

<asp:DetailsView runat="server" CssClass="GridMain" CellPadding="4" GridLines="None">

<RowStyle CssClass="GridRow" /> <HeaderStyle CssClass="GridHeader" />

</asp:DetailsView>

Here, we’ve defined a similar style to the GridView control, which will ensure that our page has a consistent appearance. Save your work, open AddressBook.aspx in the browser, and select an employee. You should see something similar to Figure 11.11.

We’re really making progress now. There’s only one problem—our employee records don’t include any addresses, and at this moment there’s no way to add any! Let’s take care of this.

GridView and DetailsView Events

In order to use the GridView and DetailsView controls effectively, we need to know how to handle their events. In this section, we’ll learn about the events raised by these controls, with an emphasis on the events that relate to editing and updating data, as our next goal will be to allow users to edit the employee details in the DetailsView.

Earlier, you learned how to respond to the user’s clicking of the Select button by handling the GridView’s SelectedIndexChanged event. Soon you’ll implement editing functionality, which you’ll achieve by adding an Edit button to the

DetailsView control. The editing features of the GridView and the DetailsView are very similar, so you can apply the same principles, and even almost the same code, to both of them.

Both the GridView and DetailsView controls support Edit command buttons, which will place Edit buttons in the control when the page loads. Once one of the Edit buttons has been clicked, the row (in case of GridView) or the entire form (in case of DetailsView) will become editable, and instead of an Edit button, users will see Update and Cancel buttons.

These features are pretty amazing, because you can achieve this “edit mode” without writing any HTML at all: the columns know how to render their editable modes by themselves. If you don’t like their default edit mode appearances, you can customize them using templates.

452

GridView and DetailsView Events

Before writing any code, let’s see what this edit mode looks like. Figure 11.12 shows a GridView control with one of its rows in edit mode.

Figure 11.12. GridView in edit mode

Figure 11.13 shows a DetailsView control in edit mode.

Figure 11.13. DetailsView in edit mode

453

Chapter 11: Managing Content Using Grid View and Details View

When command buttons such as Edit are clicked, they raise events that we can handle on the server side. The GridView supports more kinds of command buttons, each of which triggers a certain event that we can handle. The action types and the events they trigger are listed in Table 11.1.

Table 11.1. GridView action types and the events they trigger

Action	Events triggered when clicked
Select	SelectedIndexChanging, SelectIndexChanged
Edit	RowEditing
Update	RowUpdating, RowUpdated
Cancel	RowCancelingEdit
Delete	RowDeleting, RowDeleted
(sorting buttons)	RowSorting, RowSorted
(custom action)	RowCommand

The DetailsView control, on the other hand, has buttons and events that refer to items, rather than rows, which makes sense when you realize that DetailsView is used to display the items in one record, while GridView displays a few items from many records. The DetailsView action types, and the events they generate, are listed in Table 11.2.

Table 11.2. DetailsView action types and the events they trigger

Action	Events triggered when clicked
(paging controls)	PageIndexChanging, PageIndexChanged
Delete	ItemDeleting, ItemDeleted
Insert	ItemInserting, ItemInserted
Edit	ModeChanging, ModeChanged
Update	ItemUpdating, ItemUpdated
Delete	RowDeleting, RowDeleted
(custom action)	ItemCommand

Notice that, except for the RowCommand (for the GridView) and the ItemCommand (for the DetailsView) events, we have events that are named in the present tense (i.e. those that end in “ing,” such as SelectedIndexChanging and ItemUpdating),

454

GridView and DetailsView Events

and events that are named in the past tense (i.e. those that end in “ed,” such as SelectIndexChanged and ItemUpdated). The events that end in “ing” are fired just before their past tense counterparts, and should be handled only if you want to implement some logic to determine whether the action in question should be performed.

The “ed” events, on the other hand, should perform the actual task of the button. We saw such an event handler when we handled the SelectIndexChanged event of our GridView control. In this handler, we queried the database to get the details of the selected employee, then displayed the result in a DetailsView control.

If we wanted to disallow the selection of a particular employee (say, the employee with the ID 1), we could do so by setting e.Cancel to False in the SelectIndexChanging event handler, as shown below:

Visual Basic

Protected Sub grid_SelectedIndexChanging(ByVal sender As Object, _ ByVal e As GridViewSelectEventArgs) _

Handles grid.SelectedIndexChanging

' Obtain the index of the selected row

Dim selectedRowIndex As Integer = grid.SelectedIndex ' Read the employee ID

Dim employeeId As Integer = _ grid.DataKeys(selectedRowIndex).Value

' Cancel the selection if Employee #1 was selected If employeeId = 1 Then

e.Cancel = False End If

End Sub

C#

protected void grid_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

{

//Obtain the index of the selected row int selectedRowIndex = grid.SelectedIndex;

//Read the employee ID

int employeeId = (int)grid.DataKeys[selectedRowIndex].Value; // Cancel the selection if Employee #1 was selected

if (employeeId == 1)

{

e.Cancel = false;

}

}

455