Tree-Table

Problem

People need to explore information that is related hierarchically.

Solution

Show information in a table that allows expansion of rows in a tree-like format to show hierarchical relationships.

Context

• You have a list of items that has multiple attributes that need to be shown in one view.
• Your information is hierarchical (i.e., items have parent-child relationships) and shares common attributes (they are the same kind of item or just share the attributes you want to show).
• The people using your solution have experience with this kind of interface.

Rationale

A table is a good, well-established way to show a list of items with multiple attributes shown in one view. A tree is a natural way to explore hierarchical information and is also a fairly established way to do this. Some email applications and RSS readers use this approach, so users of those will readily be able to use this; however, due to its visual complexity and minimal affordances, it could be problematic for inexperienced users.

Implementation

You need to use a tree control that supports multiple columns, or a grid control that supports hierarchy.

You can combine this pattern with Sortable Table. As sorting the items for any column but the first will disrupt the tree ordering, you will need to provide a way to go back to the tree view. For example, Outlook Express has a “View by conversation” menu option to allow that.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

Silverlight

You can use the hierarchical data display capabilities of the NetAdvantage for Silverlight xamWebGrid control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms WinTree to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Free Form View Style to see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamDataGrid control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Hierarchical Data Binding to see it in action.

Sources

Jennifer Tidwell, Tree-Table

Tags

Tree, Hierarchy, Displaying Complex Data.