Listen to the change event / enter event on the NumericSteppers and dispatch
an event to update the DataProvider with the new values. Once you override
the itemRenderer with a custom Renderer, you need to handle the commit of
values back to the DataProvider.
You can do something similar to this. Please note that this is NOT exact
code, but you could use this approach.
nsOutwardAgeYear.addEventListener("change" onnsOutwardChange);
private function onnsOutwardChange(event:Event):void
{
dispatchEvent(new CustomEvent("valueChanged", (event.target as
NumericStepper).value);
}
*The custom event can have an extra property that holds the value of the
Stepper.*
*In your main app, add a listener to your DataGrid*
dg.addEventListener(CustomEvent.VALUE_CHANGED, onvalueChanged);
private function onvalueChanged(event:CustomEvent):void
{
var selectedObject:Object = datagrid.selectedItem
selectedObject.Age = event.value;
(datagrid.dataProvider as ArrayCollection).setItemAt(selectedObject,
datagrid.selectedIndex)
}
Hope this helps!
Cheers
Harish
http://blog.flexgeek.in
On Wed, Jun 17, 2009 at 6:28 PM, valdhor <[email protected]>wrote:
>
>
> I thought that was the idea.
>
> In the example, I wanted a new NumericStepper for each data item (Actually
> two new NumericSteppers). If createChildren only runs once, how would you
> get the required output? In other words, can you post your version of the
> example using createChildren ?
>
>
> --- In [email protected] <flexcoders%40yahoogroups.com>, "Tim
> Hoff" <timh...@...> wrote:
> >
> >
> > Yes, createChildren will only execute once; while set data will execute
> > many times. Perhaps it's not a problem if the same child gets added to
> > the display list everytime that the data is set. But usually, you only
> > need to add them once.
> >
> > -TH
> >
> > --- In [email protected] <flexcoders%40yahoogroups.com>,
> "valdhor" <valdhorlists@> wrote:
> > >
> > > I use addChild in the set data function only because I always have.
> > >
> > > I have built hundreds of renderers this way and none of them have
> > given me a problem. If there's a good reason why I shouldn't do it this
> > way, I'm all ears.
> > >
> > >
> > > --- In [email protected] <flexcoders%40yahoogroups.com>, "Tim
> Hoff" TimHoff@ wrote:
> > > >
> > > >
> > > > 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:HBox horizontalGap="5" horizontalAlign="center"
> > > > width="100%" horizontalScrollPolicy="off"
> > verticalScrollPolicy="off">
> > > > <mx:NumericStepper id="nsOutwardAgeYear" value="{ data.Age
> > > > }" minimum="0" maximum="200" stepSize="1" width="50"
> > > > textAlign="center"/>
> > > > <mx:NumericStepper id="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 [email protected] <flexcoders%40yahoogroups.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: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 [email protected] <flexcoders%40yahoogroups.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 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
> > > > > >
> > > > >
> > > >
> > >
> >
>
>
>
