HGrid (Hierarchy Grid or Tree Table)

Last Updated 02-Jun-2004

General Description

The HGrid shares many properties of a Table, most notably that it is a display of information in tabular format. The main difference between the two is that a Table displays a flat list of objects, whereas an HGrid displays objects in a hierarchy. The HGrid has similar behaviors to other hierarchical components, such as a Tree control and a Crosstab Table. The contents of this guideline are as follows:

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Carmen D'Arlach, Mervyn Dennehy, Craig Louis, Ivy Leung, Lisa Rinderknecht, Raymond Wong
UI Models - all models
Example Products - all products
Related Guidelines - Tables, Tree, HGrid Flows, Hide/Show Component, Personalization of Tables and HGrids

Interaction and Usage Specifications

General Principles

An HGrid displays a hierarchy of objects in tabular format. In a Table, all objects are at the same level of hierarchy, whereas in an HGrid, objects are displayed in a hierarchy which may have successive levels of container and/or child objects. (A container may or may not have associated object information.)

HGrid - Overview Image of All Possible Elements
HGrid - Overview Image of All Possible Elements

Comparison of Table and HGrid Components

Tables and HGrids share many components.

Common HGrid and Table SubComponents
SubComponents Unique to Tables

Comparison of Table and HGrid Information Design

Tables and HGrids share many aspects of information design. Note that most of the links below point to the related sections of the Table guideline:

Similarities between Tables and HGrid Information Design
Elements that are NOT in an HGrid (but are in a Table)

Hide/Show in an HGrid operates on parent nodes and subordinate container nodes. Hide/Show in a Table operates on selected rows or selected cells only, and does not propagate hierarchically.

Comparison of Table and HGrid Interaction

Similarities between Table and HGrid Interaction

HGrids and Tables share the following interaction features:

For details on most actions, see Table Flows guideline and see the HGrid Flows guideline. For details on drag and drop functionality, see Resizing Columns and Reordering Columns in the Tables guideline.

HGrid Interaction NOT in Common with a Table

Hierarchy of Objects: Interaction Details and Manipulation Capabilities

In addition to applicable Table subcomponents and elements (listed above), the hierarchy of objects consists of:

Note: An HGrid must have a single root node to enable navigation up and down the hierarchy once the Focus control is used. Without a single root, if users focused on branch A, they would not be able to use HGrid breadcrumbs to redisplay branch B. Consequently, when combining multiple hierarchies in a single HGrid, it is necessary to create a single root using a suitable umbrella term, such as "All Products" or "All Items".

HGrid - Diagram of Elements
HGrid - Diagram of Elements

Objects: Parent (Container and Object), Container Only, or Child

Rollover of Hide/Show Control

Rollover of ObjectName Link

Hide/Show Toggle

Expand Container/Parent in HGrid

Focus Controls

Rollover of Focus
Rollover of Focus

Focus on Container/Parent - New "Root"
Focus on Container/Parent - New "Root"

HGrid Breadcrumbs

HGrid Breadcrumbs
HGrid Breadcrumbs

HGrid Breadcrumb - "Start" Icon

Expand All | Collapse All

Select All | Select None

Select All and Select None apply only to the items in focus. If a user needs to select all items in a hierarchy, or deselect all, the user must place the focus at the root of the hierarchy.

Display of Large Record Sets in an HGrid

When a node contains many children at the same level, it is not practical to simultaneously display the entire list within the HGrid. In this case the BLAF standard is to display record sets and to provide record navigation controls within the hierarchy column, to move forward and back through the record sets. The same approach is used for Tree controls.

For usage principles and syntax details, see HGrid and Tree Record Navigation with Large Data Sets in the Locator Element: Record and Page Navigation guideline.

Navigation Within an HGrid Record Set
Navigation Within an HGrid Record Set

HGrid Showing Last Record Set
(Heterogeneous HGrid Where Total Number Of Records Is Known)

HGrid Showing Last Record Set - (Heterogeneous HGrid Where Total Number Of Records Is Known)

HGrid with Two Levels of Record Navigation
(Heterogeneous HGrid with record navigation at both parent and child levels)

HGrid with Two Levels of Record Navigation

HGrid Usage Principles

HGrids share features of both Tables and Tree controls. The following usage principles help determine which control to use in different contexts:

HGrid and PPR

PPR can be used to refresh the HGrid when users manipulate HGrid display or perform actions that do not require navigation to another page.

Principles for use of PPR with HGrids are as follows:

PPR Used to Expand an HGrid Node

Visual Specifications

With the exceptions noted above, HGrids conform to the specifications in the Tables guideline. Examples of various HGrid layouts are included below.

HGrid Examples

HGrid - Expand All Used; All Nodes Open (from selected root); Long page
HGrid - Expand All Used; All Nodes Open (from selected root); Long page

HGrid - At Root of Hierarchy, Some Nodes Open/Some Closed
HGrid - At Root of Hierarchy, Some Nodes Open/Some Closed

HGrid - At Root of Hierarchy, More Nodes Open/Some Closed
HGrid - At Root of Hierarchy, More Nodes Open/Some Closed

HGrid - Focus on New Root, HGrid Breadcrumbs Appended
HGrid - Focus on New Root, HGrid Breadcrumbs Appended

HGrid - Focus to Last Parent/Container in Hierarchy, HGrid Breadcrumbs Appended
HGrid - Focus to Last Parent/Container in Hierarchy, HGrid Breadcrumbs Appended

HGrid - No Control Bar
HGrid - No Control Bar

HGrid - No Focus Control and HGrid Breadcrumbs
HGrid - No Focus Control and HGrid Breadcrumbs

HGrid - Empty with Sample Text String
HGrid - Empty

Open/Closed Issues