Objective: This article provides step by step instruction for how to add delete confirmation to a GridView in ASP.NET.

Background: In a previous article I have illustrated a simple way of adding a client side confirm popup action to any button on your page. In this article we will use the same technique for the GridView delete button. It is a very simple procedure with the only tricky part being for the beginner is to learn how to expose this part of the GridView so we can assign a few simple properties to it. To read my previous tutorial please click ** Here **.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008, SQL Server 2005 Express and the NorthWind database.

1. Let’s start by adding a new web form to your site and name it anything you want.
2. From the Data tab of your toolbox, drag and drop a a GridView onto the page.
3. If its not already open, click to open the GridView’s Smart Tag and add a new DataSource.

   
   

4. For simplicity’s sake, let’s create a simple SqlDataSource of your choosing. For this article I’m using the NorthWind database from Microsoft.
5. From the Employees table, I select the following columns: EmployeeID, LastName, and FirstName.
6. Then I click on the “Advanced” button and check the “Generate Insert, Update and Delete Statements” checkbox and also the (Use optimistic concurrency” checkbox and click OK.

   
   

7. Then I click Next and Finish to finish creating my GridView.
8. Now from the GridView’s Smart Tag I check the boxes for Enable Paging, Enable Editing, and Enable Deleting. Really, the Enable Deleting is the only one we need, I’m just playing along to make things a bit more realistic.

   
   

9. Now from the GridView’s Smart Tag and click on the Edit Column link.
10. Then from the Selected Fields area I click to highlight the CommandField on top of the list to expose its CommandField properties on the right.

    
    

11. From the ButtonType property I then select the Button instead of the Link display type and click the “convert this field into a template field” link and finally click OK.
12. Now that I have converted this field into a template field and exposed its properties, I can go into code view an add a couple of properties to it. So, let’s go into code view and find the Delete button. It should look like below. Showing both the Edit and Delete button between the ItemTemplate tags:

    <ItemTemplate>
        <asp:Button ID="Button1" runat="server" CausesValidation="False"
            CommandName="Edit" Text="Edit" />
        &nbsp;<asp:Button ID="Button2" runat="server" CausesValidation="False"
            CommandName="Delete" Text="Delete" />
    </ItemTemplate>

13. Finally, I add the following client side javascript property to my Delete button: OnClientClick=”return confirm(‘Are you sure?’);”. The result should look like the code below:

    <ItemTemplate>
        <asp:Button ID="Button1" runat="server" CausesValidation="False"
            CommandName="Edit" Text="Edit" />
        &nbsp;<asp:Button
                ID="Button2" runat="server"
                CausesValidation="False"
                CommandName="Delete"
                Text="Delete"
                OnClientClick="return confirm('Are you sure?');" />
    </ItemTemplate>

14. Change the message for the popup dialogue as desired. Load the page into your browser to give it a spin.

    

15. That’s it! Enjoy.