GridView Delete With Confirmation
Recently I undertook the creation of a GridView control for which I wanted Edit, Delete, Update and Cancel buttons. There are a couple of out-of-the-box ASP.Net solutions for this problem. The first is to simply use the "AutoGenerate" attributes of the GridView control. For example,
<asp:GridView ID="RulesGridView" runat="server" AutoGenerateColumns="false" AutoGenerateDeleteButton=true AutoGenerateEditButton=true HeaderStyle-CssClass="b24-report-title" DataKeyNames="RuleID" EditRowStyle-CssClass="b24-editrow" CellPadding=4 >
The problem with this solution is twofold:
- You get links instead of buttons, which feels a little awkward
- You can't specify a javascript confirmation dialog before the delete is executed
Okay, so there's another option. You can remove the "AutoGenerate" attributes and instead specify a "CommandField" column as follows:
<asp:GridView ID="RulesGridView" runat="server" HeaderStyle-CssClass="b24-report-title"
DataKeyNames="RuleID" EditRowStyle-CssClass="b24-editrow" CellPadding=4>
<columns>
<asp:CommandField ButtonType=Button ShowEditButton=true ShowDeleteButton=true ShowCancelButton=true EditImageUrl="~/images/GVEditButton.gif" DeleteImageUrl="~/images/GVDeleteButton.gif" CancelImageUrl="~/images/GVCancelButton.gif" UpdateImageUrl="~/images/GVUpdateButton.gif" />
This solution solves problem number 1. We now have buttons. However, you still cannot put a javascript confirmation on the delete button. So that leads us to a custom template field and some code-behind. There are a couple of good references on the web for such a solution:
http://www.codeproject.com/KB/webforms/GridViewConfirmDelete.aspx
http://msdn.microsoft.com/en-us/library/ms972940.aspx
The problem with these examples is that the Edit, Delete, Update and Cancel buttons are not all coordinated as they are in the auto-geneated solutions. These examples provide a delete button in isolation -- not so useful. If you want the default Edit, Delete, Update, Cancel toggling *behavior* with a javascript confirmation on the delete operation, then you have to take the examples a bit further. This is what I've done below. You get the default behavior with the customized buttons and javascript delete confirmation. The web form with the template looks like the following:
<asp:GridView ID="RulesGridView" runat="server" AutoGenerateColumns="false" HeaderStyle-CssClass="b24-report-title" DataKeyNames="RuleID" EditRowStyle-CssClass="b24-editrow" CellPadding=4 >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="EditButton" CommandArgument='<%# Eval("RuleID") %>' CommandName="Edit" runat="server" ImageUrl="~/images/GVEditButton.gif" AlternateText=Edit Visible=false />
<asp:ImageButton ID="DeleteButton" CommandArgument='<%# Eval("RuleID") %>' CommandName="Delete" runat="server" ImageUrl="~/images/GVDeleteButton.gif" AlternateText=Delete Visible=false OnClientClick="BLOCKED SCRIPTreturn confirm('Delete this record? Are you sure?');" />
<asp:ImageButton ID="UpdateButton" CommandArgument='<%# Eval("RuleID") %>' CommandName="Update" runat="server" ImageUrl="~/images/GVUpdateButton.gif" AlternateText=Update Visible=false />
<asp:ImageButton ID="CancelButton" CommandArgument='<%# Eval("RuleID") %>' CommandName="Cancel" runat="server" ImageUrl="~/images/GVCancelButton.gif" AlternateText=Cancel Visible=false />
</ItemTemplate>
</asp:TemplateField>
</columns>
Notice that all the buttons have visible=false by default. So now you need a little bit of jiggering on the code-behind. Add a handler for the RowCreated event:
RulesGridView.RowCreated += new GridViewRowEventHandler(RulesGridView_RowCreated);
And in the handler, toggle the buttons:
/// <summary>
/// Updates to individual rows as they're created
/// </summary>
void RulesGridView_RowCreated(object sender, GridViewRowEventArgs e)
{
GridView rulesGridView = sender as GridView; // The rules gridview itself
GridViewRow row = e.Row; // The row being created
int editIndex = rulesGridView.EditIndex; // Row currently being edited
if (row.RowType == DataControlRowType.DataRow)
{
// Show the relevant buttons depending upon whether the row is edit
ImageButton updateBT = row.FindControl("UpdateButton") as ImageButton;
ImageButton cancelBT = row.FindControl("CancelButton") as ImageButton;
ImageButton editBT = row.FindControl("EditButton") as ImageButton;
ImageButton deleteBT = row.FindControl("DeleteButton") as ImageButton;
if (editIndex == row.DataItemIndex)
{
updateBT.Visible = true;
cancelBT.Visible = true;
editBT.Visible = false;
deleteBT.Visible = false;
}
else
{
updateBT.Visible = false;
cancelBT.Visible = false;
editBT.Visible = true;
deleteBT.Visible = true;
}
}
}
And I think that's about all. Happy programming!
--Brett