Post
Ask Question

Open Another Gridview in Pop-up using Bootstrap Modal Pop-up

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>  
  15.                           
  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" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  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"/>  
  10.   
  11.     <!-- Optional theme -->  
  12.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>  
  13.   
  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>  
  48.                           
  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;  
  8.   
  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.     }  
  18.   
  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.         {  
  102.               
  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.


Similar Articles