Flex3 AdvancedDataGrid : how to add a new column based on existing one?

I have a AdvancedDataGrid in flex3 (Flex 3) with 4 columns:

id : int
category : String
name : String
isPreferred : Boolean

And I would like to add a fifth column

favorite : Image

The value of favorite will be based on the value of isPreferred : if true, then favorite will be a read-heart-icon, if false, a grey-heart-icon.
Thanks for your help.

Below is my code :

the mxml content

<xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import com.test.Purchase;
[Embed(source="..\assets\coeur_rouge.png")]
public static const ICON_FAVORITE:Class;
[Embed(source="..\assets\coeur_gris.png")]
public static const ICON_NEUTRAL:Class;
[Bindable]
public var myAC:ArrayCollection = new ArrayCollection();
public function init() :void {
var aPurchase:Purchase=new Purchase();
var anotherPurchase:Purchase= new Purchase();
aPurchase.id=120;
aPurchase.category="category1";
aPurchase.name="advantage 2";
aPurchase.isPreferred=true;
myAC.addItem(aPurchase);
anotherPurchase.id=220;
anotherPurchase.category="category2";
anotherPurchase.name="Nintendo DS";
anotherPurchase.isPreferred=false;
myAC.addItem(anotherPurchase);}
]]>
</mx:Script>
<?mx:AdvancedDataGrid id="dg" width="500" height="150" dataProvider="{myAC}">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="id" headerText="ID" width="300"/> <mx:AdvancedDataGridColumn dataField="category" headerText="Category" width="400"/>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name" width="900"/>
<mx:AdvancedDataGridColumn headerText="Fav?" dataField="isPreferred" width="700"/>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Application>
- the data object in action script public class Purchase { public function Purchase() {
  
  }
  
  private var _id:int = -1; private var _category:String = null; private var _productName:String = null;
  private var _preferred:Boolean=false;
  
  public function get id():int { return _id; }
  
  public function set id(pId:int):void { _id = pId; }
  
  public function get category():String { return _category; }
  
  public function set category(pCategory:String):void { _category = pCategory;
```
if ((_category == null) || (_category == "")) {               
    _category = "Default Category";
}
```
  }
  
  public function get name():String { return _productName; }
  
  public function set name(pName:String):void { _productName = pName;
```
if ((_productName == null) || (_productName == "")) {
    _productName = "default product name";
    category = _productName;
 }
```
  }
  
  public function get isPreferred() : Boolean { return _preferred; }
  
  public function set isPreferred(pPreferred:Boolean) :void { _preferred=pPreferred; } }

Solution

In order to do this you'll need an itemRenderer. Something like this should work:

<mx:AdvancedDataGridColumn headerText="favorite">
    <mx:itemRenderer>
        <mx:Component>
            <mx:Image source="{data.isPreferred ? ICON_FAVORITE : ICON_NEUTRAL}">
                <mx:Script>
                    <![CDATA[
                        [Embed(source="..\assets\coeur_rouge.png")]
                        public static const ICON_FAVORITE:Class;

                        [Embed(source="..\assets\coeur_gris.png")]
                        public static const ICON_NEUTRAL:Class;
                    ]]>
                </mx:Script>
            </mx:Image>
        </mx:Component>
    </mx:itemRenderer>
</mx:AdvancedDataGridColumn>

Please keep in mind that this piece of code is not reusable. If you need to use columns that show images a lot I recommend implementing a custom ImageColumn that extends mx:AdvancedDataGridColumn, has some kind of imageFunction as property and uses a custom itemRenderer which would use the column's imageFunction to show the appropriate image.