How to load an image on spark DataGrid column?

Question

I use a fileReference.browse() to select an image file from the harddrive.

How can I load the selected image on DataGrid column?

Thanks

Edit:

My coding is here:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600">

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        public var loadFile:FileReference; 
        [Bindable]
        private var arrayCollection : ArrayCollection = new ArrayCollection ();

        private function onBrowseButtonClicked(event : MouseEvent) : void
        {
            loadFile = new FileReference();
            loadFile.addEventListener(Event.SELECT, selectHandler);
            var fileFilter:FileFilter = new FileFilter("Images: (*.jpeg, *.jpg, *.gif, *.png)", "*.jpeg; *.jpg; *.gif; *.png");
            loadFile.browse([fileFilter]);
        }


        private function selectHandler(event:Event):void
        {

            loadFile.addEventListener(Event.COMPLETE, loadCompleteHandler);
            loadFile.load();


            employeeImageName.text =event.target.name;

        }

        private var data:ByteArray;
        private function loadCompleteHandler(event:Event):void
        {
            var fileReference:FileReference=event.target as FileReference;
            data=fileReference["data"];
            employeeImage.source = data;
        }


        private function storeInputs(event:MouseEvent) : void
        {           
            arrayCollection.addItem({
                name : employeeName.text, 
                id : employeeID.text,
                email : employeeEmail.text,
                gender : genderOption.selectedValue,
                address : employeeAddress.text,
                img : data
            });

        }                       
    ]]>
</fx:Script>

<fx:Declarations>
    <s:RadioButtonGroup id="genderOption"/>

</fx:Declarations>

<s:layout>
    <s:HorizontalLayout/>
</s:layout>
<mx:HDividedBox width="100%" height="100%">
    <s:Panel id="mainPanel" title="Employee Details" height="100%" width="50%">
        <s:Form id="mainForm" height="100%" width="100%" left="10%" right="10%" top="10%">
            <s:FormItem id="nameLabel" label="Employee Name">
                <s:TextInput id="employeeName" />
            </s:FormItem> 
            <s:FormItem id="idLabel" label="Embloyee ID">
                <s:TextInput id="employeeID" maxChars="6"/>
            </s:FormItem>
            <s:FormItem id="emailLabel" label="Email">
                <s:TextInput id="employeeEmail" />
            </s:FormItem>
            <s:FormItem id="genderLabel" label="Gender">                
                <s:HGroup>
                    <s:RadioButton group="{genderOption}" label="Male" id="male" />
                    <s:RadioButton group="{genderOption}" label="Female" id="female"/>
                </s:HGroup>
            </s:FormItem>

            <s:FormItem id="addressLabel" label="Address">
                <s:TextArea id="employeeAddress"/>
            </s:FormItem>
            <s:FormItem id="imageLabel" label="Image">
                <mx:HBox>
                    <s:TextInput id="employeeImageName"/>
                    <s:Image id="employeeImage" height="100" width="100"/>
                    <s:Button id="imageButton" label="Browse" click="onBrowseButtonClicked(event)"/>
                </mx:HBox>
            </s:FormItem>
            <s:FormItem>
                <s:layout>
                    <s:HorizontalLayout gap="10"/>
                </s:layout>
                <s:Button id="submitButton" label="Submit" click="storeInputs(event)"/>                 
            </s:FormItem>
        </s:Form>
    </s:Panel>  


    <s:DataGrid width="100%" height="100%" dataProvider="{arrayCollection}" id="employeeGrid" variableRowHeight="true">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn headerText="Name" dataField="name" />
                <s:GridColumn headerText="ID" dataField="id"/>
                <s:GridColumn headerText="Email" dataField="email"/>
                <s:GridColumn headerText="Gender" dataField="gender" />
                <s:GridColumn headerText="Address" dataField="address" itemEditor="mx.controls.TextArea"/>
                <s:GridColumn headerText="Employee" dataField="img">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <mx:HBox>
                                    <s:Image id="image" source="outerDocument.data" />
                                </mx:HBox>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

</mx:HDividedBox>

Here, all the controls are worked well in form. I could get the image and i could load the selected image on the image control. But I couldn't display the image in the DataGrid column when the submit button was clicked. This is my problem.

Answer 1

I did It

arrayCollection.addItem({
                name : employeeName.text, 
                id : employeeID.text,
                email : employeeEmail.text,
                gender : genderOption.selectedValue,
                qual : getCheckBoxexValues(),
                address : employeeAddress.text,
                imageData: loadFile.data
            });

In grid

<s:GridColumn headerText="Employee" id="imageColumn" dataField="imageData" >
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:Image id="image"  width="120" height="80" source="{data.imageData}"  visible="true" />
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>

Thank you

Answer 2

It can be done using flex custom itemrenderer. I've found a tutorial for you here . Gives a detailed explanation.