 |
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 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&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" 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.