A multi-column header feature has been available thus far only for the flat data ASP.NET AJAX grid and I believe there’s barely anyone left wondering what that would do. Call it grouped headers, merged headers - aside from the obvious aesthetics having column headers grouped (well, perhaps not so obvious – I like it at least) there’s a very practical functionality at play here – it’s about customization and it’s about ease of digesting data. It would be much easier to get your way around  a table that has column headers stacked in neat groups. Then the groups can be in groups and so on – basically order rules the lands!

Introduction

The otherwise already feature-rich WebHierarchicalDataGrid control got a a bit richer – with the latest release such feature was introduced to the hierarchical data grid (following the flat data grid’s lead) so now you can hierarchy in both your data and your columns. The headers visually and logically (and you will see below very much functionally so, too) group together columns:

In the above screenshot the hierarchical grid has the root layout (band) column headers grouped in two main categories – Company and Location information and nested logical groups in those as well. The child bad headers are all in a single group that serves as a title if you will and also have nested logical grouped inside. Also note I may have gone too far grouping almost everything, but that’s to show off the feature and real-life applications may use this in a more restrained manner based on design requirements.

Getting Started

I’ll demonstrate how easy it is to use (refer to the following help topic should you need help getting started with the Web Hierarchical Grid ), but before that a shot theory of operation – the multi-column headers are based on the way the columns are defined, which is to say this feature is not a behaviour you might find in the grid options.

Actually there’s a new ‘column’ type available in the grid now – the Group Field. Think of it like a unbound column (still requires a key) that will hold other columns and it’s header will be on top of all of them. And in terms of adding the group field you can treat it like a normal column you add to a band collection or column collections of other group fields. This is 100% doable through the grid’s smart tag menu:

As you can see this is the Edit Columns menu of a band (root in this blog’s demo) and you can add a Group Field to the columns collection and the field itself has such collection where you can add your actual bound fields and other group if you need. Of course, this can be done in code as well and it is valid for both root and child layouts. Below is the full snippet for the layout Using the Northwind’s Customers and Orders tables.

And the end result is the screenshot above. Note the Keys on group fields are unrelated to your data, they are required for future referencing the fields.

Interaction

A very curtail part for such a feature to work well is how it would cooperate with other features that depend on the columns’ size/position/header in some way. As mentioned, the Multi-column headers are a feature dependant on column definitions and not a behaviour, therefore dependant behaviours have been altered instead to be mindful of that and ‘behave’ properly. Such features are:

• Sorting – naturally sorting remains on the actual column header (like the Name column below) and clicking the group headers does not activate a sort action attempt:

• Selecetion – when Selection behaviour is active with Column selection enabled, normal headers work as expected and group headers select the first of their nested group when clicked.
• Resizing – resizing also works as expected, modifying the size of a nested column will modify the size of the group field and vice versa.
• Moving – Column moving is a very interesting interaction. The behaviour will respect the defined groups and will only allow moving of columns in their respective ‘level’.

Also moving will work with dragging group headers just like with normal ones and will move the whole group.

• Filtering  - as seen above and just like sorting the filtering UI will be tied to the actual column headers and function normally.

Summary

The ASP.NET AJAX Hierarchical Data Grid’s new Multi-Column Headers feature lets developers organize data columns within categories for users to easily read through. It’s both visually pleasing and functional and very easy to define via the Group Filed object. Several column related behaviours have also been adjusted to work properly with multi-column headers and obey the columns’ grouping.

Download the demo project for this blog to try for yourself or visit the ASP.NET AJAX Hierarchical Data Grid’s Multi-Column Headers Online Sample. As always, you can follow us on Twitter @DamyanPetev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!