XamTreeGrid, or Hierarhical Data Presentation in a Flat Layout

The Infragistics WPFXamDataGrid has been in use in a great variety of applications for presenting flat and hierarchical datasets, while giving the developers an unprecedented ability to customize and extend. The standard view of hierarchical data contains multiple hierarchical levels of data with different schemas (set of columns), for example the classical Customers->Orders hierarchy in many samples. However, very often developers need a hierarchical view which contains the same columns for the parent and child views, and the hierarchy is essentially composed of the same entity, and there’s a need to compare values in the same column, so indentation of lower hierarchy levels is not needed. This flat view has often been termed “tree grid”.

As the XamDataGrid doesn’t support this out of the box, we’ve  built a special style which enables it to display this view. This post demonstrates how to implement this flat hierarchy view, and includes a sample project which is available here. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses a trial version of the 12.2 NetAdvantage for WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamDataGrid is available. Here’s a screenshot of the sample project:

Using the tree grid style

We’ve created a style which shows the hierarchical levels and expansion indicators within a single column. Expanding lower levels of the hierarchy doesn’t impact the layout of the columns on the right of the hierarchical column, enabling easy column value comparisons. This is done with a special style for the column where the hierarchy is presented. Here’s how the XamDataGrid is declared:

<igDP:XamDataGrid DataSource="{Binding DataItems}"><igDP:XamDataGrid.FieldLayoutSettings><igDP:FieldLayoutSettings AutoGenerateFields="False"
                            ExpansionIndicatorDisplayMode="Never"/></igDP:XamDataGrid.FieldLayoutSettings><igDP:XamDataGrid.FieldLayouts><igDP:FieldLayout Key="DataItem"
                    KeyMatchingEnforced="True"
                    IsDefault="True"><!--Name field contains the hierarchy--><igDP:Field Name="Name"><igDP:Field.Settings><igDP:FieldSettings CellValuePresenterStyle="{StaticResource HierarchyCellValuePresenter}"/></igDP:Field.Settings></igDP:Field><!--Children (or however you name the member of 
            the bound item storing the children) field - required for 
            the display of the hierarchy in the Name field--><igDP:Field Name="Children"/><!--business object fields--><igDP:Field Name="Price"/><igDP:Field Name="Cost"/><igDP:Field Name="StartDate"/><igDP:Field Name="EndDate"/></igDP:FieldLayout></igDP:XamDataGrid.FieldLayouts></igDP:XamDataGrid>

General XamDataGrid settings

We’re setting a number of properties in the XamDataGrid to help it display the flat layout – we’re generating the columns ourselves, so we’re setting AutoGenerateFields to false. We’ll be showing our own expansion indicators in the first column, so we’re turning off the default ones setting the ExpansionIndicatorDisplayMode to a value of never.

Bound item schema

The sample shows records representing TaskItem objects. TaskItem objects inherit from the DataItem object, which is used to represent the hierarchy – it contains a Children member of the same type – DataItem. The TaskItem adds the business-level properties on top of the DataItem. In your projects you may have different names for DataItem (type which is used to store the hierarchical aspect of objects), and Children – list for storing child objects. You’ll need to match these to the settings in the FieldLayout, as described below.

Adjusting the FieldLayout

The settings on the FieldLayout object are important in presenting the hierarchical nature of the data. The way the hierarchy is represented in the bound data type hierarchy is reflected in the FieldLayout settings. On the top level FieldLayout, we’re representing the DataItem type (hence the setting of the Key=”DataItem”, and setting this as the default layout. It’s also important to have the Children field (or the name of the property you’re using in your bound objects to represent the collection of children of the object) in the FieldLayout– even though the Children is not shown as a separate column, unless it’s a part of the FieldLayout, lower levels of the hierarchy will not be shown.

Implementation

The custom code that’s used for generating the hierarchy as represented in the bound data set is implemented as a style (HierarchyCellValuePresenter), which is set to the Name field (matching the Name property of the DataItem type). This style also uses behaviors which are specially defined to handle the expansion and presentation of hierarchical levels. We recommend you adopt the code in this solution with your data objects, changing the way the grid is defined, and only adapting these styles and behaviors if you have special requirements outside of the standard case, implemented by this sample.

Summary

Presenting hierarchical data in this flat format is often useful – it saves space on screen otherwise allocated for field layout headers. Also, when tracking the same columns across different levels, it’s much better to have no breaks in the column layout for different hierarchy levels. You can cover all these cases using the approach described above, and you’re able to substantially extend the capability of the XamDataGrid to display hierarchical data in a flat format. Take a look at your hierarchical grids, and talk to your users whether they could benefit from a flat view of the same data – now you can make it happen quite easily.

If you have any questions or comments, you can reach me at kmatev@infragistics.com