This shows a pop-up on a link button clicked inside a first grid and then open a second grid in a modal window of Bootstrap. With Bootstrap it is easy to design responsive sites. In this I’ve used the jQuery library and Bootstrap.

Background

I encountered an opportunity from the problem to show one grid view on a link button click in modal pop-up programmatically, so I wrote this article to help other developers.

Initial chamber

Step 1

Open your Visual Studio and create an empty website, provide a suitable name such as GridViewPopup.

Step 2

In Solution Explorer you get your empty website, then add web forms.

For Web Form

GridViewPopup (your empty website). Right-click and select Add New Item -> Web Form. Name it GridviewPopup.aspx.

Design chamber

Step 3

Open the GridviewPopup.aspx file and write some code for the design of the application.

First add the jQuery plugin in your head section. Here I used jquery-1.10.2.js plugin for demonstration purposes.

How to add in your page

In the head section of your web page:

  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  2. Add bootstrap CSS plugin
  3. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
Then add the following plugin for optional theme:
  1. <!-- Optional theme -->
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
After that I added the Bootstrap plugin to work with bootstrap as in the following:
  1. <!-- Optional theme -->
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
  3. After this I’ve added Bootstrap plugin for working with bootstrap-
  4. <!-- Latest compiled and minified JavaScript -->
  5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  6. Add control on your page and your page looks like below-
  7. div style="background-color:mediumaquamarine;">
  8. <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">
  9. <Columns>
  10. <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />
  11. <asp:BoundField DataField="Quantity" HeaderText="Quantity" />
  12. <asp:BoundField DataField="Price" HeaderText="Price" />
  13. <asp:TemplateField HeaderText="Show related">
  14. <ItemTemplate>
  15. <asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>
  16. </ItemTemplate>
  17. </asp:TemplateField>
  18. </Columns>
  19. </asp:GridView>
  20. </div>
Now the design looks as in the following:

design

Now add a GridView to be shown in a modal popup:

  1. <!-- this is bootstrp modal popup -->
  2. <div id="myModal" class="modal fade">
  3. <div class="modal-dialog">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  7. <h4 class="modal-title">Welcome in detail page</h4>
  8. </div>
  9. <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">
  10. <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>
  11. <asp:GridView ID="GridView2" runat="server"></asp:GridView>
  12. </div>
  13. <div class="modal-footer">
  14. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
Here I have taken a dive to show a GridView in a modal pop-up and that ID is myModal and in the link button URL I've called this ID to show it in a modal pop-up.
  1. <asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>
Now your page looks as in the following:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewPopup.aspx.cs" Inherits="GridviewPopup" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
  11. <!-- Optional theme -->
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
  14. <!-- Latest compiled and minified JavaScript -->
  15. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  16. </head>
  17. <body>
  18. <form id="form1" runat="server">
  19. <center>
  20. <div style="background-color:mediumaquamarine;">
  21. <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">
  22. <Columns>
  23. <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />
  24. <asp:BoundField DataField="Quantity" HeaderText="Quantity" />
  25. <asp:BoundField DataField="Price" HeaderText="Price" />
  26. <asp:TemplateField HeaderText="Show related">
  27. <ItemTemplate>
  28. <asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>
  29. </ItemTemplate>
  30. </asp:TemplateField>
  31. </Columns>
  32. </asp:GridView>
  33. </div>
  34. <!-- this is bootstrp modal popup -->
  35. <div id="myModal" class="modal fade">
  36. <div class="modal-dialog">
  37. <div class="modal-content">
  38. <div class="modal-header">
  39. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  40. <h4 class="modal-title">Welcome in detail page</h4>
  41. </div>
  42. <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">
  43. <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>
  44. <asp:GridView ID="GridView2" runat="server"></asp:GridView>
  45. </div>
  46. <div class="modal-footer">
  47. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </center>
  54. <!-- end -->
  55. </form>
  56. </body>
  57. </html>
On code behind page

Adding namespaces to the page:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
Here I created a static data table for binding the Grid. Now the page looks as in:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  9. public partial class GridviewPopup : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. if (!IsPostBack)
  14. {
  15. BindGridView1();
  16. }
  17. }
  19. protected void BindGridView1() {
  20. DataSet ds = new DataSet();
  21. DataTable dt;
  22. DataRow dr;
  23. DataColumn pName;
  24. DataColumn pQty;
  25. DataColumn pPrice;
  26. int i = 0;
  27. dt = new DataTable();
  28. pName = new DataColumn("Product_Name", Type.GetType("System.String"));
  29. pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
  30. pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
  31. dt.Columns.Add(pName);
  32. dt.Columns.Add(pQty);
  33. dt.Columns.Add(pPrice);
  34. dr = dt.NewRow();
  35. dr["Product_Name"] = "Product 1";
  36. dr["Quantity"] = 2;
  37. dr["Price"] = 200;
  38. dt.Rows.Add(dr);
  39. dr = dt.NewRow();
  40. dr["Product_Name"] = "Product 2";
  41. dr["Quantity"] = 5;
  42. dr["Price"] = 480;
  43. dt.Rows.Add(dr);
  44. dr = dt.NewRow();
  45. dr["Product_Name"] = "Product 3";
  46. dr["Quantity"] = 8;
  47. dr["Price"] = 100;
  48. dt.Rows.Add(dr);
  49. dr = dt.NewRow();
  50. dr["Product_Name"] = "Product 4";
  51. dr["Quantity"] = 2;
  52. dr["Price"] = 500;
  53. dt.Rows.Add(dr);
  54. ds.Tables.Add(dt);
  55. GridView1.DataSource = ds.Tables[0];
  56. GridView1.DataBind();
  57. }
  58. //for pop-up gridview
  59. protected void BindGrid2() {
  60. DataSet ds = new DataSet();
  61. DataTable dt;
  62. DataRow dr;
  63. DataColumn pName;
  64. DataColumn pQty;
  65. DataColumn pPrice;
  66. int i = 0;
  67. dt = new DataTable();
  68. pName = new DataColumn("Product_Name", Type.GetType("System.String"));
  69. pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
  70. pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
  71. dt.Columns.Add(pName);
  72. dt.Columns.Add(pQty);
  73. dt.Columns.Add(pPrice);
  74. dr = dt.NewRow();
  75. dr["Product_Name"] = "FMCG";
  76. dr["Quantity"] = 2;
  77. dr["Price"] = 200;
  78. dt.Rows.Add(dr);
  79. dr = dt.NewRow();
  80. dr["Product_Name"] = "Cold Drink";
  81. dr["Quantity"] = 5;
  82. dr["Price"] = 480;
  83. dt.Rows.Add(dr);
  84. dr = dt.NewRow();
  85. dr["Product_Name"] = "Biscuits";
  86. dr["Quantity"] = 8;
  87. dr["Price"] = 100;
  88. dt.Rows.Add(dr);
  89. dr = dt.NewRow();
  90. dr["Product_Name"] = "Mixture";
  91. dr["Quantity"] = 2;
  92. dr["Price"] = 500;
  93. dt.Rows.Add(dr);
  94. ds.Tables.Add(dt);
  95. GridView2.DataSource = ds.Tables[0];
  96. GridView2.DataBind();
  97. }
  98. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  99. {
  100. if (e.Row.RowType == DataControlRowType.DataRow)
  101. {
  103. string username = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "Product_Name"));
  104. LinkButton lnkbtnresult = (LinkButton)e.Row.FindControl("lnkdetail");
  105. BindGrid2();
  106. }
  107. }
  108. }
Now the output looks as in:

gridview
Figure 1: On initial loading

On link button click
Figure 2: On link button click

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