Creating a Delete Button

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:

 

1. Create a ButtonColumn that contains a Delete button.
2. Somehow be able to determine when the Delete button has been clicked and have some server-side code ready to execute.
3. 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>

[View a Live Demo!]

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>

[View a Live Demo!]

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.

 

Read Part 2!