Hi Tim,
This helped a bit, although I am wondering why the underlying data provider
does not get updated when I changed the value of the NumericStepper control. I
am probably missing something.
Also, thanks for the little tip on the HorizontalGap. Have been using a lot of
spacers in between controls. :)
Regards,
Angelo
________________________________
From: Tim Hoff <timh...@aol.com>
To: flexcoders@yahoogroups.com
Sent: Tuesday, 16 June, 2009 23:18:09
Subject: [flexcoders] Re: Binding two elements in a single datagrid column
I'm with you Steve; about using AS for an itemRenderer. I do wonder why you
would use addChild in the set data function though; rather than in
createChildren . For mxml, this should work Angelo:<mx:itemRenderer>
<mx:Component>
<mx:HBoxhorizontalGap= "5" horizontalAlign= "center" width="100%"
horizontalScrollPol icy="off" verticalScrollPolic y="off">
<mx:NumericStepperid="nsOutwardAgeYear" value="{data.Age }"
minimum="0" maximum="200" stepSize="1" width="50" textAlign="center"/>
<mx:NumericStepperid="nsOutwardAgeMonths" value="{data.Months }"
minimum="0" maximum="200" stepSize="1" width="50" textAlign="center"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
For the HBox, notice the use of horizontalGap, instead of a spacer as well.
Just cleans it up a bit.
Cheers,
-TH
--- In flexcod...@yahoogro ups.com, "valdhor" <valdhorlists@ ...> wrote:
>
> 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
> >
>
