GridView: how to add a confirmation box to delete button

In case you use delete buttons in a GridView (like below) it would be nice to ask the user for confirmation (message box).

There are two ways to achieve this:

1. By using the ConfirmButtonExtender in Ajax.
2. By adding a confirmation box to each row when the grid rows are bound.

The first options is the easiest to implement (only design, no code-behind). The second the most flexible: you can add information about the record in your question.

1. By using the ConfirmButtoExtender in Ajax

• Be sure Ajax is available (see ajax.asp.net).
• Add a reference to the toolkit in you web page

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit”
    TagPrefix=”ajaxToolkit” %>

• In the GridView, use a template field for the delete column containing the (image button) for the delete command.
• Add the ConfirmButtonExtender to the ItemTemplate of the delete column and link the TargetControlID to the delete button.
  The source for the delete column should look something like this (the squared area is the part where the delete button is defined, the rest is the complete GridView-definition):

<asp:GridView ID=”gridOverview” runat=”server” AutoGenerateColumns=”False”
    AllowSorting=”false”
    DataKeyNames=”selectcolId” DataSourceID=”odcColumns” AllowPaging=”false”
    OnRowCommand=”gridOverview_OnRowCommand”
    OnRowDataBound=”gridOverview_OnRowDataBound”>
    <Columns>
        <asp:BoundField DataField=”bookTitle” HeaderText=”Title” >
            ItemStyle CssClass=”grid-column-small” />

        <asp:TemplateField HeaderText=”Delete” >
            <ItemStyle CssClass=”grid-column-buttons” />
            <ItemTemplate>
                <asp:ImageButton ID=”ibDelete” runat=”server”
                    CausesValidation=”False” CommandName=”Delete”
                    ImageUrl=”~/Images/icon-delete.gif” />
                <ajaxToolkit:ConfirmButtonExtender ID=”ConfirmBtExt1″
                    runat=”server” TargetControlID=”ibDelete”
                    ConfirmText=’Are you sure about deleting this record?’ />
            </ItemTemplate>
        </asp:TemplateField>

 
        <asp:CommandField ButtonType=”Image”
             SelectImageUrl=”~/Images/icon-pencil.gif” HeaderText=”Edit”
             ShowHeader=”True” ShowSelectButton=”True” CausesValidation=”False”
             sItemStyle-CssClass=”grid-column-buttons” />

        <asp:TemplateField HeaderText=”Order”>
            <ItemTemplate>
                <asp:ImageButton ID=”ibColDown” runat=”server”
                      CommandName=”ColDown” ImageUrl=”~/Images/down.gif”
                      CommandArgument=”<%# Container.DataItemIndex %>“ />
                <asp:ImageButton ID=”ibColUp” runat=”server”
                      CommandName=”ColUp” ImageUrl=”~/Images/up.gif”
                      CommandArgument=”<%# Container.DataItemIndex %>“ />
            </ItemTemplate>
            <ItemStyle CssClass=”grid-column-buttons” />
        </asp:TemplateField>    
    </Columns>
</asp:GridView>

For more information, see ConfirmButton

2. By adding a confirmation box to each row when the rows are bound

• Add a reference to an event handler in the GridView (see also the example above):

OnRowDataBound=”gridOverview_OnRowDataBound”

• The delete column (ItemTemplate) should be an (image) button in a template field (replace the squared area in the example above with this code):

        <asp:TemplateField HeaderText=”Delete” >
            <ItemStyle CssClass=”grid-column-buttons” />
            <ItemTemplate>
                <asp:ImageButton ID=”ibDelete” runat=”server”
                    CausesValidation=”False” CommandName=”Delete”
                    ImageUrl=”~/Images/icon-delete.gif” />
            </ItemTemplate>
        </asp:TemplateField>

• Create the event handler ‘gridOverview_OnRowDataBound’ in the code behind. When each row is bound, this procedure will add a message box to the image button.

protected void gridOverview_OnRowDataBound(object sender, GridViewRowEventArgs e)
//Add delete msgbox to each row containing field
//information to identify the row
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // reference the Delete ImageButton
        ImageButton ib = (ImageButton)e.Row.FindControl(“ibDelete”);
        ib.Attributes.Add(“onclick”,“javascript:return ” +

            confirm(’Are you sure about deleting ” +
            DataBinder.Eval(e.Row.DataItem, “bookTitle”) + “?’);”);
    }
}

---

Possibly related posts: (automatically generated)

• MultiDelete in GridView
• Nested GridView with JS