How to implement Ajax Delete Confirmation in gridview ?


Hi

These are the few steps do this task

Step 1:Take a script Manager ajax control in Default page

Step 2:Write the Css code for modal popup Like this

<style type=”text/css”>

/*Modal Popup*/

.modalBackground

{

background-color: Gray;

filter: alpha(opacity=70);

opacity: 0.7;

}

</style

Step 3: Take the gridview control

Step 4: Keep the  ConfirmButtonExtender(Ajax control),ModalPopupExtender(Ajax Control) and Panal (for display the custom Delete message) in Template field of gridview.

<asp:TemplateField HeaderText=”Action”>
<ItemTemplate>

<asp:LinkButton ID=”delete” runat=”server” CommandName=”Delete” Text=”Delete” />

<ajaxtoolkit:ConfirmButtonExtender TargetControlID=”delete” ID=”confBtnDelete” runat=”server”
DisplayModalPopupID=”ModalPopupExtender1″/>

<ajaxtoolkit:ModalPopupExtender ID=”ModalPopupExtender1″ runat=”server” TargetControlID=”delete”
PopupControlID=”PNL” OkControlID=”ButtonOk” CancelControlID=”ButtonCancel” BackgroundCssClass=”modalBackground” />
<asp:Panel ID=”PNL” runat=”server” Style=”display: none; width: 200px; background-color: White;
border-width: 2px; border-color: Black; border-style: solid; padding: 20px;”>
Are you sure you want to delete this data?
<br />
<br />
<div style=”text-align: right;”>
<asp:Button ID=”ButtonOk” runat=”server” Text=”OK” />
<asp:Button ID=”ButtonCancel” runat=”server” Text=”Cancel” />
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>

Step 5: Configure the DataSource Control like this

<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:testConnectionString %>”
DeleteCommand=”DELETE FROM [tblStory] WHERE [Id] = @Id” ProviderName=”<%$ ConnectionStrings:testConnectionString.ProviderName %>”
SelectCommand=”SELECT [Id], [Desc1] FROM [tblStory]”>
</asp:SqlDataSource>

Step 6: Compile the code. You will get the expected alert box.

Whole Default.aspx code is like

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”AjaxConfirmayion.aspx.cs” Inherits=”AjaxConfirmayion” %>

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajaxtoolkit” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<script runat=”server”>

</script>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head id=”Head1″ runat=”server”>
<title></title>
<style type=”text/css”>
/*Modal Popup*/
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>

</div>
<div style=”margin-left:280px; margin-top:190px; “>

<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False” DataKeyNames=”Id”
DataSourceID=”SqlDataSource1″ EmptyDataText=”There are no data records to display.”
AllowPaging=”True” CellPadding=”4″ ForeColor=”#333333″
Width=”476px” style=”margin-right: 150px”>
<RowStyle BackColor=”#EFF3FB” />
<Columns>

<asp:BoundField DataField=”Id” HeaderText=”Id”  />

<asp:BoundField DataField=”Desc1″ HeaderText=”Description” />

<asp:TemplateField HeaderText=”Action”>
<ItemTemplate>

<asp:LinkButton ID=”delete” runat=”server” CommandName=”Delete” Text=”Delete” />

<ajaxtoolkit:ConfirmButtonExtender TargetControlID=”delete” ID=”confBtnDelete” runat=”server”
DisplayModalPopupID=”ModalPopupExtender1″/>

<ajaxtoolkit:ModalPopupExtender ID=”ModalPopupExtender1″ runat=”server” TargetControlID=”delete”
PopupControlID=”PNL” OkControlID=”ButtonOk” CancelControlID=”ButtonCancel” BackgroundCssClass=”modalBackground” />
<asp:Panel ID=”PNL” runat=”server” Style=”display: none; width: 200px; background-color: White;
border-width: 2px; border-color: Black; border-style: solid; padding: 20px;”>
Are you sure you want to delete this data?
<br />
<br />
<div style=”text-align: right;”>
<asp:Button ID=”ButtonOk” runat=”server” Text=”OK” />
<asp:Button ID=”ButtonCancel” runat=”server” Text=”Cancel” />
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>

</Columns>
<FooterStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />
<PagerStyle BackColor=”#2461BF” ForeColor=”White” HorizontalAlign=”Center” />
<SelectedRowStyle BackColor=”#D1DDF1″ Font-Bold=”True” ForeColor=”#333333″ />
<HeaderStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />
<EditRowStyle BackColor=”#2461BF” />
<AlternatingRowStyle BackColor=”White” />
</asp:GridView>

</div>

<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:testConnectionString %>”
DeleteCommand=”DELETE FROM [tblStory] WHERE [Id] = @Id” ProviderName=”<%$ ConnectionStrings:testConnectionString.ProviderName %>”
SelectCommand=”SELECT [Id], [Desc1] FROM [tblStory]”>
</asp:SqlDataSource>
</form>
</body>
</html>

You can download the Source code from here

http://cid-4b1f6c3e92f6522c.office.live.com/browse.aspx/.Public?uc=1

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: