Introduction
This article describes adding a confirmation message to your server controls (even those inside your DataGrid
) with one line of code (if that)!
Background
I participate quite a bit on Experts-Exchange (ASP.NET), and always come across the question of how to attach a confirmation message to a Delete button, such as "Are you sure you want to delete this item?". While this is not a difficult task, it is a somewhat mundane one, and having to add an OnClick
event to each Button
in a DataGrid
gets to be a bit much. Instead, I decided I wanted JavaScript to work for me and so it shall...
Using the code
The first step is create the JavaScript method that will handle all of this.
function confirmDelete(e) {
var targ;
if (!e) var e = window.event;
targ = (e.target) ? e.target : e.srcElement;
if (targ.nodeType == 3) targ = targ.parentNode;
if (targ.id.toLowerCase().indexOf("delete") >= 0) {
return confirm("Do you want to delete this item?");
}
routeEvent(e);
}
document.onclick = confirmDelete;
The confirmDelete
function is executed each time a click event occurs on the page. We then use some fun logic to get by the discrepancies in browsers to find the element that was clicked on. If that element has the word "delete" in it, then we launch our confirmation box with the message we see above.
The next step is to create a server control that gets affected by the logic above.
<asp:Button RunAt="server" ID="MyDeleteButton1" Text="Delete Record" />
This delete button will pop-up the confirmation box simply because we have included the word "Delete" in the ID. No code was required, amazing! We're done.
Now, imagine this with your DataGrid
/GridView
control; no need to attach that OnClick
attribute in your ItemDataBound
event, or for ASP.NET 2.0, the OnClientClick
. We just throw the word "Delete" in the ID.
<!---->
<asp:DataGrid RunAt="server" ID="GridView1">
<Columns>
... your other columns ...
<asp:TemplateColumn>
<ItemTemplate>
<asp:LinkButton RunAt="server"
ID="DeleteMe" Text="Remove Row" />
</ItemTemplate>s
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<!---->
<asp:GridView RunAt="server" ID="GridView1">
<Columns>
... your other fields ...
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton RunAt="server"
ID="DeleteMe" Text="Remove Row" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You could place the confirmDelete
function at the top of each page that you want to have this functionality.
<script type="text/javascript">
... confirmDelete function ...
</script>
Or even better, would be to place it in your JavaScript external script file. Then, you could throw it in your Master Page setup and have this feature on every page.
Another Method to Consider
If we didn't want to base everything on the ID of the server control, we could customize it to be assigned to the CSS class
attribute. Using the code below, we can retrieve all elements that have a specified className
.
function getElementsByClassName(ClassName,tagName,parentElement){
var elements=new Array();
var d=parentElement ? parentElement : document;
var allElements;
if(tagName)
allElements=d.all && d.all.tags(tagName)
|| d.getElementsByTagName && d.getElementsByTagName(tagName);
else allElements=d.all || d.getElementsByTagName("*");
for(var i=0,len=allElements.length; i<len; i++)
if(allElements[i].className.indexOf(ClassName)>=0)
elements[elements.length]=allElements[i];
return elements;
}
function assignConfirm(className) {
var elements = getElementsByClassName(className);
if (elements && elements.length > 0) {
for (i=0; i<elements.length; i++)
elements[i].onclick = confirmDelete;
}
}
function confirmDelete() {
return confirm("Are you sure you want to delete this item?");
}
Then assignConfirm
function will get executed on the page load and assign a new confirmDelete
function (a much more simplified one) to the onClick
event for each matching element (including server controls in a DataGrid
). The only thing left to do is call it.
<body onload="assignConfirm('delete');">
Finally, an example server control that utilizes this alternative method...
<asp:LinkButton RunAt="server" ID="lbRemove" CssClass="delete" Text="Remove Item" />
That's it. Now we're able to assign the same functionality as before, but using CSS classes to control which controls get this feature. It'd be very easy to tweak this method to toggle multiple messages by simply changing the CssClass
name and assigning a separate confirmDelete
function.