ASP.NET

How to Open a GridView in a Modal Pop-Up on another Gridview

Introduction

This blog demonstrate how to open a GridView in a modal pop-up on another GridView link button clicked using bootstrap. This shows  a pop-up on link button clicked inside first grid and then open second grid in a modal-popup of bootstrap. Bootstrap is easy to design responsive sites. In this I’ve used jQuery library and Bootstrap.

Background

I got an opportunity from a problem to show one gridview on linkbutton click in modal pop-up programmatically, so wrote this blog for helping some other developer.

Add library in your design page inside the head section. You can also download this in your code file and add in your solution as well:

  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  3.     <!-- Optional theme -->  
  4.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
  5.         <!-- Latest compiled and minified JavaScript -->  
  6.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Design your page like the following:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">  
  5.                 <Columns>  
  6.                     <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />  
  7.                     <asp:BoundField DataField="Quantity" HeaderText="Quantity" />  
  8.                     <asp:BoundField DataField="Price" HeaderText="Price" />  
  9.                     <asp:TemplateField HeaderText="Show related">  
  10.                         <ItemTemplate>  
  11.                             <asp:LinkButton ID="lnkdelete" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>  
  12.                         </ItemTemplate>  
  13.                     </asp:TemplateField>  
  14.                 </Columns>  
  15.             </asp:GridView>  
  16.         </div>  
  17.         <!-- this is bootstrp modal popup -->  
  18.         <div id="myModal" class="modal fade">  
  19.             <div class="modal-dialog">  
  20.                 <div class="modal-content">  
  21.                     <div class="modal-header">  
  22.                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
  23.                         <h4 class="modal-title">Article for C# Corner</h4>  
  24.                     </div>  
  25.                     <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">  
  26.                         <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>  
  27.                         <asp:GridView ID="GridView2" runat="server"></asp:GridView>  
  28.                     </div>  
  29.                     <div class="modal-footer">  
  30.                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
  31.                     </div>  
  32.                 </div>  
  33.             </div>  
  34.         </div>  
  35.         <!-- end -->  
  36.     </form>  
  37. </body>
Now go to code behind page and put this in namespace section
  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. //then write below code-  
  10.   
  11. protected void BindGridView1() {  
  12.     DataSet ds = new DataSet();  
  13.     DataTable dt;  
  14.     DataRow dr;  
  15.     DataColumn pName;  
  16.     DataColumn pQty;  
  17.     DataColumn pPrice;  
  18.     int i = 0;  
  19.     dt = new DataTable();  
  20.     pName = new DataColumn("Product_Name", Type.GetType("System.String"));  
  21.     pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));  
  22.     pPrice = new DataColumn("Price", Type.GetType("System.Int32"));  
  23.     dt.Columns.Add(pName);  
  24.     dt.Columns.Add(pQty);  
  25.     dt.Columns.Add(pPrice);  
  26.     dr = dt.NewRow();  
  27.     dr["Product_Name"] = "Product 1";  
  28.     dr["Quantity"] = 2;  
  29.     dr["Price"] = 200;  
  30.     dt.Rows.Add(dr);  
  31.     dr = dt.NewRow();  
  32.     dr["Product_Name"] = "Product 2";  
  33.     dr["Quantity"] = 5;  
  34.     dr["Price"] = 480;  
  35.     dt.Rows.Add(dr);  
  36.     dr = dt.NewRow();  
  37.     dr["Product_Name"] = "Product 3";  
  38.     dr["Quantity"] = 8;  
  39.     dr["Price"] = 100;  
  40.     dt.Rows.Add(dr);  
  41.     dr = dt.NewRow();  
  42.     dr["Product_Name"] = "Product 4";  
  43.     dr["Quantity"] = 2;  
  44.     dr["Price"] = 500;  
  45.     dt.Rows.Add(dr);  
  46.     ds.Tables.Add(dt);  
  47.     GridView1.DataSource = ds.Tables[0];  
  48.     GridView1.DataBind();  
  49. }  
  50. protected void BindGrid2() {  
  51.     DataSet ds = new DataSet();  
  52.     DataTable dt;  
  53.     DataRow dr;  
  54.     DataColumn pName;  
  55.     DataColumn pQty;  
  56.     DataColumn pPrice;  
  57.     int i = 0;  
  58.     dt = new DataTable();  
  59.     pName = new DataColumn("Product_Name", Type.GetType("System.String"));  
  60.     pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));  
  61.     pPrice = new DataColumn("Price", Type.GetType("System.Int32"));  
  62.     dt.Columns.Add(pName);  
  63.     dt.Columns.Add(pQty);  
  64.     dt.Columns.Add(pPrice);  
  65.     dr = dt.NewRow();  
  66.     dr["Product_Name"] = "FMCG";  
  67.     dr["Quantity"] = 2;  
  68.     dr["Price"] = 200;  
  69.     dt.Rows.Add(dr);  
  70.     dr = dt.NewRow();  
  71.     dr["Product_Name"] = "Cold Drink";  
  72.     dr["Quantity"] = 5;  
  73.     dr["Price"] = 480;  
  74.     dt.Rows.Add(dr);  
  75.     dr = dt.NewRow();  
  76.     dr["Product_Name"] = "Biscuits";  
  77.     dr["Quantity"] = 8;  
  78.     dr["Price"] = 100;  
  79.     dt.Rows.Add(dr);  
  80.     dr = dt.NewRow();  
  81.     dr["Product_Name"] = "Mixture";  
  82.     dr["Quantity"] = 2;  
  83.     dr["Price"] = 500;  
  84.     dt.Rows.Add(dr);  
  85.     ds.Tables.Add(dt);  
  86.     GridView2.DataSource = ds.Tables[0];  
  87.     GridView2.DataBind();  
  88. }  
  89. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {  
  90.     if (e.Row.RowType == DataControlRowType.DataRow) {  
  91.   
  92.         string username = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "Product_Name"));  
  93.         LinkButton lnkbtnresult = (LinkButton) e.Row.FindControl("lnkdelete");  
  94.         BindGrid2();  
  95.     }  
  96. }
Now your page looks like the following:

Design Page-
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewPopup.aspx.cs" Inherits="GridviewPopup" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  9.             <!-- Optional theme -->  
  10.             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
  11.                 <!-- Latest compiled and minified JavaScript -->  
  12.                 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  13.             </head>  
  14.             <body>  
  15.                 <form id="form1" runat="server">  
  16.                     <div>  
  17.                         <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">  
  18.                             <Columns>  
  19.                                 <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />  
  20.                                 <asp:BoundField DataField="Quantity" HeaderText="Quantity" />  
  21.                                 <asp:BoundField DataField="Price" HeaderText="Price" />  
  22.                                 <asp:TemplateField HeaderText="Show related">  
  23.                                     <ItemTemplate>  
  24.                                         <asp:LinkButton ID="lnkdelete" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>  
  25.                                     </ItemTemplate>  
  26.                                 </asp:TemplateField>  
  27.                             </Columns>  
  28.                         </asp:GridView>  
  29.                     </div>  
  30.                     <!-- this is bootstrp modal popup -->  
  31.                     <div id="myModal" class="modal fade">  
  32.                         <div class="modal-dialog">  
  33.                             <div class="modal-content">  
  34.                                 <div class="modal-header">  
  35.                                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
  36.                                     <h4 class="modal-title">Article for C# Corner</h4>  
  37.                                 </div>  
  38.                                 <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">  
  39.                                     <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>  
  40.                                     <asp:GridView ID="GridView2" runat="server"></asp:GridView>  
  41.                                 </div>  
  42.                                 <div class="modal-footer">  
  43.                                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
  44.                                 </div>  
  45.                             </div>  
  46.                         </div>  
  47.                     </div>  
  48.                     <!-- end -->  
  49.                 </form>  
  50.             </body>  
  51.         </html>  
Your Code file-
  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.     protected void Page_Load(object sender, EventArgs e) {  
  11.         if (!IsPostBack) {  
  12.             BindGridView1();  
  13.         }  
  14.     }  
  15.   
  16.     protected void BindGridView1() {  
  17.         DataSet ds = new DataSet();  
  18.         DataTable dt;  
  19.         DataRow dr;  
  20.         DataColumn pName;  
  21.         DataColumn pQty;  
  22.         DataColumn pPrice;  
  23.         int i = 0;  
  24.         dt = new DataTable();  
  25.         pName = new DataColumn("Product_Name", Type.GetType("System.String"));  
  26.         pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));  
  27.         pPrice = new DataColumn("Price", Type.GetType("System.Int32"));  
  28.         dt.Columns.Add(pName);  
  29.         dt.Columns.Add(pQty);  
  30.         dt.Columns.Add(pPrice);  
  31.         dr = dt.NewRow();  
  32.         dr["Product_Name"] = "Product 1";  
  33.         dr["Quantity"] = 2;  
  34.         dr["Price"] = 200;  
  35.         dt.Rows.Add(dr);  
  36.         dr = dt.NewRow();  
  37.         dr["Product_Name"] = "Product 2";  
  38.         dr["Quantity"] = 5;  
  39.         dr["Price"] = 480;  
  40.         dt.Rows.Add(dr);  
  41.         dr = dt.NewRow();  
  42.         dr["Product_Name"] = "Product 3";  
  43.         dr["Quantity"] = 8;  
  44.         dr["Price"] = 100;  
  45.         dt.Rows.Add(dr);  
  46.         dr = dt.NewRow();  
  47.         dr["Product_Name"] = "Product 4";  
  48.         dr["Quantity"] = 2;  
  49.         dr["Price"] = 500;  
  50.         dt.Rows.Add(dr);  
  51.         ds.Tables.Add(dt);  
  52.         GridView1.DataSource = ds.Tables[0];  
  53.         GridView1.DataBind();  
  54.     }  
  55.     protected void BindGrid2() {  
  56.         DataSet ds = new DataSet();  
  57.         DataTable dt;  
  58.         DataRow dr;  
  59.         DataColumn pName;  
  60.         DataColumn pQty;  
  61.         DataColumn pPrice;  
  62.         int i = 0;  
  63.         dt = new DataTable();  
  64.         pName = new DataColumn("Product_Name", Type.GetType("System.String"));  
  65.         pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));  
  66.         pPrice = new DataColumn("Price", Type.GetType("System.Int32"));  
  67.         dt.Columns.Add(pName);  
  68.         dt.Columns.Add(pQty);  
  69.         dt.Columns.Add(pPrice);  
  70.         dr = dt.NewRow();  
  71.         dr["Product_Name"] = "FMCG";  
  72.         dr["Quantity"] = 2;  
  73.         dr["Price"] = 200;  
  74.         dt.Rows.Add(dr);  
  75.         dr = dt.NewRow();  
  76.         dr["Product_Name"] = "Cold Drink";  
  77.         dr["Quantity"] = 5;  
  78.         dr["Price"] = 480;  
  79.         dt.Rows.Add(dr);  
  80.         dr = dt.NewRow();  
  81.         dr["Product_Name"] = "Biscuits";  
  82.         dr["Quantity"] = 8;  
  83.         dr["Price"] = 100;  
  84.         dt.Rows.Add(dr);  
  85.         dr = dt.NewRow();  
  86.         dr["Product_Name"] = "Mixture";  
  87.         dr["Quantity"] = 2;  
  88.         dr["Price"] = 500;  
  89.         dt.Rows.Add(dr);  
  90.         ds.Tables.Add(dt);  
  91.         GridView2.DataSource = ds.Tables[0];  
  92.         GridView2.DataBind();  
  93.     }  
  94.     protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {  
  95.         if (e.Row.RowType == DataControlRowType.DataRow) {  
  96.   
  97.             string username = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "Product_Name"));  
  98.             LinkButton lnkbtnresult = (LinkButton) e.Row.FindControl("lnkdelete");  
  99.             BindGrid2();  
  100.         }  
  101.     }  
  102. }
Output:


Figure 1: Output 1


Figure 2: Output 2

Important points:
  • You have learned here how to show the modal pop-up using BootStrap and ASP.NET.
  • You have learned how to show other grid inside a grid using link-button.
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs