Learn ASP.NET Web Forms and ASP.NET MVC. Intensive courses for professional developers. Conducted by Bipin Joshi in Thane. Read more details here.
<%@ Page %>

Confirming Deletes in DataGrid

Introduction

ASP.NET DataGrid allows you to provide select, edit, cancel and delete buttons. These buttons trigger corresponding events on the server side. These buttons are nothing but button controls (link button or push button) with CommandName property set to select, update, cancel or delete. In this article we will focus on delete command alone. Many times we need to get confirmation from the user about deletion of the record. DataGrid do not provide any inbuilt way to do that. We will see how to prompt the user to confirm the delete using JavaScript.

The web form

We will create a simple web form that contains a DataGrid which in turn is bound to the Employee table from Northwind database. The grid has a column Delete that triggers the DeleteCommand event handler. When the user clicks on the Delete button he will be prompted for confirmation. If he clicks on ok the form is posted as usual else the form will not be posted. The task of prompting the user is carried out via client side JavaScript.

The Delete button

If you are using VS.NET you can easily add Delete button using the property builder. Note however that this adds a ButtonColumn to the grid. In order to add javascript to a client side event you have to use Attributes collection of the control. The button column do dot have an ID attribute and hence can not be used for this purpose. Hence, we need to use template column as shown below.
<asp:DataGrid id="DataGrid1" runat="server">
<Columns>
<asp:TemplateColumn>
	<ItemTemplate>
<asp:LinkButton id="cmdDel" 
runat="server" Text="Delete" 
CommandName="Delete" CausesValidation="false">
</asp:LinkButton>
	</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
Next we need to add the javascript to each and every Delete link button (one per row). We will do that in ItemDataBound event handler.
Private Sub DataGrid1_ItemDataBound
(ByVal sender As Object, ByVal e As DataGridItemEventArgs) 
Handles DataGrid1.ItemDataBound
   Dim l As LinkButton
   If e.Item.ItemType = ListItemType.Item Or 
   e.Item.ItemType = ListItemType.AlternatingItem Then
   l = CType(e.Item.Cells(0).FindControl("cmdDel"), LinkButton)
   l.Attributes.Add("onclick", "return getconfirm();")
   End If
End Sub
Here we check whether the item (row) is of type Item or AlternatingItem. We then add DHTML OnClick event handler that calls a client side function getconfirm().

The Confirmation JavaScript function

The getconfirm function looks like this:
function getconfirm() 
{ 
if (confirm("Do you want to delete record?")==true) 
return true; 
else 
return false; 
}
This function displays a javascript confirmation dialog to the user. If user clicks on Ok the function returns true and the form is posted back as usual. If user clicks on cancel it returns false indicating event cancellation. This will cancel the postback of the form.

I hope it was interesting. See you soon.


Bipin Joshi is the founder of BinaryIntellect Consulting and conducts professional training programs on ASP.NET in Thane. He is a published author and has authored or co-authored books for Apress and Wrox press. To know more about him click here. To know more about his training programs go here.

Get connected : Twitter  Facebook  Google+  LinkedIn


Tags : ASP.NET Server Controls JavaScript Data Controls
Posted On : 22 Jun 2002
Current Rating :
Rate this article :


This page is protected by copyright laws. Copying in any form is strictly prohibited. For Copyright notice and legal terms of use click here.

Protected by Copyscape