Generic GridView Delete Strategy

Last updated : 5th November 2007

Background

There are a number of ways to implement a JavaScript delete confirmation in a GridView. Most of these involve changing the command columns on the GridView into template columns. From here you can either add the onClientClick code to the template directly or search for the control on the row data bound event of the gridview.

Below is a way to get this done in a re-usable way without having to change each pages GridView command columns.

Strategy

We want to create a shared (VB) or static (C#) method that can be used by all pages within the web application. We will still utilise the RowDataBound event but we will encapsulate this functionality and call the method with a single line of code.

We will be using a ObjectDataSource connected to a Gridview to demonstrate this.

Implementation

I have extracted a slimmed version of the Categories table in Northwind and saved it as XML for this article. I have provided the source code so I'll not be covering the simple Data object class.

Firstly we want to create a re-usable routine that can be called from any page. Each page may vary the command column location on the GridView. Some users like this to be the first column on the left, others prefer the 'Edit', 'Delete' commands to be on the right. Therefore we need to keep this flexible to prevent excessive control look-ups on the RowDataBound events. The completed code is shown below:

Public NotInheritable Class GridViewHelper

    Private Sub New()
    End Sub

    ''' <summary>
    ''' Adds a javascript pop-up delete confirmation message to ANY LinkButton control 
    ''' found in the passed column index that has a text value of Delete
    ''' </summary>
    ''' <param name="deleteColumnIndex">the column you wish to 
    ''' restrict your search for a Delete LinkButton control</param>
    ''' <param name="e">The GridView row agruments when the GridView is in RowDataBound</param>
    ''' <remarks></remarks>
    Public Shared Sub AddDeleteConfirmation(ByVal deleteColumnIndex As Integer, ByVal e As GridViewRowEventArgs)
        '' Check you are only working with Data Rows, not headers/footers
        If e.Row.RowType = DataControlRowType.DataRow Then
            '' Loop through each control in the GridView command column
            For Each ctl As Control In e.Row.Cells(deleteColumnIndex).Controls
                Try
                    '' If it is a LinkButton with a text value of Delete then add the confirmation message.
                    If TypeOf (ctl) Is LinkButton Then
                        Dim DeleteLink As LinkButton = CType(ctl, LinkButton)
                        If DeleteLink.Text.ToLower = "delete" Then
                            DeleteLink.Attributes.Add("onclick", _
                                                   "return confirm(""Are you sure you wish to delete this record?"")")
                        End If
                    End If
                Catch ex As Exception
                    ' just ignore for deployment. May want to re-throw for development.
                End Try
            Next
        End If
    End Sub

End Class

Now, we want to hook this up to our GridViews.  We will use the RowDataBound event to loop through the LinkButton controls on the command column of the GridView. If it finds one that has a text value of 'delete' it will add the necessary JavaScript to provide users with the delete confirmation message box. The code is shown below:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
                                    ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        '' The command buttons are in the first column (zero index)
        GridViewHelper.AddDeleteConfirmation(0, e)
End Sub

The finished article will produce the following results:

Summary

As you can see this provides the basis of a generic delete pop-up confirmation routine that you can use without having to convert your command column to template fields. You can further extend this by passing 'unique' row information to provide a more detailed message to the client.