Adobe Flex 3 Data Visualization Developer Guide
Hierarchical and grouped data display
The AdvancedDataGrid control supports the display of hierarchical and grouped data. To support this display, the
AdvancedDataGrid control displays a navigation tree in a column that lets you navigate the data hierarchy.
Hierarchical data is data already in a structure of parent and child data items. You can pass hierarchical data directly
to the AdvancedDataGrid control. Grouped data is data that starts out as flat data with no inherent hierarchy. Before
passing the flat data to the AdvancedDataGrid control, you specify one or more data fields that are used to group the
flat data into a hierarchy.
The following code shows hierarchical data in the file:
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", children: [
{Region:"Arizona", children: [
{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
{Region:"Central California", children: [
{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
{Region:"Nevada", children: [
{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
{Region:"Northern California", children: [
{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
{Region:"Southern California", children: [
{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
Notice that the data contains a top-level object that contains a Region field and multiple second-level children. Each
second-level child also contains a Region field and one or more additional children. The following example shows
the AdvancedDataGrid control displaying this data:
The code for this example is in the section Controlling the navigation tree of the AdvancedDataGrid control” on
page 289.
To display flat data as a hierarchy, you group the rows of the flat data before passing the data to the
AdvancedDataGrid control. The following code contains a variation on the hierarchical data shown in the previous
image, but arranges the data in a flat data structure:
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},

Get ADOBE® FLEX® 3: ADVANCED DATA VISUALIZATION DEVELOPER GUIDE now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.