After hours of searching thru pages and pages of code I could not find a single example of code that did exactly what I wanted. Here is the scenario:
I want a GridView in Asp.net to display a image that will fire some Javascript confirming that I want to delete the row. If I press OK the a Asp.net function will fire that will delete the user. If I click cancel nothing will happen.
So for everybody looking for this code I am going to show you EXACTLY how to do it step by step:
Setting up the GridView Control
1. Create a new web site in Asp.net(or use a existing one) and drop in your Gridview Control
2. Click on the Task icon and set up your datasource( in this example I am using the Northwind Database and accessing the customers table)
3. Add a Command field. I moved mine to the top.
4. Set the "Show Delete Button" to true
5. Press OK ( you can also set Show CancelButton to True) Now we need to setup a bounding event.
6.Right Click on the GridView Control and choose Properties
7. Click on the Events button(the lighting bolt) and double click on the "RowDataBound" event
Now we are set up for code
Lets overview what we want. Want some Javascript to be called with a OK and Cancel button and we want some sort of image representing the delete button. First we are going to find the delete control, and second we are going to cast it as a LinkButton(I will explain why shortly) and third we are going to add some JavaScript to confirm that we want to delete a customer:
1. You should now be in the Code behind page and at the Function:protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) if not press F7 and find the function
2. First we find the control, then we cast it to a link button and then we use the "OnClientClick" property of the link button to set the JavaScript. Finally we use the "Text" property to add a image to the link button: Here is the code
if
(e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton deleteButton = (LinkButton)e.Row.Cells[0].Controls[2]; //<-- we are casting control 2 my delete control link to a LinkButton
deleteButton.OnClientClick = return confirm('Delete this Record (" + ((DataControlFieldCell)e.Row.Cells[2]).Text + ")?')"; // <-- here we add the javascript on the onclick eventdeleteButton.Text = "<img src=\"icon_delete.gif\"/>"; //<-- finally we add the image to the text element
}
3. If we compile and run the code and look at the source we have the basis of what we want:
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tr>
<td><a href="doPostBack('GridView1','Edit$0')">Edit</a> <a onclick="return confirm('Delete this Record (Alfreds Futterkiste)?');" href="doPostBack('GridView1','Delete$0')"><img src="icon_delete.gif"/></a></td><td>ALFKI</td><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Sales Representative</td><td>Obere Str. 57</td><td>Berlin</td><td> </td><td>12209</td><td>Germany</td><td>030-0074321</td><td>030-0076545</td>
</tr>
In the browser it looks like this:
We now have a image button that pulls this up when clicked
Updating the database
We have a Confirm delete pop up but now we need to have a way to update the database when the user presses "OK" and do nothing if the user presses "Cancel
1. Let go back to the Gridview and right click on it and select properties and go to the event tab again
2.. Now Double click on the "RowCommand" Event
3. Now we need to find the row that was clicked and what command was called (NOTE: Remember I have a Cancel button as well as a delete button so it is useful to know what command was pressed) Here is the simple code:
protected void GridView1_RowCommand1(object sender, GridViewCommandEventArgs e)
{
// get the row index stored in the CommandArgument property
int index = Convert.ToInt32(e.CommandArgument);
// find the command to execute
string command = e.CommandName;
if (command == "Delete")
{
//call delete function
}
}
4. Now you can write your delete code
Now you might ask "What happens if cancel is pressed?" remember we have a return on the Javascript so if it returns "false" or cancel the RowCommand Event will never fire.
I hope this post is helpful, please leave any comment or questions.
Update: I added the code in the downloads page if you want to review the project. Get if from here
