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