German Wear Discount Shop - Click Here Write for Dotnet-friends and earn for your each submission [Dot]Net-Friends
Skip Navigation Links
Home
Latest
Fast Code
Articles
Tutorials
Online Resources
Forums
Login   | Hi, Guest


Client side Delete Confirmation in a Gridview using JavaScript

Written by omerkamal on Jul 23, 2007
Create a Client side Delete Confirmation in your Gridview using ASP .NET

Explanation:

The Gridview delete Command fires Automatically as soon as DELETE Button is clicked. The GridView do a Postback and it deletes your said Record. There could be situation when your data is very sensitive and  you want to prevent the accidental deletions. in this case it's  a good practice to provide the end user with a confirmation of some sort, verifying that they do, indeed, want to delete the record before doing so. 

 To help One common confirmation technique is to use a client-side confirm messagebox. The confirm messagebox is one that is displayed with an OK and Cancel button that causes the form submission to be short circuited if the user clicks Cancel.

The ASP.NET 2.0 Button, LinkButton, and ImageButton Web controls all contain an OnClientClick property in which you can specify client-side JavaScript that should be executed when the Button is clicked. If you use JavaScript like the following:

return confirm('your message here');


The user will be shown a confirm messagebox upon clicking the button (where msg is the string you want to appear in the confirm messagebox). If the user clicks the confirm messagebox's Cancel button the form will not be posted back; clicking the OK button will submit the form.

Unfortunately, the GridView's CommandField does not include an OnClientClick property. However, any Button in a GridView with a CommandName of Delete, when clicked, will cause the GridView to delete the associated record. Therefore we can create our own Delete button by adding a TemplateField that contains a Button (or LinkButton or ImageButton) with a CommandName of Delete. This added Button, then, can have an appropriate OnClientClick property value. 

Steps to add the Confirmation Code:
1. Open the Gridview code in the Page side. 
2. Locate the Tag. 
3. After the Tag Copy and Past this code:


:TemplateField>
<ItemTemplate>
<asp:LinkButtonID="LinkButton1"runat="server" OnClientClick="return confirm('Are you sure you want to delete this record?');" CommandName="Delete">Delete Commentasp:LinkButton>
ItemTemplate>
asp:TemplateField>

 

Visitors/Readers Comments
(for questions please use The Forum)



nataraj
Was helpful

14/08/2007 04:43:47 UTC

srisalam
ok..a little bit...........

24/10/2007 04:39:59 UTC

Sweta

Can any one help.... without creating template field at design time how to display confirmation message

thanks in advance

25/10/2007 00:23:55 UTC

Kamal

Either use Attributes.Add( ) method of a Control or Register the JavaScript from code behind. See this Article for more Explianation:

Add JavaScript to asp:Content block dynamically in ASP .NET 2.0

25/10/2007 00:52:02 UTC

Dinesh

Great  Article

Very Helpful

THANKS

30/10/2007 21:40:26 UTC

Raja

Other way to do it

                 
                       
                           
                               
                           

                       

                   

28/11/2007 00:17:26 UTC

afsal
ofcourse helpful......

02/01/2008 02:51:40 UTC

Nithya

helped a little

04/01/2008 04:19:07 UTC

What I get is..

Server Error in '/AVHome' Application.


Invalid postback or callback argument.  Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

08/01/2008 18:32:53 UTC

Nitya

i have gridview which has

 

 

Dim dgitem As GridViewRowDim lnkbtnremove As LinkButtonDim a As LabelFor Each dgitem In GridView1.Rows"lblinprodname")"lnkRemove")lnkbtnremove.Attributes.Add("onclick", "return confirm('Are you sure you want to Remove?')")Next

 

 

 

a = dgitem.FindControl(

lnkbtnremove = dgitem.FindControl(

 

 

on gridview1_rowcommand()

record is deleted

now i want product name with this "

lnkbtnremove.Attributes.Add("onclick", "return confirm('Are you sure you want to  Remove bangjadtar?')")

"

plz help me how to do that..

in inline code

<

asp:LinkButton id="lnkRemove" runat="server" Text="Remove Item" CssClass="text_9_maroon_link" __designer:wfdid="w104" CommandArgument='<%# eval ("Prod_id") %>' commandname="del">

 

Sub ComputeSum(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles GridView1.RowDataBound

26/02/2008 05:15:59 UTC

raj
Invalid postback or callback argument.  Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

10/03/2008 05:30:45 UTC

Monique
Very helpful. Thank you.

17/07/2008 20:40:06 UTC

cp
hii
i am using thsi but i am getting error server tag not well formed why soo pls help mee

<

form id="form1" runat="server">

 

<div>

 

 

<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" Text="Add Category" Height="23px" />

 

 

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="id" ForeColor="#333333" GridLines="None" OnRowCancelingEdit="GridView1_RowCancelingEdit"

 

 

 

 

Deleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" onrowdeleting="GridView1_RowDeleting" onselectedindexchanged="GridView1_SelectedIndexChanged">

 

<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />

 

<Columns>

 

<asp:CommandField HeaderText="Edit-Update" ShowEditButton="True" />

 

<asp:BoundField DataField="id" HeaderText="ID" ReadOnly="True" />

 

<asp:BoundField DataField="name" HeaderText="Name" />

 

<asp:BoundField DataField="phone_01" HeaderText="PHONE_01" />

 

<asp:BoundField DataField="phone_02" HeaderText="PHONE_02" />

 

<asp:CommandField HeaderText="Delete" ShowDeleteButton="True" />

 

Columns>

 

<RowStyle BackColor="#E3EAEB" />

 

<EditRowStyle BackColor="#7C6F57" />

 

<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />

 

<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />

 

<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />

 

<AlternatingRowStyle BackColor="White" />

 

asp:GridView>

 

<br />

 

<br />

 

 div>

 

where to write that code actually


form>

18/07/2008 01:37:48 UTC

kp
Very Useful.
Thanks a lot....

12/11/2008 01:20:53 UTC

kp
Very Useful.
Thanks a lot....

12/11/2008 01:21:12 UTC




Add your Comments

Name:  
Message:
Note: For faster response please use Forums >> for your questions instead of the comments area! (Admin)