Can AdvancedDataGrid automatically detect AdvancedDataGridColumnGroup

Question

I was trying the example from this link: Adobe Flex 4 * Creating column groups

The data is

import mx.collections.ArrayCollection;
            [Bindable]
            private var dpHierarchy:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Barbara Jennings", 
                    Revenues:{Actual:38865, Estimate:40000}}, 
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Dana Binn", 
                    Revenues:{Actual:29885, Estimate:30000}},  
                {Region:"Southwest", Territory:"Central California", 
                    Territory_Rep:"Joe Smith", 
                    Revenues:{Actual:29134, Estimate:30000}},  
                {Region:"Southwest", Territory:"Nevada", 
                    Territory_Rep:"Bethany Pittman", 
                    Revenues:{Actual:52888, Estimate:45000}},  
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"Lauren Ipsum", 
                    Revenues:{Actual:38805, Estimate:40000}}, 
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"T.R. Smith", 
                    Revenues:{Actual:55498, Estimate:40000}},  
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Alice Treu", 
                    Revenues:{Actual:44985, Estimate:45000}}, 
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Jane Grove", 
                    Revenues:{Actual:44913, Estimate:45000}}
            ]);


<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            // Import the data used by the AdvancedDataGrid control. 
            include "SimpleFlatData.as";
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG"
        dataProvider="{dpFlat}"
        width="100%" height="100%">
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumnGroup headerText="Revenues">    
                <mx:AdvancedDataGridColumn dataField="Actual"/>
                <mx:AdvancedDataGridColumn dataField="Estimate"/>
            </mx:AdvancedDataGridColumnGroup>    
        </mx:groupedColumns>
   </mx:AdvancedDataGrid>
</s:Application>

Here, we have to define the AdvancedDataGridColumnGroup to get define the grouped columns.

I was trying if AdvancedDataGrid can automatically detect the columns based on the JSON data. I tried with the following code:

<mx:AdvancedDataGrid id="inboxDg"
    designViewDataType="flat"
    editable="true"
    dataProvider="{dpHierarchy}"
    width="100%" height="100%">

</mx:AdvancedDataGrid>

Using this code, AdvancedDataGrid automatically detects the column names and the data. But it fails to create nested columns for Revenues. Ideally it should create 2 sub-columns for it as Actual and Estimate, but it created only one column and the shows data as [object Object]

Is there any way to make AdvancedDataGrid to create the nested columns automatically?

Answer 1

Your data isn't flat, and just because you put it in a group doesn't mean it will subgroup it. The dataField property cannot use dot notation within that, so you've got 2 options, use the labelFunction property, or create a flat data model (I personally prefer the latter).

To do this:

private var dpHierarchy:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Barbara Jennings", 
                    ActualRevenue:38865,
                    EstimateRevenue:40000}, 
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Dana Binn", 
                    ActualRevenue:38865,
                    EstimateRevenue:40000},  
                {Region:"Southwest", Territory:"Central California", 
                    Territory_Rep:"Joe Smith", 
                    ActualRevenue:38865,
                    EstimateRevenue:40000},  
               etc....
            ]);

And then your grid:

<mx:AdvancedDataGrid id="myADG"
        dataProvider="{dpFlat}"
        width="100%" height="100%">
        <mx:groupedColumns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumnGroup headerText="Revenues">    
                <mx:AdvancedDataGridColumn dataField="ActualRevenue"/>
                <mx:AdvancedDataGridColumn dataField="EstimateRevenue"/>
            </mx:AdvancedDataGridColumnGroup>    
        </mx:groupedColumns>
   </mx:AdvancedDataGrid>

You can also look up using a labelFunction if you'd like, but that seemed more complex than it needs to be. And lastly I feel I should note that you should set the label property manually on your columns and adhere to coding standards for your data (camelCase). It just makes things a bit cleaner :)