In Part 1 of this article we examined how to display the data
from the Products database table into a DataGrid. In this part we'll look at how to add
the functionality to allow the user to edit a particular row in the DataGrid.
Allowing the End User to Edit a Row in the DataGrid
To allow the user to edit a row in the DataGrid, we need to provide some means for the user to specify
what row they wish to edit. As we saw in Part 3 of this
article series, one can use ButtonColumn controls to tie a clickable button to each row
of a DataGrid. While we could use this approach to enable editing, it would likely be messy, at
best. Fortunately the DataGrid provides a specific control for this functionality, the
EditCommandColumn control.
The EditCommandColumn control adds a new column to the DataGrid, placing an Edit button
next to each row. The button, when clicked, causes a postback and the EditCommand event
to be fired. As we will shortly see, we'll need to write some code for this event handler. For now,
though, let's just examine how to add an Edit button to the DataGrid using the EditCommandColumn control.
As you can see in the code below, you simply add the EditCommandColumn control like you would
a BoundColumn or ButtonColumn control:
The EditCommandColumn control has a number of optional properties, such as:
ButtonType, which specifies if a hyperlink (LinkButton, the default) or
push button (PushButton) should be used; the text for the Edit, Update, and Cancel buttons,
EditText, UpdateText, and CancelText; and other miscellaneous
display properties, like HeaderText, ItemStyle, etc.
If you read the last paragraph closely you may be a bit surprised that the EditCommandColumn control
has UpdateText and CancelText properties - after all, I had only mentioned that
the EditCommandColumn control provides an Edit button. More accurately, the
EditCommandColumn control provides an Edit button for each row except for the
row that is being currently edited. For that row, the EditCommandColumn control shows
two buttons, an "Update" and "Cancel" button.
Selecting a Row to be Edited
The DataGrid contains a property called EditItemIndex, which specifies what row of the
DataGrid is the row being edited. The DataGrid numbers its rows starting at 0. By default, the
DataGrid is not editing any row, so the EditItemIndex, by default, has a value
of -1. Since we want to mark a row for editing when its "Edit" button is clicked, we simply need to
write some code in the EditCommand event handler, which is the DataGrid event handler that
is fired when the EditCommandColumn control's "Edit" button is clicked. This event handler
simply needs to set the EditItemIndex property to the row whose "Edit" button was clicked
and then rebind the DataGrid data (by calling BindData()). The code for this event handler
can be seen below:
Sub dgProducts_Edit(sender As Object, e As DataGridCommandEventArgs)
dgProducts.EditItemIndex = e.Item.ItemIndex
BindData()
End Sub
To wire this event handler up to the EditCommand event, simply specify this in your
DataGrid control, like so:
Note that with this code when the user clicks the "Edit" button the Web page will be posted back and
the DataGrid row whose "Edit" button was clicked will have, in place of the "Edit" button, an "Update"
and "Cancel" button. Furthermore, the data values in the cells in the DataGrid for the edited row have
automatically changed from a textual value to a value in an editable textbox, as can be seen in the screenshot
to the left.
If you are trying this example on your own you may see two discrepancies between the
screenshot and what you are seeing on your computer. The first difference you may have noted was
that in your example, all of the columns in the row being edited were turned into a textbox, while
in the screenshot the ProductID column is not a textbox, thereby making it un-editable.
Clearly there are situations where you want to make certain parts of the data un-editable, as with the
ProductID, which is a primary key in the Products database table. To make
a particular column in your DataGrid un-editable, simply set the ReadOnly property to
True for the particular BoundColumn control. That is, the code for the DataGrid in the screenshot
contains the following DataGrid definition:
You may have also noticed in the screenshot that the row being
edited is shaded a different color than the rest. You can specify all sorts of different stylistic
features for the row being edited by using the EditItemStyle property of the DataGrid.
Simply set this property in the DataGrid control like you would for the HeaderStyle or
ItemStyle, that is:
Now that we've examined how to select a particular row for editing, all that remains is to specify the
code that should execute when the user opts to update the edited row or to cancel. We'll examine
how to accomplish these two tasks in Part 3 of this article.
