Treeview and Table with Ajax

Question

I'd like to have a table with a group by and ajax functionality.

Example:

Table header (with sort function on each column)

+/- (image to collapse or expand) Group by Element1
- table view of all elements of Element1
+/- (image to collapse or expand) Group by Element2
- table view of all elements of Element2
+/- (image to collapse or expand) Group by Element3
- table view of all elements of Element3

If you click on "Group by Element1" there should be a ajax request to load the table view of all elements of Element1. The same for Element2 and Element3, etc.

I hope you understand what I want :-)

What's the best way to do this? Ajax, asp:Treeview, etc.?

Thanks

James Johnson · Accepted Answer · 2011-08-15 17:14:26Z

That's very possible, but I would use a ListView or DataList as your parent container. Give this a shot:

<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();
            }  
        }
    }
}

Yuriy Petrovskiy · Accepted Answer · 2011-08-15 15:50:41Z

0

There are several products which will possibly suit your needs:

and others...

answered Aug 15, 2011 at 15:50

Yuriy Petrovskiy

8,24811 gold badges32 silver badges35 bronze badges

Collectives™ on Stack Overflow

Treeview and Table with Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related