JavaScript confirm on gridview delete

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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

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.

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

In the GridView tasks pane, select "SqlDataSource1" from "Choose Data Source" dropdownlist. Select "Enable Deleting" checkbox.

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

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.

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") + "');");
}
}

[shwetamore]

really Helped That to Debug colleagues code, ....Thanks alot Sir

[Krishnamishra_]

sir  your video are
very very much thankyou  sir for uploading video

[vamsynalla]

That was great...Can you tell me how to print "delete successful!" message on page on clicking "ok"

[josephregallis]

I found the solution. I needed to set the DataKeyNames property on the gridview control to ID. It works fine now.

[johnmorga]

Excellent tutorials. when I try to associate JavaScript programatically to delete button client click event, the RowDataBound event is not available. When I double-click on the event nothing happens. How do I enable the events?

[Shinigami_india]

Hello sir, I'm unable to ✔️ the Generate INSERT, UPDATE, and DELETE statement box
Please help

[josephregallis]

I found the solution. I needed to set the DataKeyNames property on the gridview control to ID. It works fine now.