The DataGrid s Editing Interface

The DataGrid's Editing Interface

Editing the DataGrid can be an incredibly easy feature to add for certain data, but can be quite intricate for other types of data. For example, adding editing support is a breeze if the DataGrid is being used to display data that has no foreign keys, and whose data can easily be edited through the use of a standard TextBox Web control. However, if the DataGrid has foreign key constraints or data that cannot easily be edited in the form of a TextBox, including editing support, while possible, is more of a challenge. Because of the difference in the degree of difficulty depending on the DataGrid's data, this chapter will be arranged such that the simpler cases are examined first, working up to more complex scenarios.

Before we dive into providing editing capabilities for various types of data, let's first take a look at the editing interface provided by the DataGrid. To use the DataGrid's default editing interface, we add an EditCommandColumn column to our DataGrid. This column displays an Edit button for each row in the DataGrid. This enables a user to edit one row of the DataGrid at a time. To edit a particular row, the user must click the Edit button for the row he wants to edit.

NOTE

The Edit button can be created as a typical HTML button, or as a hyperlink. A hyperlinked image can be used as well. We will examine how to choose how the Edit button is rendered in this chapter.

When a particular row's Edit button is clicked, the ASP.NET Web page is posted back, and the DataGrid's EditCommand event is fired. It is our responsibility to provide an event handler for this event. This event handler needs to indicate which row is the row that is to be edited by setting the DataGrid's EditItemIndex property to the index of the row whose Edit button was clicked. The following code snippet, which is taken from the EditCommand event handler from Listing 9.1 (lines 31 to 34), illustrates how the DataGrid's EditItemIndex property can be set to the row whose Edit button was clicked.

 Sub dgComments_EditRow(sender As Object, e As DataGridCommandEventArgs)      dgComments.EditItemIndex = e.Item.ItemIndex      ... 

When the DataGrid is rendered, the row index that corresponds to the value of the EditItemIndex property in each column of the row is rendered in its edit mode. The default edit mode for a column is a TextBox Web control. Additionally, when a row is rendered in edit mode, the Edit button is replaced with two new buttons: Update and Cancel. The user can then make changes to the data in the column; when she's done, she can click the Update button to save the data to the database, or Cancel to cancel the editing. Clicking either of these buttons causes a postback, and either the DataGrid's UpdateCommand or CancelCommand event is fired, depending on what button was clicked. The event handlers for the UpdateCommand event must update the database with the new values. Both event handlers should conclude by resetting the DataGrid's EditItemIndex property back to 1, which will render every row in the DataGrid in its usual non-edit mode.

NOTE

Recall from Chapter 4, "Adding Buttons and HyperLinks to the DataGrid Web Control," that when any button in a DataGrid is clicked, the DataGrid's ItemCommand event is fired. This means that when the Edit, Update, or Cancel button is clicked, the ItemCommand event is fired along with the EditCommand, UpdateCommand, or CancelCommand event.

Let's take a moment to examine a couple of screenshots of the DataGrid's editing features in action. Figure 9.1 contains a view of an editable DataGrid as displayed when the page is first visited, or whenever the DataGrid's EditItemIndex property is set to 1 (the default).

Figure 9.1. An editable DataGrid with each row displaying an Edit hyperlink.

When the user clicks the Edit button for a particular row, that row becomes the row being edited. Each column of the row is rendered in its edit mode, and the Edit button is replaced by a pair of Update and Cancel buttons. Figure 9.2 shows the DataGrid after a row has been selected to be edited. Note that it is possible not to have all the columns of the edited row enter their edit mode. Columns that refrain from entering an edit mode are read-only; we'll examine how to specify a column as read-only in the next section.

Figure 9.2. A row has been selected to be edited.

After a user makes his changes and clicks the Update button, the changes are saved to the database and the DataGrid is returned to its previous form as shown in Figure 9.1. If, on the other hand, the user clicked the Cancel button, the DataGrid is returned to its previous form without saving any of the changes.

To summarize, the built-in DataGrid's editing functionality uses an interface that allows the user to edit one row at a time. You can create an interface that, say, lets the user edit all rows at once with an Update All button at the bottom of the page; however, you will be on your own for providing such an interface. To accomplish this custom interface and updating, you would need to use the techniques discussed in Part II.