Click here to Skip to main content
11,477,007 members (75,988 online)
Click here to Skip to main content

Perform JavaScript Client Side Confirmation from a .NET DataGrid

, 23 Jun 2004 132.7K 1.4K 29
Rate this:
Please Sign up or sign in to vote.
Perform JavaScript client side confirmation from a .NET DataGrid.

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. Wink | ;) 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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Dolph
Web Developer DolphLarson.Com
United States United States
Dolph Larson is a Microsoft Certified Solution Developer (MCSD) for .Net, Microsoft Certified Application Developer (MCAD) and Microsoft Certified Database Administrator (MCDBA). He has over fourteen years of professional combined programming, database administration and information technology experience. He currently works as a senior developer for Omnicell and has worked as a senior web developer for eRealty.com. Dolph also managed the programming department for Health Help, Inc. and has seven years of managed health care experience and three years of energy experience.

Right now, I am developing Compact Framework applications for the PocketPC and Winodws Mobile. Go TO http://www.iPocketPC.net for FREE Pocket PC software!!!!!

Comments and Discussions

 
GeneralMy vote of 5 Pin
thomas4830-Jul-12 0:27
memberthomas4830-Jul-12 0:27 
General4 lines of code Pin
Anonymous24-Jul-05 4:16
sussAnonymous24-Jul-05 4:16 
GeneralRe: 4 lines of code Pin
Dolph Larson25-Jul-05 4:28
sussDolph Larson25-Jul-05 4:28 
Generaldatagrid Pin
golfaddict22-Mar-05 12:48
membergolfaddict22-Mar-05 12:48 
General2 Suggestions Pin
nemesisv22-Feb-05 23:08
membernemesisv22-Feb-05 23:08 
GeneralIn VB Pin
fukunaga1233-Jan-05 1:26
memberfukunaga1233-Jan-05 1:26 
GeneralRe: In VB Pin
Dolph Larson3-Jan-05 6:32
sussDolph Larson3-Jan-05 6:32 
GeneralRe: In VB Pin
fukunaga1233-Jan-05 19:12
memberfukunaga1233-Jan-05 19:12 
GeneralRe: In VB Pin
mshariq8-Mar-07 0:34
membermshariq8-Mar-07 0:34 
GeneralUsing ItemCreated Pin
Pisarevich10-Aug-04 9:44
memberPisarevich10-Aug-04 9:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 24 Jun 2004
Article Copyright 2004 by Dolph
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid