Here's a simple NumericStepper component based on the examples in the docs, with a change handler to actively track the updated value.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%">
<mx:Script>
<![CDATA[
[Bindable]
public var myDP:Array = [
{label1:"Order #2314", quant:3, Sent:true},
{label1:"Order #2315", quant:5, Sent:false}
];
[Bindable]
public var total: Number;
public function calculateTotal() : void {
total = 0;
for (var i: int = 0; i < myDP.length; i++) {
total += myDP[i].quant;
}
}
]]>
</mx:Script>
<mx:DataGrid id="myDG" dataProvider="{myDP}" variableRowHeight="true"
editable="true" creationComplete="callLater(calculateTotal)" itemEditEnd="callLater(calculateTotal)">
<mx:columns>
<mx:DataGridColumn dataField="label1" headerText="Order #"/>
<mx:DataGridColumn dataField="quant"
rendererIsEditor="true" editorDataField="value">
<mx:itemRenderer>
<mx:Component>
<mx:Box width="100%" creationComplete="value=data.quant">
<mx:Script>
<![CDATA[
[Bindable]
public var value: Number;
public function onValueChanged(val: Number) : void {
data.quant = value = val;
outerDocument.calculateTotal();
}
]]>
</mx:Script>
<mx:NumericStepper width="100%" stepSize="1" maximum="50"
value="{value}" change="onValueChanged(event.currentTarget.value)"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:TextInput text="Total: {total}"/>
<mx:Button label="Recalculate!" click="calculateTotal()" />
</mx:Application>
--- In [email protected], "s_hernandez01" <[EMAIL PROTECTED]> wrote:
>
> Thanks guys, I believe I would want the total to update itself as the
> user is changing the quantity, and not when they finish editing, but
> it's a temporary solution though. I didn't think about the editing
> part since I was stressing on the change event. If anyone else knows
> how I can code up the change event to my ArrayCollection in a datagrid
> so that the total gets updated promptly, PLEASE PLEASE PLEASE HELP ME!!!
>
> -Sal
>
>
> --- In [email protected], "Doug Lowder" douglowder@ wrote:
> >
> > You can use the grid's itemEditEnd handler to update the total after
> > the user has finished editing the item. Also, set the grid's
> > editable property to true and each column's editable property as
> > desired.
> >
> > If you want to actively track changes to the editor as the user
> > makes them instead of after the user has finished editing the item,
> > you may need to break the NumericStepper out as a component, and use
> > the change event to trigger your function.
> >
> > <mx:DataGrid id="grid" dataProvider="{myDP}" editable="true"
> > textAlign="center"
> > itemEditEnd="callLater(calculateTotal)">
> > <mx:columns>
> > <mx:DataGridColumn headerText="Product" dataField="name"
> > editable="false"/>
> > <mx:DataGridColumn id="qtyChanger" headerText="Qty"
> > dataField="qty"
> > rendererIsEditor="true"
> > itemRenderer="mx.controls.NumericStepper" editorDataField="value"/>
> > <mx:DataGridColumn headerText="Price" dataField="price"
> > editable="false"/>
> > </mx:columns>
> > </mx:DataGrid>
> >
> >
> > --- In [email protected], "s_hernandez01"
> > <s_hernandez01@> wrote:
> > >
> > > Can anyone tell me how I can get my event listener to update the
> > total
> > > when the quantity is changed using the numericStepper inside a
> > datagrid?
> > >
> > > Thanks
> > >
> > > Sal
> > >
> > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
> > > layout="absolute" xmlns="*" creationComplete="calculateTotal()">
> > >
> > >
> > > [Bindable]
> > > public var total:Number=0;
> > > [Bindable]
> > > public var numProducts:int=0;
> > > [Bindable]
> > > public var myDP:ArrayCollection = new ArrayCollection();
> > >
> > > public function calculateTotal():void{
> > > var t:Number = 0;
> > > var n:Number = 0;
> > > for(var i:int = 0; i < myDP.length; i++){
> > > n += myDP[i].qty;
> > > t += myDP[i].price * myDP[i].qty;
> > > }
> > > total = t;
> > > numProducts = n;
> > > }
> > >
> > > public function qtyChangeListener():void{
> > > qtyChanger.addEventListener("change", calculateTotal);
> > > }
> > >
> > > <mx:DataGrid id="grid" dataProvider="{myDP}" textAlign="center">
> > > <mx:columns>
> > > <mx:DataGridColumn headerText="Product" dataField="name"/>
> > > <mx:DataGridColumn id="qtyChanger" headerText="Qty" dataField="qty"
> > > rendererIsEditor="true" itemRenderer="mx.controls.NumericStepper"
> > > editorDataField="value"/>
> > > <mx:DataGridColumn headerText="Price" dataField="price"/>
> > > </mx:columns>
> > > </mx:DataGrid>
> > >
> > > <mx:Text text="{total}"/>
> > >
> > > </mx:Application>
> > >
> >
>
__._,_.___
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
| Software development tool | Software development | Software development services |
| Home design software | Software development company |
Change settings via the Web (Yahoo! ID required)
Change settings via email: Switch delivery to Daily Digest | Switch to Fully Featured
Visit Your Group | Yahoo! Groups Terms of Use | Unsubscribe
__,_._,___
