ModalPopUpExtender In GridView

Ajax ModalPopUpExtender In GridView Example To Show Master Detail Or Parent Child Data As PopUp. In this sample code i am showing how to implement or use ModalPopUp Extender in Gridview using sqlDataSource, AjaxControlToolkit,Sql Server 2008 and visual studio 2008.


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

You can install Northwind database on sql server 2008 If you don't have.

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" %>

Add following CSS style in head section of page to show modal background.

<style>

.modalBackground 

{

 background-color:Gray;filter:alpha(opacity=70);opacity:0.7;

} 

</style>

Switch to design view and drag toolkitScriptManager on the page Or add it in html 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

---

<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 following code in Click Event of link Button in gridview to populate details or child gridview

C#

---

show source

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}

VB.NET

---

show source

01Protected Sub lnkCustomer_Click(sender As Object, e As EventArgs)

02 'Retrieve Customer ID

03 Dim lnkCustomerID As LinkButton = TryCast(sender, LinkButton)

04 Dim strCustomerID As String = lnkCustomerID.Text

05 

06 'Create sql connection and fetch data from database based on CustomerID

07 Dim strConnectionString As String = ConfigurationManager.ConnectionStrings("ModalPopUpConnectionString").ConnectionString

08 Dim strSelect As String = "SELECT CompanyName, ContactName, Address FROM Customers WHERE CustomerID = @customerID"

09 Dim sqlCon As New SqlConnection()

10 sqlCon.ConnectionString = strConnectionString

11 Dim cmdCustomerDetails As New SqlCommand()

12 cmdCustomerDetails.Connection = sqlCon

13 cmdCustomerDetails.CommandType = System.Data.CommandType.Text

14 cmdCustomerDetails.CommandText = strSelect

15 cmdCustomerDetails.Parameters.AddWithValue("@customerID", strCustomerID)

16 sqlCon.Open()

17 

18 'Create DataReader to read the record

19 Dim dReader As SqlDataReader = cmdCustomerDetails.ExecuteReader()

20 GridView2.DataSource = dReader

21 GridView2.DataBind()

22 sqlCon.Close()

23 modalPopUpExtender1.Show()

24End Sub

Download Sample Code

Tweet

If you like this post than join us or share