[flexcoders] Binding two elements in a single datagrid column

[Angelo Anolin]

Hi FlexCoders,

I have a datagrid, where one of the columns is defined as follows:

<mx:DataGridColumn width="150" >
 <mx:headerRenderer>
  <mx:Component>
   <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" 
verticalGap="2">
    <mx:Box horizontalAlign="center" width="100%">
     <mx:Label text="Age" /> 
    </mx:Box>
    <mx:HBox horizontalAlign="center" width="100%" >
     <mx:Label text="Year" horizontalCenter="true" width="50" />
     <mx:Spacer width="10"/>
     <mx:Label text="Month" horizontalCenter="true" width="50" /> 
    </mx:HBox>
   </mx:VBox>
  </mx:Component>
 </mx:headerRenderer>
 <mx:itemRenderer>
  <mx:Component>
   <mx:HBox horizontalAlign="center" width="100%" horizontalScrollPolicy="off" 
verticalScrollPolicy="off">
    <mx:NumericStepper id="nsOutwardAgeYear" minimum="0" maximum="200" 
stepSize="1" width="50" textAlign="center"/>
    <mx:Spacer width="5"/>
    <mx:NumericStepper id="nsOutwardAgeMonths" minimum="0" maximum="200" 
stepSize="1" width="50" textAlign="center"/>
   </mx:HBox>
  </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>

Now, how would I be able to bind in both components my array collection? In the 
other columns, I can easily bind the datagridcolumn with a single item inside 
the arrayCollection object by 

<mx:DataGridColumn headerText="Test" dataField="myTestItem" width="20"/>

I want to bind two items inside my array collection into the numericStepper 
which I placed side by side in the datagrid.

Like for example if my arraycollection has the following data

var _arrTest:ArrayCollection = new ArrayCollection([{"Age":5, "Months":10}, 
{"Age":18, "Months":3}, ("Age":1, "Months":2)]);

the Age and Months items should be bound to nsOutwardAgeYear and 
nsOutwardAgeMonths respectively.

Thanks and regards,
Angelo