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.
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.