Nested gridview to produce treeview effect with asynchronous binding of child grid in asp.net/C#/AJAX

Essentially, I am attempting to create a treeview effect via nested gridviews. It'll look something like this:

-col 1 col 2 col 3 col 4

  childcol1  childcol2  childcol3

  childcol1  childcol2  childcol3

+col 1 col 2 col 3 col 4

+col 1 col 2 col 3 col 4

+col 1 col 2 col 3 col 4

The parent grid is populated on page load but when the "plus" is clicked, collection of the data & binding of the child grid is asynchronous and populated "on the fly" based on the value of the selected record. Data is pulled from a DB & generally, I've been using DataSets to bind to the gridviews but it looks like I may not be able to do that here.

I have been reading up on ajax and jquery and it seems the solution may be there somewhere since it seems tai开发者_开发知识库lored for async calling but I'm VERY unfamiliar with it. It seems like I'd have to create the child grid as a template field nested in the parent grid.

Please note: I have been asked to stay away from use of "UpdatePanel" so that is NOT an option.

---

I've done this using nested tables and jQuery, Ajax calls with json returned and jtemplate for the templating engine.

I've created a quick fiddle to show how I do this conceptually. The basic layout would be like this

Table
-row
-subrow
  -Table
    -row
    -row

---

That's very possible, but I would use a ListView or DataList as your parent container, because if you use a GridView, you'll have to put the child list in a column, which will look ugly. This should put you on the right path:

<table width="595px">
    <asp:DataList BackColor="#ffffff" id="DataList1" DataKeyField="<ID>" OnItemDataBound="DataList1_ItemDataBound" runat="server" Width="100%">     
        <ItemTemplate>
           <tr>
              <td>
                  <asp:LinkButton ID="LinkButton1" runat="server" Text="+" OnCommand="LinkButton1_Command" CommandArgument='<%#Container.ItemIndex%>'></asp:LinkButton>    
              </td>
              <td><%#Eval("<COLUMN NAME>")%></td>
              <td><%#Eval("<COLUMN NAME>")%></td>
              <td><%#Eval("<COLUMN NAME>")%></td>
           </tr>
           <asp:Panel ID="pnlChildView" runat="server">
               <asp:DataList ID="DataList2" runat="server" Width="100%">
                   <ItemTemplate>
                       <tr>
                          <td><%#Eval("<CHILD OLUMN NAME>")%></td>
                          <td><%#Eval("<CHILD COLUMN NAME>")%></</td>
                          <td><%#Eval("<CHILD COLUMN NAME>")%></</td>                           
                       </tr>
                   </ItemTemplate>
               </asp:DataList>
           </asp:Panel>
        </ItemTemplate>
    </asp:DataList>
</table>

And when the user clicks the LinkButton/Button in DataList1, do something like this:

protected void LinkButton1_Command(object sender, CommandEventArgs e)
{
    //pass index of item in command argument
    int itemIndex = Convert.ToInt32(e.CommandArgument);      

    //find the pnlChildView control
    Panel childViewPanel = (Panel)DataList1.Items[itemIndex].FindControl("pnlChildView");
    if (childViewPanel != null)
    {
        //toggle visibility of childViewPanel and bind child list if panel is visible

        if (childViewPanel.Visible)
        {
            DataList childList = childViewPanel.FindControl("DataList2");
            if (childList != null)
            {
                int keyValue = (int)DataList1.DataKeys[itemIndex];

                //bind the list using DataList1 data key value
                childList.DataSource = <DATA SOURCE>; //get data using keyValue
                childList.DataBind();
            }  
        }
    }
}