How do I display hierarical data in ASP.NET? I have a data source that looks like this:
class Tree
{
IEnumerable<Node> Nodes { get; set; }
}
class Node
{
string Description { get; set; }
decimal Amount { get; set; }
IEnumerable<Node> SubNodes { get; set; }
}
I would like to render is as a list of divs, like the one below. I need the div tags to make the animations smooth when expanding and collapsing the branches.
<ul class="foldable">
<li>
<div class="line">
<div class="description">...</div>
<div class="amount">...</div>
</div>
<div class="line">
<div class="description">...</div>
<div class="amount">...</div>
</div>
<ul>
<li>
<div class="line">
<div class="description">...</div>
<div class="amount">...</div>
</div>
</li>
</ul>
</li>
</ul>
- I tried building this using ListView elements, but I could not figure out how to call it recursively.
- I also looked at the TreeView class, but dropped it because it is rendered using tables.
- I gave up on the CSS Friendly Control Adaptors since this seems to be an either or switch for all the controls on the web site.
- I tried with a BulledList, but could not figure out how to make it render the divs.
I ended up using four identical nested ListView elements since I know that my lists are never deeper than four levels. But this solution is just so ugly that I'm hoping to find a better one here. =)
