JavaScript Prompts for Buttons in Asp:DataGrid for Delete Column

原创 2004年09月29日 12:41:00
Aim : To JavaScript Prompts for Buttons in Asp::DataGrid for Delete Column



    Look at the following code below. It has Delete column, which we use to delete items in the grid. But delete is so careful action, we require the 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')");
}

<SCRIPT type=text/javascript><!-- google_ad_client = "pub-2092403601439285"; google_ad_width = 300; google_ad_height = 250; google_ad_format = "300x250_as"; google_ad_channel =""; google_ad_type = "text_image"; google_color_border = "2F74C1"; google_color_bg = "FFFFFF"; google_color_link = "0000FF"; google_color_url = "008000"; google_color_text = "000000"; //--></SCRIPT> <SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </SCRIPT> <IFRAME name=google_ads_frame marginWidth=0 marginHeight=0 src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-2092403601439285&amp;dt=1096487011669&amp;lmt=1096280860&amp;format=300x250_as&amp;output=html&amp;url=http%3A%2F%2Fwww.akashkava.com%2Farticles%2Fasp.net%2Fdatagrid%2Fjavascript-prompts.html&amp;color_bg=FFFFFF&amp;color_text=000000&amp;color_link=0000FF&amp;color_url=008000&amp;color_border=2F74C1&amp;ad_type=text_image&amp;ref=http%3A%2F%2Fwww.asp.net%2FModules%2FMoreArticles.aspx%3Ftabindex%3D0%26mid%3D64&amp;u_h=768&amp;u_w=1024&amp;u_ah=738&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=-420&amp;u_his=5&amp;u_java=true" frameBorder=0 width=300 scrolling=no height=250 allowTransparency><img height="1" width="1" border="0" src="http://pagead2.googlesyndication.com/pagead/imp.gif?client=ca-pub-2092403601439285&dt=1096487011669&lmt=1096280860&format=300x250_as&output=html&url=http%3A%2F%2Fwww.akashkava.com%2Farticles%2Fasp.net%2Fdatagrid%2Fjavascript-prompts.html&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=008000&color_border=2F74C1&ad_type=text_image&ref=http%3A%2F%2Fwww.asp.net%2FModules%2FMoreArticles.aspx%3Ftabindex%3D0%26mid%3D64&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=-420&u_his=5&u_java=true&event=noiframe" /></IFRAME>



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 rows in DataGrid. Just to add alert, I dont recommend to waste so much of cpu cycles of Server.

Why dont 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 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 guide and search all form elements and attach event of onclick in client browser and making server free from any code execution.

Just add following script and see replace TestGrid with name of Grid. This prompts user for the 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 comparsion statements for multiple grids on the page.



Copyrights:
The article is property of NeuroSpeech and its free, everyone has right to distribute this article without modifying it. Every distribution of this article must contain this copyright notice.

To JavaScript Prompts for Buttons in Asp::DataGrid for Delete Column(ZT)

look at the following code below. it has delete column, which we use to delete items in the grid. bu...
  • zhiguo2010
  • zhiguo2010
  • 2010年07月18日 00:54
  • 356

To JavaScript Prompts for Buttons in Asp::DataGrid for Delete Column(ZT)

Look at the following code below. It has Delete column, which we use to delete items in the grid. Bu...
  • Jinglecat
  • Jinglecat
  • 2005年03月29日 01:34
  • 1264

Asp.Net中DataGrid的模版列(TemplateColumn)内容控制简单方法。

最近写了几个asp.net的项目。其中,Asp.Net的控件DataGrid使用的最多了,前几天需要一个功能,我研究了很长时间,发现一个方法,应该是最简单的实现。现表述如下。 DataGrid的htm...
  • TomMax
  • TomMax
  • 2004年12月16日 19:40
  • 3071

Web页中如何隐藏DataGrid中的一列

to: Inyoureyes(最深的蓝) 通过各位的指点,DataGrid必须加上AutoGenerateColumns=false属性才能隐藏列     AutoGenerateColumns="F...
  • hs123
  • hs123
  • 2007年07月11日 21:29
  • 1953

通过Formatter格式化器格式化DataGrid组建里面的Column

DataGrid组建正常传值应该是通过DataField来制定ArrayCollection里面的列名,也就是一个字符串,之前想过通过DataField=”formatter.formate(‘列名’...
  • li_yunpeng
  • li_yunpeng
  • 2009年05月21日 09:27
  • 1282

easyUI中datagrid的column属性的介绍

1,column中formatter函数中参数的含义 示例: val:kk2(和field属性对应) row:Object {id: "", memberId: "", loginname: "...
  • u012031380
  • u012031380
  • 2016年12月31日 16:30
  • 1129

为DataGrid添加自定义DataGridColumn类的例子

可能大家在使用DataGrid编辑数据的时候会觉得要点击最后的编辑列的按钮来修改数据不是很方便,在今天的例子中给出一种比较方便的操作方法:要修改数据点击这一行-》鼠标放在哪个文本框就会选中哪个文本框的...
  • jelink
  • jelink
  • 2006年08月25日 15:49
  • 1100

ASP.NET中使用DataGrid显示数据

 版本:.NET Framework 1.1 DataGrid是ASP.NET中用于显示table类型数据的一个功能强大的控件,使用DataGrid控件可以轻松实现数据的分页显示及修改,并且拥有多种显...
  • colin915gao
  • colin915gao
  • 2007年04月22日 14:41
  • 2538

通过绑定修改DataGrid的Column的Visibility

 问题:因为DataGridColumns不是可视树的一部分,他们不能使用datagrid的datacontext。 解决方法1:代理类 public class Binding...
  • xiudou_123
  • xiudou_123
  • 2017年05月08日 08:46
  • 377

asp.net总结之比较DataGrid和GridView

最开始看asp.net视频的时候,由于各种原因不能联网,视频中讲到的DataGrid没有在工具箱中找到,也没在意,因为我添加GridView后,发现都能实现.所以一直认为是因为vs版本的原因只是名字不...
  • jly4758
  • jly4758
  • 2013年11月27日 16:32
  • 8450
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript Prompts for Buttons in Asp:DataGrid for Delete Column
举报原因:
原因补充:

(最多只允许输入30个字)