Confirm GridView Deletes with the ModalPopupExtender

  Step 1: Add the GridView to your page, placing it inside an UpdatePanel.



<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
           <ContentTemplate>
               <asp:Label ID="lblTitle" runat="server" Text="User List" BackColor="lightblue" Width="95%" />
               <asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false" Width="95%">
                   <AlternatingRowStyle BackColor="aliceBlue" />
                   <HeaderStyle HorizontalAlign="Left" />
                   <Columns>
                       <asp:BoundField DataField="ID" HeaderText="ID" />
                       <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                       <asp:BoundField DataField="LastName" HeaderText="LastName" />
                       <asp:BoundField DataField="Address" HeaderText="Address" />
                   </Columns>
               </asp:GridView>
           </ContentTemplate>
       </asp:UpdatePanel>
Nothing out of the ordinary here, just a basic GridView contained in an UpdatePanel (don't forget to set UpdateMode to Conditional) Step 2: Add a TemplateField with a Delete button. Wire up an event handler for the button click.

  <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
                   <ItemTemplate>
                       <asp:Button ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"
                           OnClick="BtnDelete_Click" Text="Delete" />
                   </ItemTemplate>
               </asp:TemplateField>
You can either explicitly use the OnClick event of the delete button or add the CommandName attribute and implement the RowDeleting event. I chose the former for this sample. Step 3: Add the HTML markup for the modal popup.
<div id="div" runat="server" align="center" class="confirm" style="display: none">
           <img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this
           item?
           <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
           <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
       </div>
Step 4: Add the ModalPopupExtender to the page.
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server" BehaviorID="mdlPopup"
           TargetControlID="div" PopupControlID="div" OkControlID="btnOk" CancelControlID="btnNo"
           BackgroundCssClass="modalBackground" />
Step 5: Add an OnClientClick for the delete button
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
                   <ItemTemplate>
                       <asp:Button ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"
                           OnClick="BtnDelete_Click" Text="Delete" />
                   </ItemTemplate>
               </asp:TemplateField>
Step 6: Add the supporting javascript <script type="text/javascript"> // keeps track of the delete button for the row // that is going to be removed var _source; // keep track of the popup div var _popup; function showConfirm(source){ this._source = source; this._popup = $find('mdlPopup'); // find the confirm ModalPopup and show it this._popup.show(); } function okClick(){ // find the confirm ModalPopup and hide it this._popup.hide(); // use the cached button as the postback source __doPostBack(this._source.name, ''); } function cancelClick(){ // find the confirm ModalPopup and hide it this._popup.hide(); // clear the event source this._source = null; this._popup = null; } </script>

Here is the complete listing for this page.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head" runat="server">
   <title>Delete Confirm Example</title>

   <script runat="server">

       public class User
       {
           private int _id;
           private string _firstName;
           private string _lastName;
           private string _Address;
           public User(int id, string firstname, string lastname, string address)
           {
               this._id = id;
               this._firstName = firstname;
               this._lastName = lastname;
               this._Address = address;
           }
           public int ID
           {
               get { return this._id; }
           }
           public string FirstName
           {
               get { return this._firstName; }
           }

           public string LastName
           {

               get { return this._lastName; }

           }
           public string Address
           {
               get { return this._Address; }
           }
       }
       private System.Collections.Generic.List<User> Users
       {
           get
           {
               System.Collections.Generic.List<User> item = this.Session["Users"] as System.Collections.Generic.List<User>;
               if (item == null)
               {
                   item = new System.Collections.Generic.List<User>();
                   item.Add(new User(1, "santosh", "kumar", "Chandigarh"));
                   item.Add(new User(2, "Vinod", "kumar", "HP"));
                   item.Add(new User(3, "Ajay", "Chawla", "PB"));
                   item.Add(new User(4, "MandeepInder", "Singh", "Chandigarh"));
                   this.Session["Users"] = item;
               }
               return item;
           }
       }
       /// <summary>
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       protected void Page_Load(object sender, EventArgs e)
       {
           if (!this.IsPostBack)
           {
               this.gvUsers.DataSource = this.Users;
               this.gvUsers.DataBind();
           }

       }


       /// <summary>
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       protected void BtnDelete_Click(object sender, EventArgs e)
       {
           //  get the gridviewrow from the sender so we can get the datakey we need
           Button btnDelete = sender as Button;
           GridViewRow row = (GridViewRow)btnDelete.NamingContainer;
           //  find the item and remove it
           User itemToRemove = this.Users[row.RowIndex];
           this.Users.Remove(itemToRemove);
           //  rebind the datasource
           this.gvUsers.DataSource = this.Users;
           this.gvUsers.DataBind();
       }

   </script>
   <script type="text/javascript">
    //  keeps track of the delete button for the row
    //  that is going to be removed
    var _source;
    // keep track of the popup div
    var _popup;
    function showConfirm(source){
        this._source = source;
        this._popup = $find('mdlPopup');
        //  find the confirm ModalPopup and show it 
        this._popup.show();
    }
    function okClick(){
        //  find the confirm ModalPopup and hide it 
        this._popup.hide();
        //  use the cached button as the postback source
        __doPostBack(this._source.name, '');

    }

    function cancelClick(){
        //  find the confirm ModalPopup and hide it
        this._popup.hide();
        //  clear the event source
        this._source = null;
        this._popup = null;

    }

   </script>
   <style>

    .modalBackground {

        background-color:Gray;

        filter:alpha(opacity=70);

        opacity:0.7;

    }

    .confirm{

       background-color:White;

       padding:10px;

       width:370px;

    }

</style>
</head>
<body>
   <form id="form" runat="server" style="font-family: Trebuchet MS;">
       <asp:ScriptManager ID="scriptManager" runat="server" />
       <div>
           <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
               <ContentTemplate>
                   <asp:Label ID="lblTitle" runat="server" Text="User List" BackColor="lightblue" Width="95%" />
                   <asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false" Width="95%">
                       <AlternatingRowStyle BackColor="aliceBlue" />
                       <HeaderStyle HorizontalAlign="Left" />
                       <Columns>
                           <asp:BoundField DataField="ID" HeaderText="ID" />
                           <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                           <asp:BoundField DataField="LastName" HeaderText="LastName" />
                           <asp:BoundField DataField="Address" HeaderText="Address" />
                           <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
                               <ItemTemplate>
                                   <asp:Button ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"
                                       OnClick="BtnDelete_Click" Text="Delete" />
                               </ItemTemplate>
                           </asp:TemplateField>
                       </Columns>
                   </asp:GridView>
               </ContentTemplate>
           </asp:UpdatePanel>
           <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mdlPopup" runat="server"
               TargetControlID="div" PopupControlID="div" OkControlID="btnOk" OnOkScript="okClick();"
               CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />
           <div id="div" runat="server" align="center" class="confirm" style="display: none">
               <img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this
               item?
               <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
               <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
           </div>
       </div>
   </form>
</body>
</html>
Reactions

Post a Comment

0 Comments

Close Menu