Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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">
   </SelectedItemStyle>
 
   <ItemStyle ForeColor="Black" BackColor="#DEDFDE">
   </ItemStyle>
 
   <HeaderStyle Font-Bold="True" ForeColor="#E7E7FF" BackColor="#4A3C8C">
   </HeaderStyle>
 
   <FooterStyle ForeColor="Black" BackColor="#C6C3C6">
   </FooterStyle>
 
   <Columns>
      <asp:BoundColumn DataField="ID" 
            HeaderText="Number"></asp:BoundColumn>
      <asp:BoundColumn DataField="Name" 
            HeaderText="Name"></asp:BoundColumn>
      <asp:BoundColumn DataField="Quantity" 
            HeaderText="Qty"></asp:BoundColumn>
      <asp:BoundColumn DataField="Price" 
            HeaderText="Price"></asp:BoundColumn>
      <asp:ButtonColumn Text="Delete" ButtonType="PushButton" 
            CommandName="Delete"></asp:ButtonColumn>
   </Columns>
 
   <PagerStyle HorizontalAlign="Right" ForeColor="Black" BackColor="#C6C3C6">
   </PagerStyle>

</asp:DataGrid>

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
                                  (TestGrid_ItemCreated); 
}

void TestGrid_ItemCreated(object sender, DataGridItemEventArgs e) 
{
   Button btn = (Button)e.Item.Cells[4].Controls[0]; 
   btn.Attributes.Add("onclick",
     "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.

Recommended:

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

   function ondeleteclick()
   {
        return confirm("Are you sure you want to delete this?")
   }
 
   for(i=0;i<document.all.length;i++)
   {
       var x = document.all.item(i)
       if(x!=null && x.name !=null &&  x.name.indexOf("TestGrid")==0)
       {
           if(x.value=="Delete")
                x.onclick = ondeleteclick
           continue;
      }
 }
//-->
</script>

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

More About Akash Kava, here.

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

Akash Kava
Web Developer
United States United States
Programmer with WILL

Comments and Discussions

 
Questionadd confirm message for Delete Button in data grid using Jquery Pinmemberleylaazari13-Aug-13 22:40 
Generalmessagebox to delete DataGrid Pinmemberjignasapratik10-Oct-07 1:30 
Generalshowing the autogenerate button for particular rows Pinmembertauras815-Jun-07 1:16 
Generaleasier solution Pinmembervladab19-Mar-07 5:58 
AnswerRe: easier solution PinmemberAkash Kava19-Mar-07 10:12 
QuestionHow about doing this with Hyperlink columns? Pinmemberdavid402123-Jan-06 4:44 
GeneralMissing pieces Pinmembergoatmonkey18-Jan-06 6:26 
GeneralSpecified argument was out of the range of valid values. Parameter name: index Pinmemberrupeshrajagopalan28-Oct-05 20:21 
GeneralRe: Specified argument was out of the range of valid values. Parameter name: index Pinmemberm7mdshams19-Jun-06 2:59 
GeneralLink Buttons Pinmemberthx66614-Sep-05 18:18 
GeneralJonathan Craig :):laugh: Pinmemberlonereck69-Aug-05 2:29 
GeneralAll good solutions. One more... PinmemberJonathan Craig8-Jul-05 5:36 
QuestionWhere to add the script? PinmemberPantherot7-Jul-05 10:22 
Generalunable to see grid Pinmemberchandani18-May-05 1:31 
GeneralPerformance Pinmemberdjsdjsdjsdjs15-Sep-04 3:28 
GeneralRe: Performance PinmemberAkash Kava15-Sep-04 4:02 
GeneralRe: Performance Pinmemberdjsdjsdjsdjs16-Sep-04 3:55 
GeneralRe: Performance PinmemberAkash Kava16-Sep-04 4:01 
GeneralRe: Performance Pinmemberhorhen17-Jan-07 18:27 
GeneralUse OnPreRender instead on the Button Pinmemberbpmerkel18-Aug-04 3:03 
GeneralRe: Use OnPreRender instead on the Button PinmemberAkash Kava18-Aug-04 5:03 
GeneralRe: Use OnPreRender instead on the Button PinmemberReiss7-Sep-04 0:40 
GeneralGreat Solution!! ....Re: Use OnPreRender instead on the Button PinmemberPinhead_Me1-Jun-05 8:00 
GeneralRe: Great Solution!! ....Re: Use OnPreRender instead on the Button PinsussAnonymous15-Jun-05 3:37 
GeneralRe: Great Solution!! ....Re: Use OnPreRender instead on the Button PinsussAnonymous15-Jun-05 8:32 
GeneralRe: Use OnPreRender instead on the Button Pinmemberjerryoz23-Apr-06 13:11 

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
Web02 | 2.8.1411023.1 | Last Updated 15 Aug 2004
Article Copyright 2004 by Akash Kava
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid