Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

JavaScript confirm on gridview delete

Suggested Videos
Part 1 - Adding JavaScript to ASP.NET controls



In this video we will discuss how to display JavaScript confirmation dialog box when we attempt to delete a GridView row.



As you can see from the image below, when we click the Delete link button a confirm dialog box should be displayed with the message - Are you sure to delete. If we click OK button the respective row should be deleted. If we click Cancel, the row should not be deleted.
JavaScript confirm on gridview delete

So let us look at different options available to add JavaScript to the Delete button in a GridView control.

The following SQL Script creates SampleDB, Employees table and populates it with test data

Create Database SampleDB
GO

Use SampleDB
GO

Create Table Employees
(
     ID int identity primary key,
     Name nvarchar(100),
     Gender nvarchar(10)
)
GO

Insert into Employees values('Mark', 'Male')
Insert into Employees values('John', 'Male')
Insert into Employees values('Sara', 'Female')
Insert into Employees values('Mary', 'Female')
Insert into Employees values('Mike', 'Male')

Now drag and drop a GridView control and a SqlDataSource control onto the webform.

Configure SqlDataSource control
1. Click Configure Data Source link
Configure SqlDataSource control

2. On Choose Your Data Connection screen, click "New Connection" button

3. On Add Connection screen, set
a) Server name = (local)
b) Select "Use Windows Authentication" radio button
c) From "Select or enter a database name" dropdownlist, select SampleDB
d) Click OK
how to add new connection in asp.net

4. Click "Next" on Choose Your Data Connection screen

5. Click "Next" on "Save the Connection String to the Application Configuration File"

6. On "Configure the Select Statement" screen, click "Advanced..." button

7. On "Advanced SQL Generation Options" screen, select "Generate INSERT, UPDATE and DELETE statements" checkbox and click OK.

8. Click "Next" on "Configure the Select Statement" screen

9. Click "Finish" on Test Query screen.

10. In the GridView tasks pane, select "SqlDataSource1" from "Choose Data Source" dropdownlist. Select "Enable Deleting" checkbox.
asp.net gridview enable delete

Now flip the Webform to the source mode and notice that we have 4 columns. The first column is a command field that is used for deleting the row from the GridView control.
<Columns>
    <asp:CommandField ShowDeleteButton="True" />
    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
                    ReadOnly="True" SortExpression="ID" />
    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
    <asp:BoundField DataField="Gender" HeaderText="Gender"
                    SortExpression="Gender" />
</Columns>

If you want to add JavaScript to the delete button declaratively, then we need to convert the command field to a Template field. To do this, flip the webform to the design mode.
1. In GridView tasks pane, click "Edit Columns..." link
edit gridview columns

2. On Fields screen
a) Click on "Delete" field in "Selected fields" section
b) Click "Convert this field into a TemplateField" link
c) Click OK

Now flip the Webform to the source mode and notice that the Delete button is now generated as Link Button.
<Columns>
    <asp:TemplateField ShowHeader="False">
        <ItemTemplate>
            <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
                CommandName="Delete" Text="Delete"></asp:LinkButton>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
        ReadOnly="True" SortExpression="ID" />
    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
    <asp:BoundField DataField="Gender" HeaderText="Gender"
        SortExpression="Gender" />
</Columns>

To associate JavaScript to the Delete link button client click event, use OnClientClick attribute as shown below
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
    CommandName="Delete" Text="Delete"
    OnClientClick="return confirm('Are you sure to delete');" >
</asp:LinkButton>

If you want to associate JavaScript programatically to delete button client click event using server side code
1. Remove the OnClientClick attribute from the HTML
2. Generate GridView1_RowDataBound event handler method
3. Copy and paste the following code in GridView1_RowDataBound event handler method
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        LinkButton lb = (LinkButton)e.Row.FindControl("LinkButton1");
        lb.Attributes.Add("onclick", "return confirm('Are you sure to delete');");
    }
}

If you also want include the ID of the record being deleted in the confirmation message as shown below.
gridview delete confirmation message in asp.net

Modify the code in RowDataBound as shown below
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        LinkButton lb = (LinkButton)e.Row.FindControl("LinkButton1");
        lb.Attributes.Add("onclick", "return confirm('Are you sure to delete record with ID = "
                            + DataBinder.Eval(e.Row.DataItem, "ID") + "');");
    }
}

JavaScript with ASP.NET tutorial

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.