locked
Display child gridview row details RRS feed

Answers

  • User-1174608757 posted

    Hi kengkit,

    According to your description, I have made a sample here. I suggest that you could set the label text in gridview Rowcommand event because it is easy for us to find the index row. Else. what problem do you meet? Does it show any error on page? Or you could enter F12 in your browser to see if there exists any error in jquery.

    Here is a demo, I hope it could help you.

    Table City:

    Table details:

    In aspx:

    <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" />
       
        <script>
              function openModal() {
                        $("#myModal").modal("show");
                    } 
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" runat="server" DataKeyNames="Name" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <input id="Button1" type="button" value="detail" />
                                <asp:GridView ID="GridView2" runat="server" DataKeyNames="Name" AutoGenerateColumns="false" OnRowCommand="GridView2_RowCommand">
                                    <Columns>
                                        <asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:Label ID="Label3" runat="server" Text='<%#Eval("id") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:Label ID="Label4" runat="server" Text='<%#Eval("Age") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField>
                                           <ItemTemplate>
                                               <asp:Button ID="Button2" runat="server" Text="show on pop" CommandName="show" />
                                           </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
                        <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
                    </Columns>
                </asp:GridView>
    
    
    
            </div>
    
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            
                        </div>
                        <div class="modal-body">
                            <div>
                                <asp:Label ID="Label1" runat="server"></asp:Label>
                                <asp:Label ID="Label2" runat="server"></asp:Label>
                               
                            </div>
                        </div>
                       
                    </div>
                </div>
    </div>
    
        </form>
    </body>
    </html>
    

    aspx.vb

        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            If Not IsPostBack Then
                Dim sql As String = "select * from city"
                GridView1.DataSource = sqlhelper.ExecuteDataTable(sql)
                GridView1.DataBind()
            End If
        End Sub
    
        Protected Sub GridView2_RowCommand(sender As Object, e As GridViewCommandEventArgs)
            If e.CommandName = "show" Then
                Dim row As GridViewRow = CType(((CType(e.CommandSource, Control)).NamingContainer), GridViewRow)
                Label1.Text = (TryCast(row.FindControl("Label3"), Label)).Text
                Label2.Text = (TryCast(row.FindControl("Label4"), Label)).Text
                ClientScript.RegisterStartupScript(Page.GetType(), "Pop", "openModal();", True)
            End If
        End Sub
    
        Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs)
            If e.Row.RowType = DataControlRowType.DataRow Then
                Dim name As String = GridView1.DataKeys(e.Row.RowIndex).Value.ToString()
                Dim gvOrders As Gridview = TryCast(e.Row.FindControl("GridView2"), Gridview)
                gvOrders.DataSource = sqlhelper.ExecuteDataTable(String.Format("select  * from detail where name='{0}'", name))
                gvOrders.DataBind()
    
            End If
        End Sub
    
    End Class

    You could see as below:


    Best Regards

    Wei

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 10, 2019 9:21 AM