Introduction:
Everyone likes a confirmation that
let them know that what record is being deleted. In this article I will show you
how you can prompt confirmation boxes when you delete a record from the
GridView control.
Implementing the
Confirmation Feature:
The first thing that you need to
do is to attach the JavaScript confirmation code to the delete column of the
GridView control. This can be done in the Row_DataBound event of the
GridView control. Row_DataBound event is fired whenever the row is
attached to the GridView. Hence this is fired when the GridView is
building for the first time or even when the page is reloaded.
Let's see the HTML part of the
GridView code:
|
<asp:GridView
DataKeyNames="CategoryID"
ID="GridView1"
runat="server"
AutoGenerateColumns="False"
OnRowCommand="GridView1_RowCommand"
OnRowDataBound="GridView1_RowDataBound"
OnRowDeleted="GridView1_RowDeleted"
OnRowDeleting="GridView1_RowDeleting">
<Columns>
<asp:BoundField
DataField="CategoryID"
HeaderText="CategoryID"
/>
<asp:BoundField
DataField="CategoryName"
HeaderText="CategoryName"
/>
<asp:TemplateField
HeaderText="Select">
<ItemTemplate>
<asp:LinkButton
ID="LinkButton1"
CommandArgument='<%#
Eval("CategoryID") %>'
CommandName="Delete"
runat="server">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
|
As you can see from the above code that I have
three columns in the GridView. Columns CategoryID and
CategoryName are the bound columns and the column Delete is a template
column. The command argument is set as the CategoryID which means that
whenever the LinkButton is clicked it will pass CategoryID as an
argument. The CommandName is set to "Delete".
| The CommandName
property is very important. If you have a LinkButton or a Button control
inside the template column of the GridView control and the CommandName
property is set to "Delete" then apart from
GridView_RowCommand event the GridView_Row_Deleting event is also fired.
|
Now, let's see the GridView_RowBound
event where I attach the JavaScript code to every LinkButton.
|
protected
void
GridView1_RowDataBound(object
sender, GridViewRowEventArgs
e) {
if
(e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton
l = (LinkButton)e.Row.FindControl("LinkButton1");
l.Attributes.Add("onclick",
"javascript:return "
+
"confirm('Are
you sure you want to delete this record "
+
DataBinder.Eval(e.Row.DataItem,
"CategoryID") +
"')");
}
} |
In the above code I checked that whether the
GridView row is a DataRow and if it was I simply attached some
JavaScript code using the Attributes.Add method.
Catching the Primary Key of the Clicked
Row:
Now, that you have successfully attached
JavaScript code to the GridView control all that is left if to catch the
primary key of the row which you have clicked so that you can perform further
operations (like deleting the row). Remember what I said about a LinkButton or a
Button control with CommandName set to "Delete". If you don't read the
text in the box again.
| The CommandName
property is very important. If you have a LinkButton or a Button control
inside the template column of the GridView control and the CommandName
property is set to "Delete" then apart from
GridView_RowCommand event the GridView_Row_Deleting event is also fired.
|
Now, since our LinkButton commandName is
set to Delete that means we have two choices of getting the primary key from the
Gridview. We can do this in the RowCommand event or we can do this
in the Row_Deleting event. I am going to show you both of them.
Catching the primary key in the
RowCommand event:
This is pretty simple all you need to do is to
get the value from the CommandArgument property which you have already
set to the CategoryID.
|
protected
void
GridView1_RowCommand(object
sender, GridViewCommandEventArgs
e) {
if
(e.CommandName == "Delete")
{
int
categoryID = Convert.ToInt32(e.CommandArgument);
// get the categoryID of the clicked row
// Delete the
record
DeleteRecordByID(categoryID); // Implement this
on your own :)
}
}
|
e.CommandArgument returns object so you need to
convert it to integer as I have done above.
Catching the primary key in the
Row_Deleting event:
Let's see how we can catch the primary key of
the clicked row in the Row_Deleting event.
| <asp:GridView
DataKeyNames="CategoryID"
ID="GridView1"
runat="server"
AutoGenerateColumns="False"
OnRowCommand="GridView1_RowCommand"
OnRowDataBound="GridView1_RowDataBound"
OnRowDeleted="GridView1_RowDeleted"
OnRowDeleting="GridView1_RowDeleting">
protected
void
GridView1_RowDeleting(object
sender, GridViewDeleteEventArgs
e)
{
int
categoryID = (int)
GridView1.DataKeys[e.RowIndex].Value;
DeleteRecordByID(categoryID);
} |
In the above technique you must set the
DataKeyNames property of the GridView to "CategoryID".
GridView1.DataKeys[e.RowIndex].Value preperty gets the CategoryID out of the
row which is clicked.
Using the ClientOnClick attribute:
This method was submitted by AM Brain.
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="LinkBtnDelete" runat="server"
OnClientClick="return confirm('OK to Delete?');"
CommandName="Delete">Delete
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
I have attached the source code files with this
project so please free to download them.
I hope you liked this article, happy coding!
| If you are one of those
thousands of people who are benefited from GridViewGuy
articles and want to show your love then you will be interested in giving
a donation.
Make a Donation
Once, again thank you very much and
remember its because of you FINE people that this website
is up and running. |
|
Export Button is a custom control that let's you export your
DataGrid or TextBox data to several different formats. The
control is extremely easy to use and also exposes design time features. In
this article I will discuss some of the features of the Export Button and
how it benefits the developer.
BUY IT
NOW |