[flexcoders] Re: Binding two elements in a single datagrid column

[valdhor]

This is probably possible in MXML but I prefer to write my item
renderers in ActionScript...

main.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">
     <mx:Script>
         <![CDATA[
             import mx.collections.ArrayCollection;

             [Bindable] private var _arrTest:ArrayCollection = new
ArrayCollection([{"Age":5, "Months":10}, {"Age":18, "Months":3},
{"Age":1, "Months":2}]);
         ]]>
     </mx:Script>
     <mx:DataGrid dataProvider="{_arrTest}">
         <mx:columns>
             <mx:DataGridColumn headerText="Age" width="120"
itemRenderer="NumericStepperRenderer"/>
         </mx:columns>
     </mx:DataGrid>
</mx:Application>

NumericStepperRenderer.as:
package
{
     import mx.containers.HBox;
     import mx.controls.NumericStepper;

     public class NumericStepperRenderer extends HBox
     {
         private var nsOutwardAgeYear:NumericStepper = new
NumericStepper();
         private var nsOutwardAgeMonths:NumericStepper = new
NumericStepper();

         public function NumericStepperRenderer()
         {
             super();
             nsOutwardAgeYear.minimum = 0;
             nsOutwardAgeMonths.minimum = 0;
             nsOutwardAgeYear.maximum = 200;
             nsOutwardAgeMonths.maximum = 200;
             nsOutwardAgeYear.stepSize = 1;
             nsOutwardAgeMonths.stepSize = 1;
             nsOutwardAgeYear.width = 50;
             nsOutwardAgeMonths.width = 50;
             nsOutwardAgeYear.setStyle("textAlign", "center");
             nsOutwardAgeMonths.setStyle("textAlign", "center");
         }

         override public function set data(value:Object):void
         {
             super.data = value;
             if(value != null)
             {
                 nsOutwardAgeYear.value = value.Age;
                 nsOutwardAgeMonths.value = value.Months;
                 addChild(nsOutwardAgeMonths);
                 addChild(nsOutwardAgeYear);
             }
         }
     }
}

I will leave it as an exercise for the reader how to add an event
listener for the change event.


HTH



Steve

--- In flexcoders@yahoogroups.com, Angelo Anolin <angelo_ano...@...>
wrote:
>
> 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
>