Showing Confirmation Dialog Using JavaScript

Introduction

Today we'll discuss some important aspects of the DataGrid in the ASP.NET. The DataGrid helps you to manipulate the data with select, edit, cancel and delete buttons. The buttons are associated with their events on the server side. The buttons have the command name and property for the select, edit or delete operations.

In that context, in here we'll work with the delete button. You have seen many times we need to get the confirmation from the user about deleting the record. DataGrid does not provide any builtin way to do that. We'll use the JavaScript to do the task.

Let's create the application using the following procedure:

Create the application
Working With DataGrid
Applying JavaScript
Run the application

Create the Application

In this section we'll create the simple empty application to work with the DataGrid. Use the following procedure.

Step 1: Open Visual Studio and Create the Web application.

Step 2: Select the empty project template.

Create Empty Project Template

Visual Studio automatically creates the application in the empty project template and adds references, files and folders to the project.

Working with DataGrid

Now to work with the DataGrid, we need bind it to the table of a database. Generate the database or you can also connect with the existing database. The DataGrid has a column Delete that triggers the DeleteCommand event handler. Use the following procedure to do that.

Step 1: Add a WebForm and using the following markup design the DataGrid:

<asp:DataGrid ID="DtaGridView" AutoGenerateColumns="False" runat="server" Height="221px" Width="81px"
OnItemDataBound="DtaGridView_ItemDataBound" DataSourceID="SqlDataSource2">
<Columns>
<asp:TemplateColumn HeaderText="ID">
<ItemTemplate>
<asp:Label ID="Lblid" runat="server" Text='<%#Bind("ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Name">
<ItemTemplate>
<asp:Label ID="Lblname" runat="server" Text='<%#Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Contact">
<ItemTemplate>
<asp:Label ID="Lblcontact" runat="server" Text='<%#Bind("Contact") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Email">
<ItemTemplate>
<asp:Label ID="Lblemail" runat="server" Text='<%#Bind("Email") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<asp:LinkButton ID="LbtnDelete" runat="server" Text="Delete" CausesValidation="false"
CommandName="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>

In the code above, I've bound the table to the DataGrid and there are four table fields added from the database. A linkbutton is also added as in a Template column named Delete button that has the CommandName as Delete.

Step 2: Select the properties of the DataGrid and make a double-click event for the ItemDataBound as in the following:

DataGrid Properties in ASP.NET

Step 3: Enter the following code in the ItemDataBound event of DataGrid:

protected void DtaGridView_ItemDataBound(object sender, DataGridItemEventArgs e)
{
LinkButton lb;
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
lb = (LinkButton)e.Item.Cells[0].FindControl("LbtnDelete");
lb.Attributes.Add("onclick", "return ConfirmDelete();");
}
}

In the code above, we are checking whether the row item is a type item or an alternating item. The DHTML OnClick event handler is used so that the client-side function named ConfirmDelete() is called.

Applying JavaScript

In this section, we'll add the JavaScript code to the web form so that the ConfirmDelete() is to be called when a user clicks on the Delete button. So just add the following markup in the <head> section:

<script type="text/javascript">
function ConfirmDelete() {
if(confirm("Are you sure to want to Delete?")==true)
return true;
else
return false;
}
</script>

The code above display the confirmation dialog box to the user with which the user can choose Ok to delete the data. If the user clicks on OK then the function returns true and the form is posted back as usual otherwise it returns false and the event is to be canceled and it will cancel the postback of the form also.

Run the Application

Now its time to run the application.

Step 1: Run the application and click on the Delete button of any row as in the following:

Deletion in Data Grid

Note: I've formatted my DataGrid.

Step 2: The Delete confirmation dialog opens and then you can now choose the Ok can Cancel.

Delete Confirmation Dialog in Data Grid

That's it for now.

Summary

This article described how to display a confirmation dialog while deleting any row from the DataGrid in the ASP.NET. Thanks for reading.