JavaScript delete confirmation with the C1 ASP.NET GridView

The ComponentOne ASP.NET GridView allows you to add a Delete button to remove a record from the DataTable. However there isn't a native way to add a confirmation that you really want the record deleted. It's always best to check for sure when it comes to destructive actions, so I did some spelunking and came up with a way to do it.

1. Add a Template Field column to the grid by using either the property builder, or in the declarative code of your .aspx page.

2. Go into source view and add an ItemTemplate, then an asp:ImageButton.

          <ItemStyle Width="25px" VerticalAlign="Top" />  

               <asp:ImageButton ID="lbDelete"   
                  runat="server"   
                  ImageUrl="~/Images/delete.gif" />  

3. In the main C1GridView declaration add a method for the OnRowDataBound event. In this case I added the following:

        OnRowDataBound="AddJavaScriptConfirm" 

4. Add your method to the code behind:

   protected void AddJavaScriptConfirm(object sender, C1GridViewRowEventArgs e)  
    {  
        C1GridViewRow row = e.Row;  
        ImageButton imageButton = (ImageButton) row.FindControl("lbDelete");  
        if(imageButton != null)  
        {  
          imageButton.Attributes.Add("onclick",   
          "**java-script**:return confirm('Are you sure you want to delete this record?')" );  
        }  
    }

What this does is for every row that is databound it finds the ImageButton with the ID of "imgDelete" then adds the "onclick" attribute to the element when it is rendered as html

     <td class="C1Gtd" valign="top" style="width:25px;">  
          <input type="image" name="ctl00$MainContent$C1GridView1$ctl01$ctl07$lbDelete"   
             id="MainContent\_C1GridView1\_lbDelete_4" src="Images/delete.gif"   
             onclick="**java-script**:return confirm('Are you sure you want to   
               delete this record?');" />  
     </td>

NOTE: I had to change javascript to java-script as this blog system sees it as a potential threat. If you copy this code, change the java-script back to javascript.

That's it. Easy, peasy, nice and cheesy.

Happy programming,

James