ModalPopUpExtender In Gridview

Ajax ModalPopUpExtender in master detail grdiview to open popup.

In this sample code example i am going to describe how to use Ajax ModalPopUp Extender in Gridview to display master detail or parent child data using sqlDataSource, AjaxControlToolkit,Sql Server 2008 and visual studio 2008.


I have used "Orders" and "Customers" table of Northwind database for this example.

Read install Northwind database on sql server 2008 to know how to install northwind or pubs sample database on sqlserver 2008.

Create new website in VS2008 and Create BIN folder by right clicking and selecting Add ASP.NET folder option in solution explorer.

Put AjaxControlToolkit.dll in this BIN folder and add reference to it.


open Default.aspx page source and register AjaxControlToolkit in page directive.

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

Switch to design view and drag toolkitScriptManager on the page
Or add it in through page source.

<AjaxToolkit:ToolkitScriptManager ID="scriptManager" 
                                      runat="server">
    </AjaxToolkit:ToolkitScriptManager>

Drag and place an Update Panel on the page. we will put gridview and modal popup inside it in later part of this post

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
            </ContentTemplate>
</asp:UpdatePanel>

Now let's create SQLDataSource to populate the gridview and display orders table data.

switch to design view and drag sqldatasource control on the page and configure it according to pictures below.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ModalPopUpConnectionString %>" 
SelectCommand="SELECT [OrderID], [CustomerID], [OrderDate], 
[ShippedDate], [ShipCity], [ShipCountry] FROM [Orders]">
</asp:SqlDataSource>

Now drag and place a GridView inside content template of Update panel and specify sqldatasource as datasource.

<asp:GridView ID="GridView1" runat="server" 
              AllowPaging="True" AutoGenerateColumns="False" 
              DataKeyNames="OrderID" 
              DataSourceID="SqlDataSource1" 
              CssClass="Gridview" 
              Width="650px" ShowHeader="false" PageSize="5">
<Columns>
<asp:BoundField DataField="OrderID" HeaderText="OrderID"/>
<asp:TemplateField HeaderText="CustomerID">
<ItemTemplate>
<asp:LinkButton runat="server" ID="lnkCustomer" 
                Text='<%#Eval("CustomerID") %>' 
                OnClick="lnkCustomer_Click">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate"/>
<asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate"/>
<asp:BoundField DataField="ShipCity" HeaderText="ShipCity"/>
<asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry"/>
</Columns>
</asp:GridView>

Now add ModalPopUp extender and specify it's properties as mentioned below

<AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender1" 
                           runat="server"
                           TargetControlID="btnModalPopUp"
                           PopupControlID="pnlPopUp"
                           BackgroundCssClass="modalBackground"
                           OkControlID="btnOk"
                           X="20"
                           Y="100">
</AjaxToolkit:ModalPopupExtender>

Now add one panel and one gridview inside this panel to display details

<asp:Panel runat="Server" ID="pnlPopUp" CssClass="confirm-dialog">
<asp:GridView ID="GridView2" runat="server" 
              CssClass="Gridview" Width="290px" 
              AutoGenerateColumns="false">
</asp:GridView>
</asp:UpdatePanel>

Complete HTML source of page will look like this

<form id="form1" runat="server">
    <div>
    
<AjaxToolkit:ToolkitScriptManager ID="scriptManager" 
                                  runat="server">

</AjaxToolkit:ToolkitScriptManager>
     
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
              AutoGenerateColumns="False" DataKeyNames="OrderID" 
              DataSourceID="SqlDataSource1" CssClass="Gridview" 
              Width="650px" ShowHeader="false" PageSize="5">
<Columns>
<asp:BoundField DataField="OrderID" HeaderText="OrderID"/>
<asp:TemplateField HeaderText="CustomerID">
<ItemTemplate>
<asp:LinkButton runat="server" ID="lnkCustomer" 
                Text='<%#Eval("CustomerID") %>' 
                OnClick="lnkCustomer_Click">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate"/>
<asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate"/>
<asp:BoundField DataField="ShipCity" HeaderText="ShipCity"/>
<asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry"/>
</Columns>
</asp:GridView>

<asp:Button runat="server" ID="btnModalPopUp" 
            style="display:none"/>
            
<AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender1" 
             runat="server"
             TargetControlID="btnModalPopUp"
             PopupControlID="pnlPopUp"
             BackgroundCssClass="modalBackground"
             OkControlID="btnOk"
             X="20"
             Y="100">
</AjaxToolkit:ModalPopupExtender>
                
<asp:Panel runat="Server" ID="pnlPopUp" CssClass="confirm-dialog">
<asp:GridView ID="GridView2" runat="server">
</asp:GridView>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ModalPopUpConnectionString %>" 
SelectCommand="SELECT [OrderID], [CustomerID], [OrderDate], 
[ShippedDate], [ShipCity], [ShipCountry] FROM [Orders]">
</asp:SqlDataSource>
    
    </div>
    </form>

Write this code in click event of link Button in gridview to populate details or child gridview

01protected void lnkCustomer_Click(object sender, EventArgs e)

02    {

03        //Retrieve Customer ID

04        LinkButton lnkCustomerID = sender as LinkButton;

05        string strCustomerID = lnkCustomerID.Text;

06 

07        //Create sql connection and fetch data from database based on CustomerID

08        string strConnectionString = ConfigurationManager.ConnectionStrings["ModalPopUpConnectionString"].ConnectionString;

09        string strSelect = "SELECT CompanyName, ContactName, Address FROM Customers WHERE CustomerID = @customerID";

10        SqlConnection sqlCon = new SqlConnection();

11        sqlCon.ConnectionString = strConnectionString;

12        SqlCommand cmdCustomerDetails = new SqlCommand();

13        cmdCustomerDetails.Connection = sqlCon;

14        cmdCustomerDetails.CommandType = System.Data.CommandType.Text;

15        cmdCustomerDetails.CommandText = strSelect;

16        cmdCustomerDetails.Parameters.AddWithValue("@customerID", strCustomerID);

17        sqlCon.Open();

18 

19        //Create DataReader to read the record

20        SqlDataReader dReader = cmdCustomerDetails.ExecuteReader();

21        GridView2.DataSource = dReader;

22        GridView2.DataBind();

23        sqlCon.Close();

24        modalPopUpExtender1.Show();

25}