Click here to Skip to main content
12,556,726 members (80,751 online)
Click here to Skip to main content
Add your own
alternative version


47 bookmarked

JavaScript Prompts for Buttons in ASP:DataGrid for Delete Column

, 14 Aug 2004
Rate this:
Please Sign up or sign in to vote.
Adding JavaScript prompt for Delete Command in DataGrid (easy undocumented way).


To add JavaScript prompts for Buttons in ASP::DataGrid for Delete column:

Look at the following code. It has Delete column, which we use to delete items in the grid. But delete is a careful action, we require JavaScript alert to confirm the delete operation:

<asp:DataGrid id="TestGrid" 
    style="Z-INDEX: 102; LEFT: 16px; POSITION: absolute; TOP: 40px" 
    runat="server" Width="408px" Height="160px" Font-Size="X-Small" 
    BorderColor="White" BorderStyle="Ridge" CellSpacing="1" BorderWidth="2px" 
    BackColor="White" CellPadding="3" GridLines="None" AutoGenerateColumns="False">

   <SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#9471DE">
   <ItemStyle ForeColor="Black" BackColor="#DEDFDE">
   <HeaderStyle Font-Bold="True" ForeColor="#E7E7FF" BackColor="#4A3C8C">
   <FooterStyle ForeColor="Black" BackColor="#C6C3C6">
      <asp:BoundColumn DataField="ID" 
      <asp:BoundColumn DataField="Name" 
      <asp:BoundColumn DataField="Quantity" 
      <asp:BoundColumn DataField="Price" 
      <asp:ButtonColumn Text="Delete" ButtonType="PushButton" 
   <PagerStyle HorizontalAlign="Right" ForeColor="Black" BackColor="#C6C3C6">


To add JavaScript prompt command on click of Delete button, we can not directly modify the DataGrid tag. And DataGrid does not provide any facility to add alert code. However, there is way to add an attribute to the controls. This way is very costly for server as far as performance is concerned. The old method is as shown below.

Old Slow Method (Not Recommended):

private void InitializeComponent() 
   TestGrid.ItemCreated += new DataGridItemEventHandler

void TestGrid_ItemCreated(object sender, DataGridItemEventArgs e) 
   Button btn = (Button)e.Item.Cells[4].Controls[0]; 
     "return confirm('are you sure you want to delete this')"); 

The above code is recommended by various ASP.NET books, which is very slow on performance since server delivers 100s of aspx files, and executing this ItemCreated code executes for every row in a DataGrid. Just to add alert, I don't recommend wasting so much of CPU cycles of the server.

Why don't we apply some shortcut JavaScript code by having a bit of inside knowledge of how DataGrid items are rendered.

DataGrid items are rendered with Table tag in HTML. You can see the source of the output in the browser. And Delete button is replaced by INPUT tag with type submit and it contains name as shown below.

 <td><input type="submit" name="TestGrid:_ctl2:_ctl0" value="Delete" /></td>

As you can see above, the name attribute of button starts with "TestGrid:". So we can use this as a guide, and search all form elements and attach event of onclick in client browser, making the server free from any code execution.

Just add the following script and replace TestGrid with name of your grid. This prompts the user with an alert, and if user cancels nothing happens.


<!-- Client Side JavaScript -->
<script language="javascript">

   function ondeleteclick()
        return confirm("Are you sure you want to delete this?")
       var x = document.all.item(i)
       if(x!=null && !=null &&"TestGrid")==0)
                x.onclick = ondeleteclick

You can add more if comparison statements for multiple grids on the page.

More About Akash Kava, here.


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


About the Author

Akash Kava
Web Developer
United States United States
Programmer with WILL

You may also be interested in...


Comments and Discussions

Questionadd confirm message for Delete Button in data grid using Jquery Pin
leylaazari13-Aug-13 21:40
memberleylaazari13-Aug-13 21:40 
Generalmessagebox to delete DataGrid Pin
jignasapratik10-Oct-07 0:30
memberjignasapratik10-Oct-07 0:30 
Generalshowing the autogenerate button for particular rows Pin
tauras815-Jun-07 0:16
membertauras815-Jun-07 0:16 
Generaleasier solution Pin
vladab19-Mar-07 4:58
membervladab19-Mar-07 4:58 
AnswerRe: easier solution Pin
Akash Kava19-Mar-07 9:12
memberAkash Kava19-Mar-07 9:12 
QuestionHow about doing this with Hyperlink columns? Pin
david402123-Jan-06 3:44
memberdavid402123-Jan-06 3:44 
GeneralMissing pieces Pin
goatmonkey18-Jan-06 5:26
membergoatmonkey18-Jan-06 5:26 
GeneralSpecified argument was out of the range of valid values. Parameter name: index Pin
rupeshrajagopalan28-Oct-05 19:21
memberrupeshrajagopalan28-Oct-05 19:21 
GeneralRe: Specified argument was out of the range of valid values. Parameter name: index Pin
m7mdshams19-Jun-06 1:59
memberm7mdshams19-Jun-06 1:59 
GeneralLink Buttons Pin
thx66614-Sep-05 17:18
memberthx66614-Sep-05 17:18 
GeneralJonathan Craig :):laugh: Pin
lonereck69-Aug-05 1:29
memberlonereck69-Aug-05 1:29 
GeneralAll good solutions. One more... Pin
Jonathan Craig8-Jul-05 4:36
memberJonathan Craig8-Jul-05 4:36 
QuestionWhere to add the script? Pin
Pantherot7-Jul-05 9:22
memberPantherot7-Jul-05 9:22 
Generalunable to see grid Pin
chandani18-May-05 0:31
memberchandani18-May-05 0:31 
GeneralPerformance Pin
djsdjsdjsdjs15-Sep-04 2:28
memberdjsdjsdjsdjs15-Sep-04 2:28 
GeneralRe: Performance Pin
Akash Kava15-Sep-04 3:02
memberAkash Kava15-Sep-04 3:02 
GeneralRe: Performance Pin
djsdjsdjsdjs16-Sep-04 2:55
memberdjsdjsdjsdjs16-Sep-04 2:55 
GeneralRe: Performance Pin
Akash Kava16-Sep-04 3:01
memberAkash Kava16-Sep-04 3:01 
GeneralRe: Performance Pin
horhen17-Jan-07 17:27
memberhorhen17-Jan-07 17:27 
GeneralUse OnPreRender instead on the Button Pin
bpmerkel18-Aug-04 2:03
memberbpmerkel18-Aug-04 2:03 
GeneralRe: Use OnPreRender instead on the Button Pin
Akash Kava18-Aug-04 4:03
memberAkash Kava18-Aug-04 4:03 
GeneralRe: Use OnPreRender instead on the Button Pin
Reiss6-Sep-04 23:40
memberReiss6-Sep-04 23:40 
GeneralGreat Solution!! ....Re: Use OnPreRender instead on the Button Pin
Pinhead_Me1-Jun-05 7:00
memberPinhead_Me1-Jun-05 7:00 
GeneralRe: Great Solution!! ....Re: Use OnPreRender instead on the Button Pin
Anonymous15-Jun-05 2:37
sussAnonymous15-Jun-05 2:37 
GeneralRe: Great Solution!! ....Re: Use OnPreRender instead on the Button Pin
Anonymous15-Jun-05 7:32
sussAnonymous15-Jun-05 7:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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
Web02 | 2.8.161026.1 | Last Updated 15 Aug 2004
Article Copyright 2004 by Akash Kava
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid