Hello, I'm trying to build a itemRenderer for a currency field in a DataGrid in Flex 2. Feels like I'm --><-- this close, but I've been fighting with the other 2% for the last several days and I'm not getting anywhere.
Below is a sample app that I'm trying to use the itemRenderer in... simply supplies the DataGrid with a dataProvider based on an Bindable XML doc/model (that will eventually be loaded in from an external file). The "cost" field utilizes the currency editor (also below), and rendererIsEditor is set to true so it's always visible. The two problems I'm having are: 1. the app's itemEditEnd event doesn't seem to be firing as expected. If I'm editing the cost field, I have to click *twice* (or more) on fields other than the cost field for the event to actually fire. I expect the event to fire as soon as I click elsewhere in the app. 2. once the itemEditEnd event *does* fire for the cost field, it doesn't seem to indicate that the bound data is getting updated. Edit the cost, and get the itemEditEnd event to fire (by clicking twice outside of the field) and the trace in the app's textarea reports that the cost is it's original value rather than the value you just entered. Any help would be greatly appreciated! Thanks in advance, -Carl // APPLICATION : dgTester.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" width="500" creationComplete="initApp()"> <mx:Script> <![CDATA[ import mx.events.DataGridEvent; import mx.collections.XMLListCollection; [Bindable] public var _xlcData:XMLListCollection; private function initApp():void { _xlcData = new XMLListCollection(xmlBooks.root.book.copy()); } private function onItemEditEnd(e:DataGridEvent):void { taTrace.text=_xlcData.toXMLString(); } ]]> </mx:Script> <mx:XML id="xmlBooks"> <mx:source> <root> <book> <title>Book 1</title> <author>A. B.</author> <cost>25.00</cost> </book> <book> <title>Book 2</title> <author>C. D.</author> <cost>125.00</cost> </book> </root> </mx:source> </mx:XML> <mx:DataGrid id="dgridTest" editable="true" dataProvider="{_xlcData}" width="100%" itemEditEnd="onItemEditEnd(event)"> <mx:columns> <mx:DataGridColumn headerText="Title" dataField="title" editable="true" /> <mx:DataGridColumn headerText="Author" dataField="author" editable="true" /> <mx:DataGridColumn headerText="Cost" dataField="cost" editable="true" width="130" editorDataField="currencyString" itemRenderer="CurrencyEditor" rendererIsEditor="true" /> </mx:columns> </mx:DataGrid> <mx:TextArea id="taTrace" width="100%" height="100" /> </mx:Application> // CURRENCY ITEMRENDERER : CurrencyEditor.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml";> <mx:Script> <![CDATA[ import mx.utils.StringUtil; import mx.controls.NumericStepper; import mx.events.NumericStepperEvent; import flash.events.MouseEvent; private var _focusArea:TextInput; private var _currentStepValue:Number; private var _xmlCurrency:XML; [Bindable] public var dollar:Number = 0; [Bindable] public var cent:Number = 0; // ** GETTERS and SETTERS override public function set data(value:Object):void { if(value){ _xmlCurrency = value as XML; var cvalue:String = String(value["cost"]); currencyString=cvalue; } } /* override public function get data():Object { // use custom field currencyString() instead of data } */ public function get currencyString():String { return dollarText.text+'.'+centText.text; } public function set currencyString(value:String):void { var arySplitCurrency:Array=String(mx.utils.StringUtil.trim(value)).split("."); dollar=int(arySplitCurrency[0]); if (arySplitCurrency.length>1){ cent = arySplitCurrency[1]; } else { cent = 0; } } private function setStepperValue(event:NumericStepperEvent):void { if (!_focusArea)_focusArea=dollarText; switch(_focusArea){ case dollarText: if(NumericStepper(event.target).value < 1) NumericStepper(event.target).value = 0; if(NumericStepper(event.target).value > 9999) NumericStepper(event.target).value = 9999; dollar = NumericStepper(event.target).value; break; case centText: if(NumericStepper(event.target).value > 99) NumericStepper(event.target).value = 0; if(NumericStepper(event.target).value < 0) NumericStepper(event.target).value = 99; cent = NumericStepper(event.target).value; break; } _focusArea.setSelection(0, _focusArea.text.length); } private function setTextFocus(event:Event):void { _focusArea = event.currentTarget as TextInput; TextField(event.target).setSelection(0, _focusArea.text.length); _currentStepValue = Number(_focusArea.text); currencyStepper.value = _currentStepValue; } private function setTextFormat(value:Number,theField:TextInput):String { if(theField==dollarText && value>0){ return String(value); } else { return (value < 10) ? ("0" + String(value)) : String(value); } } ]]> </mx:Script> <!-- numeric stepper with transparent background and background collored text to effectively "hide" the text box --> <mx:NumericStepper id="currencyStepper" x="55" y="0" height="100%" width="70" fontSize="0" textAlign="right" paddingLeft="80" focusAlpha="0" borderThickness="0" borderStyle="none" maximum="10000" minimum="-1" change="setStepperValue(event)" backgroundAlpha="0" color="{this.getStyle('backgroundColor')}" click="_focusArea.setFocus();" focusEnabled="false" /> <mx:HBox borderThickness="1" borderStyle="inset" id="currencyBox" x="0" y="0" horizontalGap="0" verticalAlign="center" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundAlpha="0"> <mx:Label text="$" textAlign="center" width="10" /> <mx:TextInput id="dollarText" height="100%" borderThickness="0" borderStyle="none" backgroundAlpha="0" textAlign="right" maxChars="4" text="{setTextFormat(dollar,dollarText)}" mouseDown="setTextFocus(event)" focusAlpha="0" editable="false" /> <mx:Label text="." textAlign="center" width="10" /> <mx:TextInput id="centText" height="100%" borderThickness="0" borderStyle="none" backgroundAlpha="0" textAlign="left" maxChars="2" text="{setTextFormat(cent,centText)}" mouseDown="setTextFocus(event)" focusAlpha="0" editable="false" /> </mx:HBox> </mx:Canvas>
