My ASP knowledge base

GridView: how to add a confirmation box to delete button

Posted by Jan on June 22, 2007

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

gridview

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”) + “?’);”);
    }
}

17 Responses to “GridView: how to add a confirmation box to delete button”

  1. I’ve been interested in trying to figure out how to do something like this. Thanks!

  2. Sam Kasthuri said

    This realy helped me .
    thank you
    Sam

  3. John said

    Yes, that’s great help. This is perfect post for me that i am searching.

    Thanks.
    John Webmaster of
    http://www.seomaterial.com

  4. Radha said

    How can we handle ok button… or cancel button

  5. bob said

    Hey, do you have the css and buttons you used above?

  6. Parwez said

    Add delete msgbox to each row with ConfirmButtoExtender in Ajax

    Just Add on the following in the

    ConfirmText= ”

  7. Parwez said

    I think there was problem with previous post due to double cots.

    Just change * to single and ** double cots.

    ConfirmText= **

  8. Bhaskar said

    This is a good Example but can anyone tell me how to add Alert Message to Check Checkbox on Click of Save button and save button is on template

    Means,

    I have one gridview and into this 100 Checkbox and at the time of save i have to show message Please Select Atlist one Checkbox if user doesnot select any record

  9. dwing said

    I’m new to aspx and am attempting to implement option #2.
    I see the confirmation dialog, but when I select ‘OK’, the only event that fires in my code behind is the Page_Load.

    If I remove the confirmation dialog, then the OnRowCommand and OnRowDeleting events fire.

    Any ideas?

  10. Munene said

    This sorted me out.Thanks alot

  11. Bobby said

    Is it possible to include some info (Like Title as per above example) into confirmation message.

    Thank you,
    Bobby

  12. Mushari said

    very nice :)

  13. Namitha said

    How do we get the index of the row we want to delete?

  14. Namitha said

    I have used ajax.but how to delete then?the row delete event is not firing in this case.

  15. Andrei said

    For #2 why not simply add OnClientClick=”return confirm(‘Are you sure?’);” to your ImageButton attributes?

  16. Great stuff! Worked out well – nice and simple to understand as well :D
    Thanks again,

    Phill

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>