GridView Using Ajax ModalPopupExteder

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

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

Modal popup extender setup

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 that sets the ID of control using which we can display the Popup (Required)
• PopupControlID: This is the property that 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 a webpage, we took this because the property of ModalPopup "TargetControlID" is required to be set. But in our example, this button is of no use.

CSS styling

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: solid 1px #c0c0c0;
        background-color: #99ccff;
        padding: 0px 10px 10px 10px;
        position: absolute;
        top: -1000px;
    }
</style>

Selected index changed event implementation

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