GridView Using Ajax ModalPopupExteder

In this article I am going to show how you can display master/detail GridView using Ajax ModalPopupExteder.

The controls we will require are :

1. GridView
2. Button
3. Ajax's ModalpopUpExtender
4. Script Manager
5. Panel
6. SqlDataSource
7. LinkButton

First of all we will design our database. We need two tables since we are creating a master/detail page. Here are the table structures:

• Master Table

•  Child Table

Now add a GridView to the page, which is a Master GridView and bind it using a SqlDataSource with the Master table; also enable AllowSelection.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    CellPadding="4" DataKeyNames="PersonID" DataSourceID="SqlDataSource1" 
    ForeColor="#333333" GridLines="None">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="PersonID" HeaderText="PersonID" ReadOnly="True" 
            SortExpression="PersonID" />
        <asp:BoundField DataField="PersonName" HeaderText="PersonName" 
            SortExpression="PersonName" />
        <asp:BoundField DataField="Salary" HeaderText="Salary" 
            SortExpression="Salary" />
    </Columns>
    <EditRowStyle BackColor="#2461BF" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#EFF3FB" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F5F7FB" />
    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
    <SortedDescendingCellStyle BackColor="#E9EBEF" />
    <SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True" 
    ProviderName="System.Data.SqlClient" 
    SelectCommand="SELECT * FROM [PersonMaster]"></asp:SqlDataSource>

Next We have to take A Panel and inside the Panel use a second GridView (a Child GridView) and a linkButton.

<asp:Panel ID="Panel1" runat="server" Width="400" CssClass="ModalWindow">

<div align="right">

    <asp:LinkButton ID="lnkOk" runat="server" Text="Close" /></div>

<asp:GridView ID="GridView2" runat="server" BackColor="White" BorderColor="White"

    BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1" DataSourceID="SqlDataSource2"    
GridLines="None" AutoGenerateColumns="False">

    <Columns>

        <asp:BoundField DataField="Admin" HeaderText="Admin" SortExpression="Admin" />

        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />

        <asp:BoundField DataField="Contact" HeaderText="Contact" SortExpression="Contact" />

        <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />

    </Columns>

    <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />

    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />

    <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />

    <RowStyle BackColor="#DEDFDE" ForeColor="Black" />

    <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />

    <SortedAscendingCellStyle BackColor="#F1F1F1" />

    <SortedAscendingHeaderStyle BackColor="#594B9C" />

    <SortedDescendingCellStyle BackColor="#CAC9C9" />

    <SortedDescendingHeaderStyle BackColor="#33276A" />

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

    SelectCommand="SELECT * FROM [PersonDetail] WHERE ([Admin] = @Admin)">

    <SelectParameters>

        <asp:ControlParameter ControlID="GridView1" Name="Admin" PropertyName="SelectedValue"

            Type="String" DefaultValue="" />

    </SelectParameters>

</asp:SqlDataSource>

</asp:Panel>

Next take a Button on the page which is the targetControlID of the ModalPopupExtender.

<asp:Button runat="server" ID="btnModalPopUp" Style="display: none" />

All the required Controls are added and now take a ModalPopupExteder and scriptManager on the page:

<asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

<cc1:ModalPopupExtender TargetControlID="btnModalPopUp" 

ID="ModalPopupExtender2" runat="server"

BackgroundCssClass="modalBackground"

PopupControlID="Panel1" 

OkControlID="lnkOk"/>

TargetControlID: This is the property which sets the ID of control using which we can display the Popup (Required)

PopupControlID: This is the property which sets the ID of control which will be popped up after clicking on the 
TargetControlID control. (Required)

Here we took the Button but we are not showing this button on webpage, we took this because the property of 
ModalPopup "TargetControlID" is required to set. But in our example this button is of no use.

Add the CSS for the ModalPopUP and ScriptManage

<style type="text/css">

            .modalBackground

            {

                background-color: #CCCCFF;

                filter: alpha(opacity=40);

                opacity: 0.5;

            }

            .ModalWindow

            {

                border: solid1px#c0c0c0;

                background-color: #99ccff;

                padding: 0px10px10px10px;

                position: absolute;

                top: -1000px;

            }

        </style>

Now the main event of displaying a popup. Implement the SelectedIndexChanged Event of GridView1.

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

    {

        ModalPopupExtender2.Show();

    }

Result: