0

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 tailored 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.

2 Answers 2

0

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
0

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();
            }  
        }
    }
}
4
  • Obviously, you can manipulate the concept above as needed to get the look and feel you want. Commented Aug 10, 2011 at 19:59
  • You're approach appears to bind all the data up-front. On the "ItemDataBound" event of DatList1, you intend to bind DataList2. What is asked is how to bind it when the tree expander is clicked.
    – Seraph812
    Commented Aug 10, 2011 at 20:20
  • Edited to bind child list when expand button is clicked. Please see edited answer. Commented Aug 11, 2011 at 18:41
  • Just wrap the DataList in an UpdatePanel to meet AJAX requirement. Commented Aug 11, 2011 at 18:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.