Flex datagrid custom itemEditor - not returning data

Question

Hi,
I am new to flex and this is a basic "How to" question.
I want to  write custom item editors and renderers for a datagrid column.
I am facing two problems here
1) override public function get data() : Object is not working. however, if the type of the column is just text then override public function get text():String is working. Specifying editorDataField in the datagrid column definition is working for some types ex:Strings, Numbers
2) Nothing is working for slightly more complex types like an Image. even editorDataField is not working. Somewhere between the user editing the data (in the case of an image, edit = browse, select & load an image) and grid asking for data at itemEditEnd, the entire data loaded by the user is disappearing and it is returning null or some default value I'd set it to in override public function set data().
I am aware that datagrid reuses both editors and renderers but I dono how the data user has set is getting lost while the focus is on the same cell
I have tried to use getter setter for this custom data field mentioned in editorDataField but when I do so, nothing works.. it fails even for string type
It should be a simple thing to do and I am sure I am making some silly mistake .. please help me out. It has driven me nuts since today morning..
any pointers would be really appreciated.

Answer 1

Hi,
thanks for the info. This is the understanding that I had after reading livedocs about item renderers.
I have given the correct editorDataField and dataField. But it isnt working..I am not sure what you mean by For complex renderers, make sure the property is properly implemented on the outer component.
The weird part is specifying editorDataField works for String and not for an image.  I am pasting some of code (highlighting relevant parts) below.. please have a look and tell me what I am missing.
Datagrid :
<mx:DataGrid id="dg" editable="true" rowHeight="100" width="861" x="10" y="10" height="498"
                 dataProvider="{this.slideArray}">
        <mx:columns>
            <mx:DataGridColumn headerText="Text" width="100"
                               resizable="true" sortable="false"
                               itemRenderer = "mx.controls.Label"
                               itemEditor="editors.TextEditor"
                               dataField="text" editorDataField="myData"/>
            <mx:DataGridColumn headerText="Image" width="600" resizable="true" sortable="false"
                               itemRenderer="mx.controls.Image"
                               itemEditor="editors.ImageEditor"
                               dataField="image" editorDataField="myData"/>           
        </mx:columns>
    </mx:DataGrid>
Text editor :
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          focusEnabled="true"
                          initialize="initEditor()">
    <mx:TextInput id="edit" width="{this.width}" height="{this.height}"/>
    <fx:Script>
        <![CDATA[
            import domain.Slide;  // has two properties : public  var text : String and public var image : mx.controls.Image;
            override public function set data(value:Object):void{
                super.data = value;
                this.edit.text = (value as Slide).text;
            public var myData : String; // editor data field
            import mx.binding.utils.BindingUtils;
            private function initEditor():void{
                BindingUtils.bindProperty(this,"myData", this.edit, "text");
        ]]>
    </fx:Script>
</s:MXDataGridItemRenderer>
ImageEditor :
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          width="100%" height="100%"
                          focusEnabled="true" contentBackgroundColor="#F1B4B4">
    <mx:Image id="img" x="0" y="0" width="200" height="200" />
    <s:Button label="Click to Add Image" id="addImageButton" click="addImageButton_clickHandler(event)"
              x="0" y="{this.height - addImageButton.height}"/>
    <fx:Script>
        <![CDATA[
            import domain.Slide;
            public var myData : Image; //editor data field
            override public function set data(value:Object):void{
                super.data = value;
                if( (value as Slide).image != null) this.img.source = (value as Slide).image.source;
            protected function addImageButton_clickHandler(event:MouseEvent):void
                // select image from file system
                var imgFilter : FileFilter = new FileFilter("Images","*.jpg;*.png;*.gif");
                var fileRef : FileReference = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileSelectHandler);
                fileRef.addEventListener(Event.OPEN, fileOpenHandler);
                fileRef.addEventListener(Event.CANCEL, fileCancelHandler);
                fileRef.browse([imgFilter]);
                function fileRefSelectListenerUp(e:Event):void{}
            private function fileSelectHandler(event : Event):void{
                var fileRef : FileReference = event.target as FileReference;
                fileRef.addEventListener(Event.COMPLETE, fileLoadHandler);
                fileRef.load();
            private function fileLoadHandler(event : Event) : void{
                var fileRef : FileReference = event.target as FileReference;
                this.myData = new Image;
                this.myData.name = fileRef.name;
                this.myData.source = fileRef.data;
                this.img.source = fileRef.data;
            private function fileOpenHandler(event : Event):void{}           
            private function fileCancelHandler(event : Event):void{}
        ]]>
    </fx:Script>
</s:MXDataGridItemRenderer>