Friendly GridView Deletion Messages

Last updated : 2nd September 2006

Background

You know the scenario. You present a whole load of tabular data to users in a GridView. You may have reduced the font-size so you can cram in an extra couple of rows from the database. You have an Edit and Delete LinkButtons there. So you think well I'll put in a piece of client script to make sure my users get a confirmation pop-up when they are about to delete a record. I'll code the nice OnClientClick event on the LinkButton and put in a 'Are you sure you wish to delete the record' message.

But wait a minute - my users are not that accurate with the mouse - I'm not that accurate with the mouse. And that font is quite small. How do I make 100% sure that they know exactly what record will be deleted?

Well I'll show you how to include some personal information in your pop-up message so there's no mistakes.

Strategy

We need to add a Delete LinkButton into a template field in the GridView. When the GridViews RowDataBound event fires for each row we want to set the onClientClick property of the LinkButton with a personalised message

Implementation

We have a users table that is bound to an ObjectDataSource which in turn is bound onto a GridView control. The GridView code is shown below.

<asp:GridView ID="GvUsers" runat="server" DataKeyNames="ID" AutoGenerateColumns="False"
     AutoGenerateEditButton="true" DataSourceID="ObjectDataSource1">
  <Columns>
    <asp:TemplateField ShowHeader="False">
    <ItemTemplate>
       <asp:LinkButton ID="DeleteUser" runat="server" CausesValidation="False" CommandName="Delete"
           Text="Delete"></asp:LinkButton>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="ID" Visible="False" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
    <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
    <asp:BoundField DataField="Telephone" HeaderText="Telephone" SortExpression="Telephone" />
    <asp:BoundField DataField="Hiredate" HeaderText="Hiredate" SortExpression="Hiredate" />
 </Columns>
</asp:GridView>
    

If you look at the GridView properties you will see that we have set AutoGenerateEditButton to true but have not auto generated the delete button. We have created a template field and added a LinkButton to it with ID="DeleteUser". Note the CommandName="Delete" which auto-wires the delete button to the GridView.

Next step is to code up the GridViews RowDataBound event. As each row is bound to the GridView we search for the Delete LinkButton and customise the OnClientClick property. We use a simple JavaScript confirm function that returns true if the user clicks OK, otherwise false.

Protected Sub GvUsers_RowDataBound(ByVal sender As Object, _
              ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
              Handles GvUsers.RowDataBound
        ' add a confirm button to the delete button
        ' We are only interested in datarows
        If e.Row.RowType = DataControlRowType.DataRow Then
            ' make sure we can find the control first
            If e.Row.FindControl("DeleteUser") IsNot Nothing Then
                ' cast it to a LinkButton and set the client script
                CType(e.Row.FindControl("DeleteUser"), LinkButton).OnClientClick = _
                            "return confirm('Are you sure you want to delete " & _
                            e.Row.Cells(3).Text.Replace("'", "\'") & _
                            " from the database?');"
            End If
        End If
End Sub

You can see we are concatenating a display message with a value from the Name field on the GridView. Single quotes cause issues with the JavaScript so we need to escape them by prefixing them with a backslash e.Row.Cells(3).Text.Replace("'", "\'"). This takes care of names like O'Malley etc.

Now when your users hit delete they will receive a much more detailed message like the one below.

Summary

As you can see this is a very simple technique to add into your web applications. I think this approach is much better than having users on the phone asking for a database restore as they have mistakenly deleted your top customer!