How to create custom Image display component in DataGrid

If you want to create custom Image display control which will be used in DataGrid to display Image or not, you should create a MXML component with overriden data property. The data propoety is used with ItemRenderes in DataGrid to set custom data provided by dataProvider (propoerty in DataGrid).

The component might be implemented in following way:

<?xml version="1.0" encoding="utf-8"?>
<mx:ViewStack xmlns:mx="http://www.adobe.com/2006/mxml" width="20" height="20">
    <mx:Script>
        <![CDATA[
            private var _imageVisible:Boolean=false;
            public function set imageVisible(isVisible:Boolean):void
            {
                if (isVisible)
                    this.selectedIndex=0;
                else
                    this.selectedIndex=1;
            }
            override public function set data(value:Object):void
            {
                   super.data = value;               
                if (value != null)
                    imageVisible = (String(value))=="true";
            }
       
        ]]>
    </mx:Script>
    <mx:Canvas label="Image" width="100%" height="100%">
        <mx:Image x="0" y="0" width="100%" height="100%" source="@Embed('custom/tick.png')"/>       
    </mx:Canvas>
    <mx:Canvas label="None" width="100%" height="100%"/>
</mx:ViewStack>

The custom Image which is being displayed or not is tick.png located in custom catalog. Property imageVisible sets visible to user or hides speciffied Image.

When you want to visualize XML data formed i.e. like this:

[Bindable]
private var _data:XML = <data>
				<image>true</image>
				<image>true</image>
				<image>false</image>
				<image>true</image>
				<image>false</image>
				<image>true</image>         
                        </data>;

Which may represent visibility of your Image, you should just set the dataField property in mx:DataGridColumn and use ItemRenderer to display component in rows.

The following code shows created compoent usage in DataGrid with Usage of ItemRenderers.

<mx:DataGrid dataProvider="{_data.children()}" width="100" height="200">
    <mx:columns>
        <mx:DataGridColumn headerText="Ticks" dataField="image">
            <mx:itemRenderer>
                   <mx:Component>  
                   <ns1:CustomImage/>                               
                   </mx:Component>
               </mx:itemRenderer>
        </mx:DataGridColumn>       
    </mx:columns>
</mx:DataGrid>