JavaScript delete confirmation with the C1 ASP.NET GridView

By James at November 08, 2010 23:04
Filed Under: JavaScript, C1GridView, ASP.NET

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.


7587.blog1b_68AFA015

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

     <cc1:C1TemplateField>
          <ItemStyle Width="25px" VerticalAlign="Top" />
          <ItemTemplate>
               <asp:ImageButton ID="lbDelete" 
                  runat="server" 
                  ImageUrl="~/Images/delete.gif" />
           </ItemTemplate>
      </cc1:C1TemplateField>

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(&#39;Are you sure you want to 
               delete this record?&#39;);" />
     </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.

2260.blog1a_57E7F567

6761.blog2a_2E90AD69

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

Happy programming,

James

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading


About the author

James James is a five time and current Microsoft MVP in Client App Development, a Telerik Insider, a past Director on the INETA North America Board, a husband and dad, and has been developing software since the early days of Laser Discs and HyperCard stacks. As the Founder and President of the Inland Empire .NET User's Group, he has fondly watched it grow from a twice-a-month, early Saturday morning group of five in 2003, to a robust and rambunctious gathering of all types and sizes of .NET developers.

James loves to dig deep into the latest cutting edge technologies - sometimes with spectacular disasters - and spread the word about the latest and greatest bits, getting people excited about developing web sites and applications on the .NET platform, and using the best tools for the job. He tries to blog as often as he can, but usually gets distracted by EF, LINQ, MVC, ASP, SQL, XML, and most other types of acronyms. To keep calm James plays a mean Djembe and tries to practice his violin. You can follow him on twitter at @latringo.

And as usual, the comments, suggestions, writings and rants are my own, and really shouldn't reflect the opinions of my employer. That is, unless it really does.

James Twitter Feed

Recent Comments

Comment RSS

Month List