Hum, I don't think you should try nesting gridview in gridview.

The problem is that GridView does not support "row span" like a list view does.

When you expand that GridView, it going to try and fit in ONE column.

so the grid might look like this:

So I have the + sign to expand/show a nested gridview, and I will get this:

(expanding in this example shows people booked in hotel)

you get this effect:

Now you might with extra hammers, saws, nails and hammering away at this get the gridview to expand and appear BELOW the row.

But, GridView does not support well (if at all) the ability to have a multi-line row.

However, listview does. So you could well keep your nested (child) gridview, and drop that into a ListView.

So, the listview will (should/can) look quite much the same. Say like this:

But, I can have the nested control (gridview) take up a WHOLE row, so when I expand this in the listview, I get this:

As you can see, this looks much better. And I don't have to fight the system and latyouts - it works a lot better.

So, here is my ListView markup:

    <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" >

       <ItemTemplate>
          <tr style="">
            <td><asp:Button ID="cmdView" runat="server" Text="+" CommandName="Select" /></td>
            <td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
            <td><asp:Label ID="CityLabel" runat="server" Text='<%# Eval("City") %>' /></td>
            <td><asp:Label ID="ProvinceLabel" runat="server" Text='<%# Eval("Province") %>' /></td>
            <td><asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' /></td>
          </tr>

          <tr>
            <td colspan="5">
               <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
                 DataKeyNames="ID" CssClass="table table-hover" style="display:none"  >
                    <Columns>
                        <asp:BoundField DataField="Firstname" HeaderText="Firstname" SortExpression="Firstname" />
                        <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
                        <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                    </Columns>
                </asp:GridView>

            </td>
           </tr>

           </ItemTemplate>

       <LayoutTemplate>
        <table id="itemPlaceholderContainer" runat="server" Class = "table table-hover" >
            <tr runat="server" style="">
                <th runat="server">View</th>
                <th runat="server">HotelName</th>
                <th runat="server">City</th>
                <th runat="server">Province</th>
                <th runat="server">Description</th>
            </tr>
            <tr id="itemPlaceholder" runat="server">
            </tr>
         </table>
       </LayoutTemplate>
    </asp:ListView>

If you look close, we have the FIRST "tr" (table row) that is the repeating rows.

I then added that extra row - gave it a col span = 5 (so it takes up one row

So the code that drives this. Including the + button. And if you hit + again, then I collapse (hide the gridview).

So, code looks like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()

    Dim strSQL As String

    strSQL = "SELECT * FROM tblHotels ORDER BY HotelName"

    Using cmdSQL As New SqlCommand(strSQL, New SqlConnection(My.Settings.TEST4))

        cmdSQL.Connection.Open()

        ListView1.DataSource = cmdSQL.ExecuteReader
        ListView1.DataBind()

    End Using

End Sub

So that displays our grid. of course we have the "+" button, and that simply loads up the grid for the given row, and turns the style (display) = normal.

that code is this:

Protected Sub ListView1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ListView1.SelectedIndexChanged

    Dim gVR As ListViewDataItem = ListView1.Items(ListView1.SelectedIndex)
    Dim gChild As GridView = gVR.FindControl("GridView2")   ' pluck out the grid for this row

    If gChild.Style("display") = "normal" Then
        ' if grid is already display, then hide it, and exit
        gChild.Style("display") = "none"
        Exit Sub
    End If

    gChild.Style("display") = "normal"
    Dim HotelPK As String = ListView1.DataKeys(gVR.DataItemIndex).Item("ID")

    Dim strSQL As String
    strSQL = "SELECT * from People where hotel_id = " & HotelPK

    Using cmdSQL As New SqlCommand(strSQL, New SqlConnection(My.Settings.TEST4))

        cmdSQL.Connection.Open()
        gChild.DataSource = cmdSQL.ExecuteReader
        gChild.DataBind()

    End Using

End Sub

Protected Sub ListView1_SelectedIndexChanging(sender As Object, e As ListViewSelectEventArgs) Handles ListView1.SelectedIndexChanging

End Sub

Not a lot of code, and we get a great looking drill down, and even toggle to show, hide.

I really suggest you move this to a ListView for the parent. The child can remain a gridView, or just about anything else.

And notice how MUCH nicer the listView is - you can just drag + drop in regular controls - you do NOT need to use Templated columns over and over and over like you do with GridView.

for most simple grids - or ones with not too much customing, then GridView is quite nice.

But, when you have LOTS of custom controls and you need a LOT of fancy things, and more felxiblity? Then you have to get the big guns out and start using the ListView.

A listview tends to be a "wee bit" more markup to start out with, but since it has near un-limited flexbility, then for a complex cool and amazing grid control, then listView is much more up to the challenge, and has quite a bit more flexlbility in layout.

and the one big feature of the ListView is that ability to have multiple ROWS of layout for one data record - this tends to be REALLY hard with GridView. ListView lets you have "more" then one row of details for each reocrd, and has that valuable colspan (and it even have rowspan).

So for just ONE row of controls, then GridView is fine, but the instant you want more then JUST columns of data, then ListView is the ticket here.

Edit: Add row edit to this child grid

Ok, so we have this code to load up our main List view

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()
    Dim strSQL As String

    strSQL = "SELECT * FROM tblHotels WHERE ID in (select hotel_Id from People)
             ORDER BY HotelName"

    ListView1.DataSource = MyRst(strSQL)
    ListView1.DataBind()

End Sub

And we have our expand + show child gv as this code:

Protected Sub cmdView_Click(sender As Object, e As EventArgs)

    Dim cmd As Button = sender

    'Dim gVR As ListViewDataItem = ListView1.Items(ListView1.SelectedIndex)
    Dim gVR As ListViewDataItem = cmd.Parent
    Dim gChild As GridView = gVR.FindControl("GridView2")   ' pluck out the grid for this row

    If gChild.Style("display") = "normal" Then
        ' if grid is already display, then hide it, and exit
        gChild.Style("display") = "none"
        Exit Sub
    End If

    gChild.Style("display") = "normal"
    Dim HotelPK As String = ListView1.DataKeys(gVR.DataItemIndex).Item("ID")

    ' only re-load if never loaded (can't re-load else blow out check boxes

    If gChild.Rows.Count = 0 Then
        Dim strSQL As String
        strSQL = "SELECT * from People where hotel_id = " & HotelPK
        gChild.DataSource = MyRst(strSQL)
        gChild.DataBind()

    End If

End Sub

Ok, so now we need to add to the child grid a edit button.

We can drop in a plane jane asp.net button. But I going to drop in a LinkButton - since they can with ease ALSO use bootstrap icons - they look better.

So, in our child GV markup, we add this:

                        <asp:BoundField DataField="City" HeaderText="City"           />
                        <asp:TemplateField HeaderText="Edit" HeaderStyle-Width="140px"
                            ItemStyle-HorizontalAlign="Center" >
                            <ItemTemplate>

                    <asp:LinkButton ID="cmdEdit" runat="server" CssClass="btn btn-default"
                        OnClick="cmdEdit_Click">
                    <span aria-hidden="true" class="glyphicon glyphicon-edit"></span>
                    </asp:LinkButton>

                    <asp:LinkButton ID="cmdDelete" runat="server" CssClass="btn btn-default"
                        style="margin-left:8px" >
                    <span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
                        
                    </asp:LinkButton>

                </ItemTemplate>
            </asp:TemplateField>
           </Columns>
         </asp:GridView>

So, I just dropped in two buttons - and I stuff them BOTH into the one template column. So, what we have so far is now this:

(I expand a row)

So, we have a edit button, and a delete button.

So, we need to build a "div" for the pop up. That just some simple markup in a div that lets us edit the row.

This div can be placed below the List view - it is outside of both the LV and the nested LV - it is just plane jane 100% markup.

I have this:

<div id="myedit" style="float:left;width:20%">
    <div style="text-align:right">
        <p>First Name :<asp:TextBox ID="txtFirstname" runat="server" Width="150"></asp:TextBox> </p>
        <p>Last Name :<asp:TextBox ID="txtLastname" runat="server" Width="150"></asp:TextBox> </p>
        <p>City  :<asp:TextBox ID="txtCity" runat="server" Width="150"></asp:TextBox> </p>
        <p>Active :<asp:CheckBox ID="Active" runat="server" Width="150"></asp:CheckBox> </p>
        <br />
    </div>
    <div style="text-align:right">
        Notes :
        <asp:TextBox ID="txtNotes" runat="server" Width="240px" TextMode="MultiLine" Height="71px"></asp:TextBox> <br />
        <br />
        <asp:Button ID="cmdSave" runat="server" Text="Save" CssClass="btn" Width="90px"
             />
        <asp:Button ID="cmdCancel" runat="server" Text="Cancel" cssclass="btn" Width="90px"
          OnClientClick="$('#myedit').dialog('close');return false;" style="margin-left:8px"  />
    </div>
</div>

And when rendered on the page, it looks like this:

So, the first challenge? We need a dialog system. There are BOATLOADS. But, two most common are bootstrap, and jQuery.UI.

I find the bootstrap dialogs LOOK really nice. but they are a pain to work with.

So, we going to bite the bullet here. You no doubt are using and have jQuery in your web site - (don't they all now???).

So, you have to add and adopt jQuery.UI. It is a small js library, but I HIGH recommend you adopt it - it just works and allows you to now introduce popup dialogs. This is REALLY nice - and we even use for the delete button (confirm dialog).

So, lay out the div for the one row edit.

We THEN hide the div with style="display:none".

And we have ONE client side script routine - this routine ONLY job is to pop that dialog.

So, we now have this:

 <div id="myedit" style="float:left;width:20%;display:none">
    <div style="text-align:right">
        <p>First Name :<asp:TextBox ID="txtFirstname" runat="server" Width="150"></asp:TextBox> </p>
        <p>Last Name :<asp:TextBox ID="txtLastname" runat="server" Width="150"></asp:TextBox> </p>
        <p>City  :<asp:TextBox ID="txtCity" runat="server" Width="150"></asp:TextBox> </p>
        <p>Active :<asp:CheckBox ID="Active" runat="server" Width="150"></asp:CheckBox> </p>
        <br />
    </div>
    <div style="text-align:right">
        Notes :
        <asp:TextBox ID="txtNotes" runat="server" Width="240px" TextMode="MultiLine" Height="71px"></asp:TextBox> <br />
        <br />
        <asp:Button ID="cmdSave" runat="server" Text="Save" CssClass="btn" Width="90px"
             />
        <asp:Button ID="cmdCancel" runat="server" Text="Cancel" cssclass="btn" Width="90px"
          OnClientClick="$('#myedit').dialog('close');return false;" style="margin-left:8px"  />
    </div>
</div>
        <script>
            function MyEdit() {
                // pop the div dialog to edit
                var myDialog = $("#myedit");
                myDialog.dialog({
                    modal: true,
                    width: "280px",
                    resizable: false,
                    appendTo: "form",
                    autoOpen: false
                });
                myDialog.dialog('open');
            }
        </script>

So, we add jQuery.ui to this page. My setup looks like this:

<head runat="server">
<title></title>

<script src="Scripts/jquery-1.12.4.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />

<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui-1.12.1.js"></script>

Now, we COULD adopt a bunch of fancy pants client side code. But to keep this simple?

Everything ELSE from now on is CLEAN EASY pure server side code. I suppose over time, you can ajax the dialog - introduce some web method calls - but it can be quite a bit of extra work - and we don't need to do that.

Ok, so first part:

We need to wire up the event click button in the GV "edit" button. We can't just simple double click on the button to create a click event. (because it is nested in lv and gv). So, from markup, for the edit button we go to markup, and type in on-click, and NOTE VERY VERY cool how we are offered to create that simple code behind click event.

eg this:

So, choose create new event - it don't seem like anything occures, but flip to code behind, and we have our code behind click stub.

In this edit button?

We get the gv row, pull data from database. shove values into our cool edit div, and then pop the dialog.

that code is now this:

Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)
    ' nested grid eit button.

    Dim cmdEdit As LinkButton = sender
    Dim gRow As GridViewRow = cmdEdit.NamingContainer
    Dim GV As GridView = gRow.NamingContainer
    Dim PkID As Integer = GV.DataKeys(gRow.RowIndex).Item("ID")

    Dim strSQL As String = "SELECT * from People WHERE ID = " & PkID

    Dim rstData As DataTable = MyRst(strSQL)

    ' load up our edit div
    With rstData.Rows(0)
        txtFirstname.Text = .Item("FirstName").ToString
        txtLastname.Text = .Item("LastName").ToString
        txtCity.Text = .Item("City").ToString
        If IsDBNull(.Item("Active")) Then
            Active.Checked = False
        Else
            Active.Checked = .Item("Active")
        End If
        txtNotes.Text = .Item("Notes").ToString
    End With

    Session("RowPK") = PkID
    ' save current list view row
    Dim LV As ListViewItem = GV.NamingContainer
    Session("LvRow") = LV.DataItemIndex

    ' now pop the dialog
    Page.ClientScript.RegisterStartupScript(Me.GetType(),
                                            "My pop", "MyEdit()", True)

End Sub

Now not a lot of code - but FULL OF HUGE TIPS AND TRICKS!!!

Note how i grab the gv row. note how I get the PK id. These are really slick tricks.

So we pull the one data row, shove into div, and then last thing we do is setup the page to run our cool little div pop dialog.

The results are now this:

Now, for the cancel button (do nothing), we don't need any real code - we just CLOSE the dialog.

So that button is this:

 <asp:Button ID="cmdCancel" runat="server" Text="Cancel" cssclass="btn" Width="90px"
 OnClientClick="$('#myedit').dialog('close');return false;" style="margin-left:8px"  />

But, our save button? We have to take the text boxes - shove back to database.

So, save button not only has to save the data, but when we close the dialog, we need to re-plot (re-load) the gv - in fact that cost us some extra code - but we need it.

So, the save button will:
Pull text boxes back into table. 
Save send table back to database
re-load re-fresh gv

that code is this:

 Protected Sub cmdSave_Click(sender As Object, e As EventArgs) Handles cmdSave.Click

    Dim strSQL = "SELECT * FROM People where ID = " & Session("RowPK")
    Dim rstData As DataTable = MyRst(strSQL)

    With rstData.Rows(0)
        .Item("FirstName") = txtFirstname.Text
        .Item("LastName") = txtLastname.Text
        .Item("City") = txtCity.Text
        .Item("Active") = Active.Checked
        txtNotes.Text = .Item("Notes").ToString
    End With

    ' save to database
    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            Dim da As New SqlDataAdapter(cmdSQL)
            Dim daU As New SqlCommandBuilder(da)
            conn.Open()
            da.Update(rstData)
        End Using
    End Using

    ' since save button does a post back? 
    ' then dialog will collpase - no need to close.

    ' we now need to re-load (refrsh) the GV to display
    ' changes
    Dim LVitem As ListViewItem = ListView1.Items(Session("LvRow"))
    ' get Gird from this row
    Dim GV As GridView = LVitem.FindControl("GridView2")

    Dim HOtelPk As Integer = rstData.Rows(0).Item("Hotel_id")
    strSQL = "SELECT * from People where hotel_id = " & HOtelPk
    Dim rstGV As DataTable = MyRst(strSQL)
    GV.DataSource = rstGV
    GV.DataBind()

End Sub

Now NOT TOO long - but pushing the limits for a screen of code!!!

Note again the slick approach to getting the GV row - we saved into session on edit click the LV row - we could again use a hidden field in the page - so you have several approaches you can use - depends on your current needs.

ok. That is about it!!!

Now, the delete button? We have this:

Again, to be fair - having to re-plot the Gv costs code.

but, not too bad:

Protected Sub cmdDelete_Click(sender As Object, e As EventArgs)
    ' delete this gv row

    Dim cmdDel As LinkButton = sender
    Dim gRow As GridViewRow = cmdDel.NamingContainer
    Dim GV As GridView = gRow.NamingContainer
    Dim PkID As Integer = GV.DataKeys(gRow.RowIndex).Item("ID")

    Dim LVrow As ListViewItem = GV.NamingContainer
    Dim ParentPK As Integer = ListView1.DataKeys(LVrow.DataItemIndex).Item("ID")

    Dim strSQL As String = "DELETE FROM People WHERE ID = " & PkID

    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            cmdSQL.ExecuteNonQuery()
        End Using
    End Using

    ' refresh grid

    Dim rstData As DataTable =
        MyRst("SELECT * FROM People WHERE Hotel_id = " & ParentPK)
    GV.DataSource = rstData
    GV.DataBind()

End Sub

And since we REALLY have that cool dialog system? Then lets pop a cool confirm dialog. (we don't have to chance the above delete code for this.

Edit2: The add button at bottom of grid

Ok, so we have a edit, but now lets setup a add button.

We have to drop this button below the Grid, and we where hide/show the grid.

So, we modify the GV - we now going to hide/show the ROW!!!

So, we have this:

          <td id="mygridview" colspan="5" runat="server" style="display:none">

               <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
                 DataKeyNames="ID" CssClass="table table-hover" style="margin-left:3%;width:97%"  >
                    <Columns>
                        <asp:BoundField DataField="Firstname" HeaderText="Firstname" />
                        <asp:BoundField DataField="LastName" HeaderText="LastName"   />
                        <asp:BoundField DataField="City" HeaderText="City"           />
                        <asp:TemplateField HeaderText="Edit" HeaderStyle-Width="140px"
                            ItemStyle-HorizontalAlign="Center" >
                            <ItemTemplate>

                    <asp:LinkButton ID="cmdEdit" runat="server" CssClass="btn btn-default"
                        OnClick="cmdEdit_Click">
                    <span aria-hidden="true" class="glyphicon glyphicon-edit"></span>
                    </asp:LinkButton>

                    <asp:LinkButton ID="cmdDelete" runat="server" CssClass="btn btn-default"
                        OnClientClick="return delconfirm(this);"
                        OnClick="cmdDelete_Click"

                        style="margin-left:8px" >
                    <span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
                        
                    </asp:LinkButton>

                </ItemTemplate>
            </asp:TemplateField>
           </Columns>
         </asp:GridView>
        
         <asp:Button ID="cmdAddRow" runat="server" Text="+"
             style="float:right;margin-right:5px" Width="40px"
             OnClick="cmdAddRow_Click"
             
             />
            </td>

So, we have to update our expand button code - sorry - but we have MORE then GV to show hide. So that code becomes this:

Protected Sub cmdView_Click(sender As Object, e As EventArgs)

    Dim cmd As Button = sender

    'Dim gVR As ListViewDataItem = ListView1.Items(ListView1.SelectedIndex)
    Dim gVR As ListViewDataItem = cmd.Parent
    Dim gChild As GridView = gVR.FindControl("GridView2")   ' pluck out the grid for this row
    Dim MyDiv As HtmlTableCell = gVR.FindControl("mygridview")

    If MyDiv.Style("display") = "normal" Then
        ' if grid is already display, then hide it, and exit
        MyDiv.Style("display") = "none"
        Exit Sub
    End If

    MyDiv.Style("display") = "normal"

    Dim HotelPK As String = ListView1.DataKeys(gVR.DataItemIndex).Item("ID")

    ' only re-load if never loaded (can't re-load else blow out check boxes

    If gChild.Rows.Count = 0 Then
        Dim strSQL As String
        strSQL = "SELECT * from People where hotel_id = " & HotelPK
        gChild.DataSource = MyRst(strSQL)
        gChild.DataBind()

    End If

End Sub

Not much of a change - but we hide / show the row, since we now have GV and button.

That now looks like this:

And our add button click code is now this:

Protected Sub cmdAddRow_Click(sender As Object, e As EventArgs)

    Dim cmdAdd As Button = sender
    Dim LVrow As ListViewItem = cmdAdd.NamingContainer

    ' get PK of parent row
    Dim ParentPK As Integer = ListView1.DataKeys(LVrow.DataItemIndex).Item("ID")

    ' clear edit div
    txtFirstname.Text = ""
    txtLastname.Text = ""
    txtCity.Text = "Edmonton"
    Active.Checked = True
    txtNotes.Text = ""

    Session("LvRow") = LVrow.DataItemIndex
    Session("RowPK") = 0

    ' now pop the Edit dialog
    Page.ClientScript.RegisterStartupScript(Me.GetType(),
                                            "My pop", "MyEdit()", True)

End Sub

And now because we have BOTH edit and add? Well, then our save routine needs a wee bit of change.

(so it can handle BOTH edit/save, and now new record)

So, we tweak it a bit like this:

Protected Sub cmdSave_Click(sender As Object, e As EventArgs) Handles cmdSave.Click

    ' if new row - add it!!!
    Dim RowPK As Integer = Session("RowPK")

    Dim strSQL = "SELECT * FROM People where ID = " & Session("RowPK")
    Dim rstData As DataTable = MyRst(strSQL)

    Dim LVitem As ListViewItem = ListView1.Items(Session("LvRow"))
    ' get Gird from this row
    Dim GV As GridView = LVitem.FindControl("GridView2")

    Dim HOtelPk As Integer = ListView1.DataKeys(LVitem.DataItemIndex).Item("ID")

    Dim OneRow As DataRow

    If rstData.Rows.Count = 0 Then
        OneRow = rstData.NewRow
        OneRow("Hotel_ID") = HOtelPk
        rstData.Rows.Add(OneRow)
    Else
        OneRow = rstData.Rows(0)
    End If

    OneRow("FirstName") = txtFirstname.Text
    OneRow("LastName") = txtLastname.Text
    OneRow("City") = txtCity.Text
    OneRow("Active") = Active.Checked
    OneRow("Notes") = txtNotes.Text

    ' save to database
    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            Dim da As New SqlDataAdapter(cmdSQL)
            Dim daU As New SqlCommandBuilder(da)
            conn.Open()
            da.Update(rstData)
        End Using
    End Using

    ' since save button does a post back? 
    ' then dialog will collpase - no need to close.

    ' we now need to re-load (refrsh) the GV to display
    ' changes

    strSQL = "SELECT * from People where hotel_id = " & HOtelPk
    Dim rstGV As DataTable = MyRst(strSQL)
    GV.DataSource = rstGV
    GV.DataBind()

End Sub

Almost the same!!! - but we setup the parent PK (well FK to this row), and we create a new row, or grab the existing.

Last but not least? I have a few places where I need to pull data. I was wearing out my keyboard. So I have this helper routine to return a datatable.

It is a handy rountine. Remember, only use string concantation for PK values from datakeys - NEVER USE THIS for user input from a web page.

Public Function MyRst(strSQL As String) As DataTable

    Dim rstData As New DataTable
    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            rstData.Load(cmdSQL.ExecuteReader)
            rstData.TableName = strSQL
        End Using
    End Using

    Return rstData
End Function