An Extensive Examination of the DataGrid Web Control: Part 8By Scott Mitchell
|The Eighth Part in a Multi-Part Series|
This article is the eighth piece of a multi-part series on using the DataGrid Web control that will span
several months. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versatile. The basics of the DataGrid were discussed in Part 1;
information on specifying display properties of the DataGrid was discussed in
Part 2. In Part 3
we examined how to associate custom events with the DataGrid.
In Part 4 we looked at how to extend
Part 3 to provide custom sorting on the results of a DataGrid. In
Part 5 we examined how to use templates to further customize
the DataGrid's appearance. Part 6 examined how to use the
DataGrid's built-in editing capabilities, while Part 7 looked at
customizing the editing interface using the EditItemTemplate. In this part we will look at how to
add client-side code to a ButtonColumn's client-side |
In Part 6 in this article series we examined how the DataGrid could be utilized to provide in-place editing of data. In addition to allowing a user to edit data, one may want to allow the user to delete data. This can be accomplished by adding a ButtonColumn control that contains a Delete button, which will add a Delete button to each row of the DataGrid. When a user clicks the Delete button for a particular row, that row will then be deleted from the database.
To accomplish this we have to perform the following tasks:
- Create a ButtonColumn that contains a Delete button.
- Somehow be able to determine when the Delete button has been clicked and have some server-side code ready to execute.
- Be able to determine the primary key field value for the row whose Delete button has been clicked. We need to primary key field value so that we can issue a SQL statement to delete the selected row.
In addition to examining how to accomplish the above three steps, this article will also look at how to add a client-side confirm dialog box to the Delete button. That is, when a user clicks the Delete button a client-side messagebox will appear, asking the user if they are sure if they want to delete the item. If they click OK, the row will be deleted; if they click cancel, nothing will happen.
Creating a Delete Button
In Part 3 of this article series we examined how to add ButtonColumns to a DataGrid Web control. Recall from Part 3 that any time a DataGrid's ButtonColumn button is clicked by the user, the ASP.NET Web page performs a postback and the DataGrid's
ItemCommandevent is raised. While we could place our delete code in the
ItemCommandevent handler, the DataGrid control offers a special event handler for delete buttons: the
In order to create a ButtonColumn that triggers the
DeleteCommand event handler you must
set the ButtonColumn's
CommandName property to "Delete". Once you do this, you will want
to create an event handler for the
DeleteCommand event. This event handler takes the form:
In this event handler we'll (eventually) place the code to make a database call to delete the specified
DataGrid item. Finally, to complete the last piece of the puzzle we must tell the DataGrid that when
DeleteCommand event fires the event handler (
be executed. We do this by setting the DataGrid's
OnDeleteCommand property to the
event handler in the DataGrid's declaration like so:
Below you can see a simple example that illustrates adding a Delete button to a DataGrid, adding an
event handler for the
DeleteCommand event, and wiring up this event handler to the DataGrid's
It is important to set the ButtonColumn's
CommandName property to "Delete", otherwise
DeleteCommand event won't fire when the command button is clicked.
(Rather, just the DataGrid's
ItemCommand event will fire.) Also note that in order
to have the
dgPopularFAQs_Delete event handler execute when the DataGrid's
DeleteCommand event fires we had to specify
in the DataGrid's declaration.
Determining the Clicked Row's Primary Key Field Value
In order to issue a database command to delete the selected item from the DataGrid, we must be able to uniquely identify the selected item. Usually this takes the form of a numeric primary key field. In the live demos for this article, we're using the ASPFAQs.com database, and the primary key for each FAQ is a database field called
In Part 3 we looked at one method for retrieving a primary key
field value, which involved using a hidden BoundColumn and then referencing the value of the BoundColumn
programmatically in the
ItemCommand event handler. We could use this approach here as well,
since we already have a BoundColumn displaying the
FAQID. However, let's use a more
The DataGrid control contains a
DataKeyField property. This optional property can be used
to specify the primary key field for the data being displayed in the DataGrid. If this property is set,
a separate DataGrid property,
DataKeys (a collection), is populated with the primary key values
for each row in the DataGrid. Hence, we can access this collection programmatically in our
DeleteCommand event handler. To get the proper item out of the
we simply reference the index that is equal to the clicked DataGrid row's
concept is illustrated below:
In the live demo you can see that when clicking a Delete button
we can ascertain the row's corresponding
FAQID. We could have used the techniques learned in
Part 3 in order to retrieve the value of the
FAQID BoundColumn, but, personally, I find using the
approach to be cleaner code.
Now that we've examined how to add a Delete button to each row, and how to determine the primary key field
value for the row whose Delete button was clicked, writing the code to make the actual database call to
delete the record should be fairly simple, and therefore is left as an exercise for the reader.
The one thing that is important is to remember to recompute the DataGrid's
call the DataGrid's
DataBind() method. This is needed because the
has changed (a row has been deleted).
Before we wrap up this article, let's take a look at how to add some client-side confirmation code for the Delete button. That is, when the user clicks the Delete button for a row in the DataGrid, let's have a client-side messagebox pop up, asking the user if they're sure they want to delete the record. If they click Cancel, the record won't be deleted; if they click OK, however, the record will be deleted. We'll see how to do this in Part 2.