Introduction
A common requirement in non-trivial data editing forms is to request confirmation of pending deletions. However, the default behaviour of the .NET GridView
control on deletion is to commit the deletion without soliciting any further feedback from the user. This behaviour does tend to make GridView
-based data editing forms prone to accidental deletion ("I swear I pressed the 'Edit' link...").
Background
Numerous solutions to the above problem have been documented. The approach discussed here is a simple server-side solution which doesn't require the use of JavaScript popups. An example screenshot of the approach in action is shown below, with the third record (TaskID 4) displaying the Confirm link following the use of the Delete link.
Using the code
The server-side deletion confirmation approach involves:
- the use of explicit Command Links for Edit and Delete, and
- implementation of the
gridview_RowDeleting
event handler.
Command Links
Rather than using a GridView
CommandField
for rendering the Edit and Delete Command Links, templated LinkButton
s are used instead; one LinkButton
for Edit (with a CommandName
of 'Edit') and another LinkButton
for Delete (with a CommandName
of 'Delete'). The use of explicit controls here allows us to manipulate the Command Links server-side on post-back. Note that the remainder of the GridView
mark-up has been omitted from the sample provided below.
// rather than use a CommandField, i.e...
<asp:CommandField ShowEditButton="true" ShowDeleteButton="true" />
// ...explicitly list each command as a LinkButton in a Template Field instead
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server"
CommandName="Edit" Text="Edit" />
<asp:LinkButton ID="lnkDelete" runat="server"
CommandName="Delete" Text="Delete" />
</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="lnkUpdate" runat="server"
CommandName="Update" Text="Update" />
<asp:LinkButton ID="lnkCancel" runat="server"
CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
</asp:TemplateField>
GridView RowDeleting Event Handler
The RowDeleting
event handler needs to accomplish two tasks:
- Show a Confirm link (plus an associated Cancel link) if the Delete Command Link has been pressed (i.e., on first transit of a
GridView
item through the RowDeleting
event handler). - Delete the
GridView
item if the Confirm Command Link has been pressed (i.e., on second transit of a GridView
item through the RowDeleting
event handler).
The approach used here is a bit lazy, but avoids complicating the solution with additional complexity for what is a fairly straightforward process, which goes something like this:
- The 'Delete'
CommandName
of the Delete Command Link initiates row deletion on the GridView
. The first event fired in the row deletion pipeline is the RowDeleting
event. By handling this event, we have the opportunity to control the outcome of the deletion process (e.g., by cancelling the event), plus we can also update the GridView
content as desired. - The actual deletion of a
GridView
item requires the item to transit the RowDeleting
handler twice. On first transit, the text of the Delete Command Link (i.e., the LinkButton
with the ID "lnkDelete
") is updated from 'Delete' to 'Confirm', and further processing along the GridView
item deletion pipeline is cancelled by setting the Cancel
property of the incoming GridViewDeleteEventArgs
argument to true
. On second transit of the GridView
item through the RowDeleting
handler, we effectively recognize that the row deletion event was fired by a Confirm link by the simple fact that the text of the DeleteCommand
link is not 'Delete' (but rather 'Confirm'). In this case, the deletion proceeds as normal. - To provide a means of cancelling the deletion, the otherwise redundant Edit Command Link is re-employed as a Cancel Command link by:
- Changing its text to 'Cancel', and
- changing it's
CommandName
to 'Cancel'.
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
LinkButton lnk =
(LinkButton)GridView1.Rows[e.RowIndex].FindControl("lnkDelete");
if (lnk.Text == "Delete")
{
lnk.Text = "Confirm";
e.Cancel = true;
LinkButton lnk2 =
(LinkButton)GridView1.Rows[e.RowIndex].FindControl("lnkEdit");
lnk2.Text = "Cancel";
lnk2.CommandName = "Cancel";
}
}
Further Embellishments
The above solution provides a workable approach to implementing a Delete Confirm functionality in a GridView
. One possible embellishment to make the solution a little more user-friendly would be to change the CssClass
of the pending deletion row to make it a bit more obvious that:
- something important is about to happen, and
- further action is required by the user.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.