Home > AJAX > Delete Record from Gridview using Modal Popup Extender

Delete Record from Gridview using Modal Popup Extender


try this example to delete record from Gridview using Modal Popup Extender


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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
    <title>Untitled Page</title>
    <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   
        function okClick(){
            //  find the confirm ModalPopup and hide it   
            //  use the cached button as the postback source
            __doPostBack(this._source.name, '');
        function cancelClick(){
            //  find the confirm ModalPopup and hide it
            //  clear the event source
            this._source = null;
            this._popup = null;
    <style type="text/css">
        .modalBackground {
    <form id="form1" runat="server">
        <strong>Delete with ModalPopUp Extender and Paging<br />
        <br />
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <p style="background-color:AliceBlue; width:95%">
                Example of using a ModalPopupExtender as a delete confirm button<br />
                for the indivdual rows of a GridView.  To test out the functionality,<br />
                click the Delete button of any of the rows and watch what happens.<br />
            <br />
            &nbsp;<cc1:ModalPopupExtender ID="md1" BehaviorID="mdlPopup" runat="server"
                TargetControlID="div" PopupControlID="div"
                OkControlID="btnOk" OnOkScript="okClick();"
                CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>
            <div id="div" runat="server" align="center" class="confirm" style="display:none">
                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" />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePanel">
                    <asp:Label ID="lblProgress" runat="server" Text="Loading . . . . . "></asp:Label>
                <img src="images/progress_ani.gif" />
         <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
                    <asp:Label ID="lblTitle" runat="server" BackColor="LightBlue" Width="95%" />
                        ID="gvToDoList" runat="server" AutoGenerateColumns="False" Width="95%" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowPaging="True" AllowSorting="True" >
                        <AlternatingRowStyle BackColor="AliceBlue" />
                        <HeaderStyle HorizontalAlign="Left" />
                            <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                            <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" />
                            <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                                        ID="btnDelete" runat="server" OnClientClick="showConfirm(this); return false;"
                                        OnClick="BtnDelete_Click" Text="Delete" CommandArgument='<%# Eval("CustomerID") %>' />
                                <ControlStyle Width="50px" />
                                <ItemStyle HorizontalAlign="Center" />
                                <HeaderStyle Width="60px" />
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                        SelectCommand="SELECT * FROM [Customers]">

in code behind:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)


    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;
        SqlConnection conn = new SqlConnection(
        SqlCommand cmd = new SqlCommand(
            "DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID",
        cmd.Parameters.AddWithValue("CustomerID", btnDelete.CommandArgument);


            if (cmd.ExecuteNonQuery().Equals(1))


Hope it helps

Good Luck

  1. No comments yet.
  1. No trackbacks yet.

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: