An Extensive Examination of the DataGrid Web Control: Part 8
By 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 onclick event.
ASP.NET Data Web Controls Kick Start is author Scott
Mitchell's most recent book, which thoroughly examines three of the most commonly
used ASP.NET Web controls: the DataGrid, DataList, and Repeater. These three Web controls
can be difficult to master due to their numerous features and capabilities. With this book, you'll
quickly become an expert, learning the gritty details and true capabilities of each.
This 400+ page book explores the topics in this article series in much greater depth, along with
examining various topics and techniques not covered here.
Scott Mitchell is the editor and founder of 4GuysFromRolla.com, author of the An Extensive Examination
of the DataGrid Web Control article series, and author of numerous other ASP and ASP.NET
books.
Introduction
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 ItemCommand event
is raised. While we could place our delete code in the ItemCommand event handler, the DataGrid
control offers a special event handler for delete buttons: the DeleteCommand event handler.
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:
Sub eventHandlerName(sender
as Object, e as DataGridCommandEventArgs)
... End Sub
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
the DeleteCommand event fires the event handler (eventHandlerName) should
be executed. We do this by setting the DataGrid's OnDeleteCommand property to the
event handler in the DataGrid's declaration like so: OnDeleteCommand="eventHandlerName".
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
DeleteCommand event:
<script language="vb" runat="server">
...
Sub dgPopularFAQs_Delete(sender As Object, e As DataGridCommandEventArgs)
' Place code to perform delete here...
End Sub
</script>
<form runat="server">
<asp:datagrid id="dgPopularFAQs" runat="server"
...
OnDeleteCommand="dgPopularFAQs_Delete">
<Columns>
<asp:ButtonColumn Text="Delete" CommandName="Delete" />
<asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID"
ItemStyle-HorizontalAlign="Center" />
<asp:BoundColumn DataField="Description" HeaderText="Question" />
</Columns>
</asp:datagrid>
</form>
It is important to set the ButtonColumn's CommandName property to "Delete", otherwise
the DataGrid's 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 OnDeleteCommand="dgPopularFAQs_Delete"
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 FAQID.
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
elegant approach.
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 DataKeys collection,
we simply reference the index that is equal to the clicked DataGrid row's ItemIndex. This
concept is illustrated below:
<script language="vb" runat="server">
...
Sub dgPopularFAQs_Delete(sender As Object, e As DataGridCommandEventArgs)
'Get the FAQID of the row whose Delete button was clicked
Dim SelectedFAQID as String = dgPopularFAQs.DataKeys(e.Item.ItemIndex)
'TODO: Delete the record from the database
'TODO: Rebind the DataGrid
End Sub
</script>
<form runat="server">
<asp:datagrid id="dgPopularFAQs" runat="server"
...
DataKeyField="FAQID">
...
</asp:datagrid>
</form>
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 DataKeyField / DataKeys
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 DataSource and
call the DataGrid's DataBind() method. This is needed because the DataSource
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.
