Online courses in ASP.NET MVC / Core, jQuery, Angular, and Design Patterns conducted by Bipin Joshi. Read more...
Learn ASP.NET MVC / Core, jQuery, Angular, and Design Patterns through our online training programs. Courses conducted by Bipin Joshi on weekends. 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 a software consultant, trainer, author and a yogi having 21+ years of experience in software development. He conducts online courses in ASP.NET MVC / Core, jQuery, AngularJS, and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced Yoga way of life he also teaches Ajapa Meditation to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 22 Jun 2002



Tags : ASP.NET Server Controls JavaScript Data Controls