Skip to main content

ModalPopupExtender Example for Editing Rows in a GridView (Master/Detail Scenario)

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

<%@ 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 runat="server">
   <title>Untitled Page</title>
</head>
<body>
   <form id="form" runat="server">
       <asp:ScriptManager ID="scriptManager" runat="server" />
       <div>
           <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
               <ContentTemplate>
                   <asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" />
                   <asp:GridView ID="gvCustomers" runat="server" DataKeyNames="Id" AutoGenerateColumns="false"
                       AllowPaging="true" AllowSorting="true" PageSize="10" Width="95%">
                       <AlternatingRowStyle BackColor="aliceBlue" />
                       <HeaderStyle HorizontalAlign="Left" />
                       <Columns>
                           <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px">
                               <ItemTemplate>
                                   <asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
                               </ItemTemplate>
                           </asp:TemplateField>
                           <asp:BoundField DataField="Id" HeaderText="ID" SortExpression="Id" ReadOnly="true" />
                           <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="contactname" ReadOnly="true" />
                       </Columns>
                   </asp:GridView>
               </ContentTemplate>
           </asp:UpdatePanel>
           <asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
           <ajaxtoolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
               PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
           <asp:Panel ID="pnlPopup" runat="server" Width="500px" Style="display: none">
               <asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
                   <ContentTemplate>
                       <asp:Label ID="lblCustomerDetail" runat="server" Text="Customer Detail" BackColor="lightblue"
                           Width="95%" />
                       <asp:DetailsView ID="dvCustomerDetail" runat="server" DefaultMode="Edit" Width="95%"
                           BackColor="white" />
                   </ContentTemplate>
               </asp:UpdatePanel>
               <div align="right" style="width: 95%">
                   <asp:Button ID="btnSave" runat="server" Text="Save"
OnClientClick="alert('Sorry, but I didnt implement save '); return false;"
                       Width="50px" />
                   <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
               </div>
           </asp:Panel>
       </div>
   </form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;

public partial class MasterDetail : System.Web.UI.Page
{
    DataSet ds;
    protected void Page_Load(object sender, EventArgs e)
    {

        ds = Data();
        if (!this.IsPostBack)
        {
            if (Session["parent"] == null)
            {
                gvCustomers.DataSource = ds.Tables["Parent"];
                gvCustomers.DataBind();
            }
            else
            {
                gvCustomers.DataSource = Session["Parent"] as DataTable;
                gvCustomers.DataBind();

            }
        }

    }
    private DataSet Data()
    {

        DataTable dt = new DataTable();
        dt.Columns.Add("Id", typeof(int));
        dt.Columns.Add("Name", typeof(string));

        dt.Rows.Add(new object[] { 1, "aaaa" });
        dt.Rows.Add(new object[] { 2, "bbbb" });
        dt.Rows.Add(new object[] { 3, "cccc" });
        dt.TableName = "Parent";




        DataTable dtc = new DataTable();
        dtc.Columns.Add("Id", typeof(int));
        dtc.Columns.Add("Qul", typeof(string));

        dtc.Rows.Add(new object[] { 1, "aaaa" });
        dtc.Rows.Add(new object[] { 2, "bbbb" });
        dtc.Rows.Add(new object[] { 3, "bbbb" });
        dtc.TableName = "Child";


        DataSet ds = new DataSet();

        ds.Tables.Add(dt);
        ds.Tables.Add(dtc);
        Session["Parent"] = dt;

        return ds;

    }
    protected void BtnViewDetails_Click(object sender, EventArgs e)
    {
        //  get the gridviewrow from the sender so we can get the datakey we need
        Button btnDetails = sender as Button;
        GridViewRow row = (GridViewRow)btnDetails.NamingContainer;

        //  extract the id from the row whose details button originated the postback.
        //  grab the customerid and feed it to the customer details datasource
        //  finally, rebind the detailview
        DataView dv = new DataView(ds.Tables["Child"]);

        dv.RowFilter = "Id=" + Convert.ToString(this.gvCustomers.DataKeys[row.RowIndex].Value);
        dvCustomerDetail.DataSource = dv;
        dvCustomerDetail.DataBind();

        //  update the contents in the detail panel
        this.updPnlCustomerDetail.Update();
        //  show the modal popup
        this.mdlPopup.Show();
    }  
}

Comments

  1. Thanks boss.





    makes the big difference between your post and this post http://blog.dreamlabsolutions.com/post/2008/11/11/ModalPopupExtender-in-a-GridView-sample.aspx

    Thank you very much, you have solved for me a serious problem

    ReplyDelete

Post a Comment

Popular posts from this blog