Display nested GridView row details in Bootstrap modal popup on LinkButton Click using C# and VB.Net in ASP.Net

counterkin
 
on Sep 30, 2021 11:32 PM
Sample_984209.zip
635 Views

Hi,

I have modified a bit to the code by referring the following URL: 

Display GridView row details in Bootstrap modal popup on LinkButton click using C# and VB.Net in ASP.Net

I want to show nested gridview row details and update it accordingly.

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" CssClass="table table-sorting table-hover table-bordered datatable" DataKeyNames="student_Id" AutoGenerateColumns="false" GridLines="None">
            <Columns>
                <asp:TemplateField HeaderText="Admission No">
                    <ItemTemplate>
                        <asp:GridView ID="GridView2" runat="server" CssClass="table table-sorting table-hover table-bordered datatable" DataKeyNames="phone" AutoGenerateColumns="false" GridLines="None">
                            <Columns>
                                <asp:TemplateField HeaderText="Phone No">
                                    <ItemTemplate>
                                        <asp:Label ID="lblPhone" runat="server" Text='<%# Eval("phone") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Pay">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Pay Now" CssClass="btn btn-info" OnClick="Display"></asp:LinkButton>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Admission No">
                    <ItemTemplate>
                        <asp:Label ID="lblstudent_Id" runat="server" Text='<%# Eval("student_Id") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Month">
                    <ItemTemplate>
                        <asp:Label ID="lblMonth_Name" runat="server" Text='<%# Eval("Month_Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Amount">
                    <ItemTemplate>
                        <asp:Label ID="lblAmount" runat="server" Text='<%# Eval("Amount") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="IsPaid">
                    <ItemTemplate>
                        <asp:Label ID="lblIsPaid" runat="server" Text='<%# Eval("IsPaid") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="date">
                    <ItemTemplate>
                        <asp:Label ID="lbldate" runat="server" Text='<%# Eval("date") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <div>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Student Fee Details</h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                            <div class="form-group">
                                <asp:Label ID="lblstudent" runat="server" Text="Admission No: "></asp:Label>
                                <asp:Label ID="lblstudentid" runat="server" Text=""></asp:Label>
                            </div>
                            <div class="form-group">
                                <asp:Label ID="lblPhone" runat="server" Text="Phone No"></asp:Label>
                                <asp:TextBox ID="txtPhone" runat="server" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnSave" runat="server" Text="Pay" OnClick="btnSave_Click" CssClass="btn btn-info" />
                        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
            <script type='text/javascript'>
                function openModal() {
                    $('[id*=myModal]').modal('show');
                } 
            </script>
        </div>
    </div>
    </form>
</body>
</html>

 Code Behind:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn() {New DataColumn("student_Id"), New DataColumn("Month_Name"), New DataColumn("Amount"), New DataColumn("IsPaid"), New DataColumn("date")})
            dt.Rows.Add(1, "Jan", 5200, "Yes", DateTime.Now.AddDays(-263))
            dt.Rows.Add(2, "Feb", 6500, "No", DateTime.Now.AddDays(-50))
            dt.Rows.Add(3, "Mar", 7500, "", "")
            dt.Rows.Add(4, "Apr", 6333, "No", DateTime.Now.AddDays(-63))
            dt.Rows.Add(5, "Jun", 15000, "Yes", DateTime.Now.AddDays(-93))
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub

    Protected Sub Display(ByVal sender As Object, ByVal e As EventArgs)
        Dim rowIndex As Integer = Convert.ToInt32(TryCast(TryCast(sender, LinkButton).NamingContainer, GridViewRow).RowIndex)
        Dim row As GridViewRow = GridView1.Rows(rowIndex) 'How to find GridView2?
        txtPhone.Text = TryCast(row.FindControl("lblPhone"), Label).Text
        ClientScript.RegisterStartupScript(Me.[GetType](), "Pop", "openModal();", True)
    End Sub

    Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)
        'Your Saving code.
    End Sub

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim GridView2 As GridView = TryCast(e.Row.FindControl("GridView2"), GridView)
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn() {New DataColumn("phone")})
            dt.Rows.Add(RandomInteger(100000000, 999999999))

            GridView2.DataSource = dt
            GridView2.DataBind()
        End If
    End Sub

    Public Function RandomInteger(ByVal LowerBoundary As Integer, ByVal UpperBoundary As Integer) As Integer
        Randomize()    'Initialize the random-number generator
        RandomInteger = (Rnd() * (UpperBoundary - LowerBoundary)) + LowerBoundary
    End Function

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 01, 2021 06:00 AM

Hi counterkin,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div>
    <asp:GridView ID="gvCustomers" runat="server" CssClass="table table-sorting table-hover table-bordered datatable" DataKeyNames="CustomerID"
        AutoGenerateColumns="false" GridLines="None" OnRowDataBound="OnRowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="Admission No">
                <ItemTemplate>
                    <asp:GridView ID="gvOrders" runat="server" CssClass="table table-sorting table-hover table-bordered datatable" DataKeyNames="OrderId"
                        AutoGenerateColumns="false" GridLines="None">
                        <Columns>
                            <asp:TemplateField HeaderText="Phone No">
                                <ItemTemplate>
                                    <asp:Label ID="lblOrderId" runat="server" Text='<%# Eval("OrderId") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Pay">
                                <ItemTemplate>
                                    <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Pay Now" CssClass="btn btn-info" OnClick="Display"></asp:LinkButton>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Id">
                <ItemTemplate>
                    <asp:Label ID="lblId" runat="server" Text='<%# Eval("CustomerID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:Label ID="lblName" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="City">
                <ItemTemplate>
                    <asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Country">
                <ItemTemplate>
                    <asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<div>
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Details</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <asp:Label ID="lblOrderID" runat="server" Text="OrderID"></asp:Label>
                        <asp:TextBox ID="txtOrderID" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btnSave" runat="server" Text="Pay" OnClick="btnSave_Click" CssClass="btn btn-info" />
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
        <script type='text/javascript'>
            function openModal() {
                $('[id*=myModal]').modal('show');
            }
        </script>
    </div>
</div>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        if (!IsPostBack)
        {
            gvCustomers.DataSource = GetData("SELECT TOP 2 * FROM Customers");
            gvCustomers.DataBind();
        }
    }
}

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string customerId = gvCustomers.DataKeys[e.Row.RowIndex].Value.ToString();
        GridView gvOrders = e.Row.FindControl("gvOrders") as GridView;
        gvOrders.DataSource = GetData(string.Format("SELECT TOP 2 * FROM Orders WHERE CustomerID='{0}'", customerId));
        gvOrders.DataBind();
    }
}

private static DataTable GetData(string query)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = query;
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                DataTable dt = new DataTable();
                sda.Fill(dt);
                return dt;
            }
        }
    }
}

protected void Display(object sender, EventArgs e)
{
    GridViewRow rowOrder = (sender as LinkButton).NamingContainer as GridViewRow;
    txtOrderID.Text = (rowOrder.FindControl("lblOrderId") as Label).Text;
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}

protected void btnSave_Click(object sender, EventArgs e)
{
    //Your Saving code.
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        If Not IsPostBack Then
            gvCustomers.DataSource = GetData("SELECT TOP 2 * FROM Customers")
            gvCustomers.DataBind()
        End If
    End If
End Sub

Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim customerId As String = gvCustomers.DataKeys(e.Row.RowIndex).Value.ToString()
        Dim gvOrders As GridView = TryCast(e.Row.FindControl("gvOrders"), GridView)
        gvOrders.DataSource = GetData(String.Format("SELECT TOP 2 * FROM Orders WHERE CustomerID='{0}'", customerId))
        gvOrders.DataBind()
    End If
End Sub

Private Shared Function GetData(ByVal query As String) As DataTable
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(strConnString)
        Using cmd As SqlCommand = New SqlCommand()
            cmd.CommandText = query
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

Protected Sub Display(ByVal sender As Object, ByVal e As EventArgs)
    Dim rowOrder As GridViewRow = TryCast((TryCast(sender, LinkButton)).NamingContainer, GridViewRow)
    txtOrderID.Text = TryCast(rowOrder.FindControl("lblOrderId"), Label).Text
    ClientScript.RegisterStartupScript(Me.GetType(), "Pop", "openModal();", True)
End Sub

Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub

Screenshot