Hi Steve,
Thanks for this code snippet. I now feel that I need to jump over learning a
lot more AS since its becoming clear to me that you would be able to accomplish
a lot more "difficult" tasks through it.
Thanks and regards.
Angelo
________________________________
From: valdhor <valdhorli...@embarqmail.com>
To: flexcoders@yahoogroups.com
Sent: Tuesday, 16 June, 2009 21:26:27
Subject: [flexcoders] Re: Binding two elements in a single datagrid column
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:ArrayColle ction = 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=
"NumericStepperR enderer"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
NumericStepperRende rer.as:
package
{
import mx.containers. HBox;
import mx.controls. NumericStepper;
public class NumericStepperRende rer extends HBox
{
private var nsOutwardAgeYear: NumericStepper = new NumericStepper( );
private var nsOutwardAgeMonths: NumericStepper = new NumericStepper( );
public function NumericStepperRende rer()
{
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(nsOutwardA geMonths) ;
addChild(nsOutwardA geYear);
}
}
}
}
I will leave it as an exercise for the reader how to add an event listener for
the change event.
HTH
Steve
--- In flexcod...@yahoogro ups.com, Angelo Anolin <angelo_anolin@ ...> 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 horizontalScrollPol icy="off" verticalScrollPolic y="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%" horizontalScrollPol
> icy="off" verticalScrollPolic y="off">
> <mx:NumericStepper id="nsOutwardAgeYea r" minimum="0" maximum="200"
> stepSize="1" width="50" textAlign="center" />
> <mx:Spacer width="5"/>
> <mx:NumericStepper id="nsOutwardAgeMon ths" 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="myTestIt em" 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:ArrayColle ction = 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
>
