Perform JavaScript Client Side Confirmation from a .NET DataGrid

• Download source files - 14.9 Kb

Introduction

Has there ever been a time when you wanted a popup message box to confirm before actually performing some action in a .NET DataGrid?

I had a DataGrid full of employees, with a Delete button and a whole lot of “Click-Happy” users. I bet you know the type. ;) I wanted a confirmation message box to appear when the Delete button was pressed. If they press “Yes”, then I delete the employee. If they press “Cancel”, then don’t perform the delete method.

Please note: There are plenty of ways to handle your JavaScript, this example shows how to put the client side confirmation all in the code-behind. Once you grasp the concept, you can then eliminate some of the steps that I've shown.

Here are the basic steps to take:

Step 1)

Add a DataGrid to your aspx page:

<asp:datagrid id="myDataGrid" runat="server" width="512px">
  <columns>
     <asp:buttoncolumn text="Delete" buttontype="PushButton" 
         headertext="Delete Me" 
         commandname="Delete"></asp:buttoncolumn>
  </columns>
</asp:datagrid>

Step 2)

Create your JavaScript confirmation message box. I did it in the code behind, but you can place your JavaScript in the aspx page if you like. I normally create a method like:

/// <summary>
/// This method setups the java client script confirmation. Note. You 
/// can put the javascript in the aspx page. 
/// </summary>
private void setupClientScript()
{
     string js = @"
       <script language=JavaScript>
          function ConfirmDeletion()
          {
              return confirm('Are you sure you wish to delete this record?');
          }
       </script>"; 
     //Register the script
     if (!IsClientScriptBlockRegistered("ConfirmDeletion"))
     {
          RegisterClientScriptBlock( "ConfirmDeletion", js );
     }
}

Step 3)

Call the method you just created to get it registered for the page. I usually do it in the Page_Load method.

setupClientScript();

Step 4)

In the DataGrid onItemDataBound method, add the following:

if ( e.Item.ItemType == ListItemType.AlternatingItem 
    || e.Item.ItemType == ListItemType.Item 
    || e.Item.ItemType == ListItemType.SelectedItem )
{
     e.Item.Cells[0].Attributes.Add( "onClick", "return ConfirmDeletion();" );
}

* Note the magic number [0] should be the column that the button is located.

Step 5)

Call your delete method. In your DataGrid Command method, add the following:

RemoveMe( int.Parse( e.Item.Cells[1].Text.ToString() ) );

* Note the magic number [1] is the column of my key value. I pass my key to the method RemoveMe and perform my delete action there.

Download and look at the source code for a fully functional sample.