In this section, we'll examine how to confirm multiple deletes when we submit our form. Below in Figure 3 you can now see the alert confirmation after selecting a couple of items, and then submitting the form by press the "Delete Items" button. The alert takes place at any time you submit the form (as long as you have more than one checkbox selected).
Figure 3
Note that this confirmation will alert with all checkboxes selected or a just a few as shown. Pressing the Delete Items button with none selected will not prompt any alert. Here now is how we determine what checkboxes are actually checked.
The first thing we did was set up our Delete Button at the end of our DataGrid; just a regular asp server button. We also wired a server-side event to it - DeleteStore - that, when confirmed, will delete the records:
<asp:Button Text="Delete Items" OnClick="DeleteStore" ID="Confirm" runat="server" />
But how does that pop-up alert confirmation appear? Well, that's the cool thing. We get this by adding the code listed below to our Button server control as soon as the page loads, in our Page_Load method, by locating it using the FindControl method and then adding to the button attributes, like so:
WebControl button = (WebControl) Page.FindControl("Confirm");
button.Attributes.Add ("onclick", "return confirmDelete (this.form);");
So, the second the page loads, it attached the Javascript handler to this button, and if you examine the HTML source code, the button afterwords, actually looks like this:
<input type="submit" name="Confirm" value="Delete Items" id="Confirm" onclick="return confirmDelete (this.form);" />
Cool huh? Now, the second this button is pressed, is when it can now trigger the client side JavaScript function below:
function confirmDelete (frm)
{
// loop through all elements
for (i=0; i<frm.length; i++)
{
// Look for our checkboxes only
if (frm.elements[i].name.indexOf("DeleteThis") !=-1)
{
// If any are checked then confirm alert, otherwise nothing happens
if(frm.elements[i].checked)
{
return confirm ('Are you sure you want to delete your selection(s)?')
}
}
}
}
Ok, what happening here? Well, the JS function above is, for all intents and purposes, not that different from the previous JavaScript function - select_deselectAll. Except, instead of determining if the main "select all" checkbox is checked, it actually checks to see whether if any of the DataGrid row checkboxes are checked. If so, it'll then, and only then, alert you with a confirmation to proceed onto either to delete or cancel.
Comments