Advanced Configuration Options – Hierarchical Grids

Display of hierarchical data is the most powerful feature of the HTMLTreeGrid. It was designed from the ground up to display such complex data and relationships between the various data elements.

There are two types of configurations that we refer to in various examples: Nested and Grouped. In the nested data mode, also known as Heterogeneous Hierarchical Data we display related, but separate Business entities (usually parent child entities) in a nested hierarchical UI. Each level has its own set of columns. Each level can also have its own footers, paging bar etc. You will notice that enableFilters, enablePaging and enableFooters can be defined on each level. This gives you the Flexibility to have headers, footers, paging and filters at each level. Columns are also defined at each level. So each level can have an independent set of columns.

The second type of hierarchical data is grouped data (by using "reusePreviousLevelColumns"=true), which we also refer to as Homogeneous Hierarchical Data. This means that we're displaying properties of a single entity, just grouped along some attributes of that entity.

A picture is worth a thousand words, so here is the difference. The top image is nested data, the bottom is grouped data:

Notice the key difference is that Nested Data has columns at each level, while the Grouped Data just has a single set of top level columns.

When you download the full Sample, you will receive the configuration as well as the data for above examples to play with them further.

A key point to notice here, is that in the configuration of each grid, you will always find "Column Levels". Each "Level" is basically a holder for information that pertains to the hierarchical level. For flat grids (no hierarchy), there is just one column level, accessible via the grid.getColumnLevel(). For a grid with one data one level deep, there will be two levels, accessible via grid.getColumnLevel() and grid.getColumnLevel().nextLevel.

FlexDataGridColumnLevle is a class that contains information about a nest level of grid. This includes the columns at this level, information about whether or not to enable paging, footers, filters, the row sizes of each, the property of the dataprovider to be used as the key for selection, the property of the data provider to be used as the children field, the renderers for each of the cells, etc.The Grid always contains at least one level. This is the top level, and is accessible via the columnLevel property of the grid.

One of the most important concepts behind the Architecture of Flexicious Ultimate arose from the fundamental requirement that the product was created for - that is display of Heterogeneous Hierarchical Data.

The notion of nested levels is baked in to the grid via the "columnLevel" property. This is a property of type "FlexDataGridColumnLevel". The grid always has at least one column level. This is also referred to as the top level, or the root level. In flat grids (non hierarchical), this is the only level. But in nested grids, you could have any number of nested levels.

The columns collection actually belongs to the columnLevel, and since there is one root level, the columns collection of the grid basically points to the columns collection of this root level. The FlexDataGridColumnLevel class has a "nextLevel" property, which is a pointer to another instance of the same class, or a "nextLevelRenderer" property, which is a reference to a ClassFactory the next level. Please note, currently, if you specify nextLevelRenderer, the nextLevel is ignored. This means, at the same level, you cannot have both a nested subgrid as well as a level renderer. Bottom line - use nextLevelRenderer only at the innermost level. Our examples demonstrate this.