An Extensive Examination of the DataGrid Web Control: Part 6By Scott Mitchell
The Cancel Button
As aforementioned, when a particular row is selected for editing the "Edit" button is replaced with an "Update" and a "Cancel" button. The semantics of the "Cancel" button is to return the DataGrid to its non-editing state without saving any changes. Like the "Edit" button, the "Cancel" button, when clicked, fires an event, specifically the
CancelCommandevent. The event handler for this event, which we'll need to write, will simply need to set the DataGrid back to its pre-editing state. To accomplish this we simply need to set the
EditItemIndexproperty back to -1 and rebind the DataGrid (calling
The Update Button
Just like the "Edit" and "Cancel" buttons, the "Update" button, when clicked, trips an event, specifically the
UpdateCommandevent. The code we have to write for this event handler is quite a bit longer than a measly two lines of code, as was the case with the event handlers for the "Edit" and "Cancel" button events. Our "Update" button's event handler must read in the values the user has entered into the textboxes and then construct an applicable SQL statement.
The "Update" button's event handler accepts two incoming parameters, an Object and a
DataGridCommandEventArgs parameter contains
Item, which is an instance of the
DataGridItem that corresponds
to the DataGrid row whose "Update" button was clicked. This
DataGridItem object contains
Cells collection, which can be interrogated to retrieve the text or controls at the various
columns of the DataGrid. We can use this
DataGridItem object to determine the values
of the edited row's
ProductID as well as the values the user has entered into the textboxes
for the price, name, and description.
Note that the value of the
ProductID, which was not a textbox in the edited mode (since it was
ReadOnly), can be retrieved by the
Text property of
Cells(1) is used to get the second
TableCell in the DataGrid row.
TableCell (which would be referenced via
Cells(0)) is the column
that contains the "Update" and "Cancel" buttons.
Retrieving the price, name, and description is a bit more difficult due to the fact that the values
we are after are the textual content inside the textboxes inside the table cells. (Whew, try to say
that five times fast!) Hence we use the
CType function to cast the first control
Controls(0)) in the appropriate
TableCell to a
TextBox Web control;
then, we simply interrogate the
Text property. (If you
are using C# you'd use casting like:
((TextBox) e.Items.Cells.Controls).Text as opposed
CType, which is a VB.NET built-in function.)
Once we have these values we can construct our SQL UPDATE statement. Rather than using a dynamic SQL statement as done in the previous DataGrid articles, I will use the parameterized form, which I find to be a cleaner approach - feel free to use whatever approach you appreicate most.
Now that the database has been updated with the user's edits, all that remains is to return the DataGrid
to its pre-editing form (by setting
EditItemIndex to -1) and then rebinding the DataGrid
Finally, to wrap up the code, you'll need to specify that the
UpdateCommand events be wired up to the appropriate event handlers by inserting the following
code into your DataGrid control:
As we saw in this article, the DataGrid control has uses beyond the simply presentation of data - it can also be used to allow inline editing of said data. Furthermore, building such functionality into a DataGrid is relatively simple, the only "real" code we had to write was in the "Update" button's event handler. Still, this code is substantially less code than would have to be written in providing such functionality in a classic ASP application.