We use one link button from which we pop up the grid view control and then inside the grid view whatever you choose will be shown in the other pop-up.

Initial Chamber

Step 1

Open Visual Studio 2010 and create an empty website, provide it a suitable name such as gridview_demo.

Step 2

In Solution Explorer you will get your empty website. Add a web form and SQL Database as in the following.

For Web Form

gridview_demo (your empty website) then right-click and select Add New Item, Web Form. Name it gridview_demo.aspx.

For SQL Server Database

gridview_demo (your empty website) then right-click and select Add New Item, SQL Server Database. (Add the database inside the App_Data_folder).

Database Chamber

Step 3

Get to your database (Database.mdf). We will create a table tbl_Data. Now go to the database.mdf, then Table and Add New table, design your table as in the following:

Table: tbl_data, don't forget to set the ID as Identity Specification - Yes.

table design

Design Chamber

Step 4

Now open your gridview_demo.aspx file, where we create our design for modal pop-up extender.

Gridview_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head runat="server">
  9. <title></title>
  10. <style type="text/css">
  11. .style2
  12. {
  13. width: 116px;
  14. }
  15. .style3
  16. {
  17. width: 202px;
  18. }
  20. #man
  21. {
  22. margin:200px,500px,0px,200px;
  23. padding:200px,550px,0px,200px;
  27. }
  30. .style4
  31. {
  32. font-size: large;
  33. text-align: left;
  34. }
  37. </style>
  38. </head>
  39. <body>
  40. <form id="form1" runat="server">
  42. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  43. </asp:ToolkitScriptManager>
  44. <div>
  46. <asp:ModalPopupExtender ID="ModalPopupExtender1" EnableViewState="true" CancelControlID="Button2" TargetControlID="LinkButton1" PopupControlID="Panel1" runat="server">
  47. </asp:ModalPopupExtender>
  48. <div class="man">
  49. <asp:LinkButton ID="LinkButton1" runat="server"
  50. style="text-align: center" BackColor="#CCFFFF" ForeColor="#666633">Open your Grid View Here!!</asp:LinkButton>
  51. </div>
  53. <asp:LinkButton ID="Linkbtn" runat="server"></asp:LinkButton>
  54. <asp:ModalPopupExtender ID="ModalPopupExtender2" TargetControlID="Linkbtn" CancelControlID="btnclose" PopupControlID="Panel2" runat="server">
  55. </asp:ModalPopupExtender>
  59. <asp:Panel ID="Panel1" runat="server">
  60. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  61. CellPadding="4" onselectedindexchanged="GridView1_SelectedIndexChanged"
  62. ForeColor="#333333" GridLines="None">
  63. <AlternatingRowStyle BackColor="White" />
  64. <Columns>
  65. <asp:TemplateField HeaderText="id">
  66. <EditItemTemplate>
  67. <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("id") %>'></asp:TextBox>
  68. </EditItemTemplate>
  69. <ItemTemplate>
  70. <asp:Label ID="Label1" runat="server" Text='<%# Bind("id") %>'></asp:Label>
  71. </ItemTemplate>
  72. </asp:TemplateField>
  73. <asp:TemplateField HeaderText="Name">
  74. <EditItemTemplate>
  75. <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>
  76. </EditItemTemplate>
  77. <ItemTemplate>
  78. <asp:Label ID="Label2" runat="server" Text='<%# Bind("name") %>'></asp:Label>
  79. </ItemTemplate>
  80. </asp:TemplateField>
  81. <asp:TemplateField HeaderText="City">
  82. <EditItemTemplate>
  83. <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>
  84. </EditItemTemplate>
  85. <ItemTemplate>
  86. <asp:Label ID="Label3" runat="server" Text='<%# Bind("city") %>'></asp:Label>
  87. </ItemTemplate>
  88. </asp:TemplateField>
  89. <asp:ButtonField CommandName="Select" Text="Select" />
  90. </Columns>
  91. <FooterStyle BackColor="#990000" ForeColor="White" Font-Bold="True" />
  92. <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
  93. <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
  94. <RowStyle ForeColor="#333333" BackColor="#FFFBD6" />
  95. <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
  96. <SortedAscendingCellStyle BackColor="#FDF5AC" />
  97. <SortedAscendingHeaderStyle BackColor="#4D0000" />
  98. <SortedDescendingCellStyle BackColor="#FCF6C0" />
  99. <SortedDescendingHeaderStyle BackColor="#820000" />
  100. </asp:GridView>
  101. <br />
  102. </asp:Panel>
  104. <asp:Panel ID="Panel2" runat="server">
  105. <table style="width: 100%;" bgcolor="#FFFFCC" border="1px">
  106. <caption class="style4">
  107. <strong> This is your Selected Data</strong></caption>
  108. <tr>
  109. <td class="style2">
  110. <asp:Label ID="Label7" runat="server" Text="ID:"></asp:Label>
  111. </td>
  112. <td class="style3">
  114. <asp:Label ID="Label4" runat="server" ForeColor="#009933" Text="Label"></asp:Label>
  115. </td>
  116. </tr>
  117. <tr>
  118. <td class="style2">
  119. <asp:Label ID="Label8" runat="server" Text="Name:"></asp:Label>
  120. </td>
  121. <td class="style3">
  123. <asp:Label ID="Label5" runat="server" Text="Label" ForeColor="#009933"></asp:Label>
  124. </td>
  125. </tr>
  126. <tr>
  127. <td class="style2">
  128. <asp:Label ID="Label9" runat="server" Text="City:"></asp:Label>
  129. </td>
  130. <td class="style3">
  132. <asp:Label ID="Label6" runat="server" ForeColor="#009933" Text="Label"></asp:Label>
  133. </td>
  134. </tr>
  135. <tr>
  136. <td class="style2">
  137. </td>
  138. <td class="style3">
  139. <asp:Button ID="btnclose" runat="server" BackColor="#99CCFF" Text="Close"/>
  140. </td>
  141. </tr>
  142. </table>
  143. </asp:Panel>
  144. </div>
  145. </form>
  146. </body>
  147. </html>
Your design will look like the following:

design

Code Chamber

Step 5

Open your gridview_demo.aspx.cs and write some code so that our application works.

Gridview_demo.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.SqlClient;
  10. public partial class _Default : System.Web.UI.Page
  11. {
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. if (!Page.IsPostBack)
  15. {
  16. SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  17. SqlCommand cmd = new SqlCommand("select * from tbl_data", con);
  18. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  19. DataTable dt = new DataTable();
  20. sda.Fill(dt);
  21. GridView1.DataSource = dt;
  22. GridView1.DataBind();
  23. }
  25. }
  27. protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
  28. {
  29. Label4.Text = (GridView1.SelectedRow.FindControl("Label1") as Label).Text;
  30. Label5.Text = (GridView1.SelectedRow.FindControl("Label2") as Label).Text;
  31. Label6.Text = (GridView1.SelectedRow.FindControl("Label3") as Label).Text;
  32. ModalPopupExtender2.Show();
  34. }
  35. }
Output Chamber

Output

gridview

select data

It works like this. When you click on the first link, it will show the GridView in the pop-up. Inside the grid view we took a button field as Select, so when you click on the select button of any ID, it will call another Pop-up where we had shown that specific ID data that you have selected.

Have a good day! Thank you for reading. I hope you liked it.