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:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Add bootstrap CSS plugin
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

Then add the following plugin for optional theme:

<!-- Optional theme -->
<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:

<!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
After this I’ve added Bootstrap plugin for working with bootstrap-
<!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Add control on your page and your page looks like below-
div style="background-color:mediumaquamarine;">
            <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">
                <Columns>
                    <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />
                    <asp:BoundField DataField="Quantity" HeaderText="Quantity" />
                    <asp:BoundField DataField="Price" HeaderText="Price" />
                    <asp:TemplateField HeaderText="Show related">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>

Now the design looks as in the following:



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

 

<!-- this is bootstrp modal popup -->
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">Welcome in detail page</h4>
                    </div>
                    <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">
                        <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>
                        <asp:GridView ID="GridView2" runat="server"></asp:GridView>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>
                </div>
            </div>
        </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.

<asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>

Now your page looks as in the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewPopup.aspx.cs" Inherits="GridviewPopup" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <center>
        <div style="background-color:mediumaquamarine;">
            <asp:GridView ID="GridView1" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" runat="server">
                <Columns>
                    <asp:BoundField DataField="Product_Name" HeaderText="Product_Name" />
                    <asp:BoundField DataField="Quantity" HeaderText="Quantity" />
                    <asp:BoundField DataField="Price" HeaderText="Price" />
                    <asp:TemplateField HeaderText="Show related">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkdetail" href="#myModal" data-toggle="modal" runat="server">Show Data</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
        <!-- this is bootstrp modal popup -->
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">Welcome in detail page</h4>
                    </div>
                    <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;">
                        <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>
                        <asp:GridView ID="GridView2" runat="server"></asp:GridView>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>
                </div>
            </div>
        </div>
        </center>
        <!-- end -->
    </form>
</body>
</html>

On code behind page

Adding namespaces to the page:

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

Here I created a static data table for binding the Grid. Now the page looks as in:

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class GridviewPopup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridView1();
        }
    }

    protected void BindGridView1() {
        DataSet ds = new DataSet();
        DataTable dt;
        DataRow dr;
        DataColumn pName;
        DataColumn pQty;
        DataColumn pPrice;
        int i = 0;
        dt = new DataTable();
        pName = new DataColumn("Product_Name", Type.GetType("System.String"));
        pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
        pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
        dt.Columns.Add(pName);
        dt.Columns.Add(pQty);
        dt.Columns.Add(pPrice);
        dr = dt.NewRow();
        dr["Product_Name"] = "Product 1";
        dr["Quantity"] = 2;
        dr["Price"] = 200;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "Product 2";
        dr["Quantity"] = 5;
        dr["Price"] = 480;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "Product 3";
        dr["Quantity"] = 8;
        dr["Price"] = 100;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "Product 4";
        dr["Quantity"] = 2;
        dr["Price"] = 500;
        dt.Rows.Add(dr);
        ds.Tables.Add(dt);
        GridView1.DataSource = ds.Tables[0];
        GridView1.DataBind();
    }
//for pop-up gridview
    protected void BindGrid2() {
        DataSet ds = new DataSet();
        DataTable dt;
        DataRow dr;
        DataColumn pName;
        DataColumn pQty;
        DataColumn pPrice;
        int i = 0;
        dt = new DataTable();
        pName = new DataColumn("Product_Name", Type.GetType("System.String"));
        pQty = new DataColumn("Quantity", Type.GetType("System.Int32"));
        pPrice = new DataColumn("Price", Type.GetType("System.Int32"));
        dt.Columns.Add(pName);
        dt.Columns.Add(pQty);
        dt.Columns.Add(pPrice);
        dr = dt.NewRow();
        dr["Product_Name"] = "FMCG";
        dr["Quantity"] = 2;
        dr["Price"] = 200;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "Cold Drink";
        dr["Quantity"] = 5;
        dr["Price"] = 480;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "Biscuits";
        dr["Quantity"] = 8;
        dr["Price"] = 100;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr["Product_Name"] = "Mixture";
        dr["Quantity"] = 2;
        dr["Price"] = 500;
        dt.Rows.Add(dr);
        ds.Tables.Add(dt);
        GridView2.DataSource = ds.Tables[0];
        GridView2.DataBind();
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            string username = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "Product_Name"));
            LinkButton lnkbtnresult = (LinkButton)e.Row.FindControl("lnkdetail");
            BindGrid2();
        }
    }
}

Now the output looks as in:


Figure 1: On initial loading


Figure 2: On link button click

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