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

Question

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; } }

score 0 · Accepted Answer · answered Apr 06 '11 at 08:40

0

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.

answered Apr 06 '11 at 08:40

Gerhard Schlager

3,155
1
31
53

Gerhard you`re right: I wanted to illustrate my question. Can you suggest a simplier alternative (than extending AdvancedDataGridColumn) as I am new in flex3. How would you do that? – xalibeut Apr 06 '11 at 14:17
The _simple_ solution is the one I posted in the code snippet above. It uses an `Image` as `itemRenderer` where the `source` changes depending on the value of `data.isPreferred`. I've also outlined how you could implement an `ImageColumn`. I'd implement an `imageFunction` for the column (like its `labelFunction`). The custom renderer can access the column through its `listData`. Try it yourself. It's not that complicated when you understand how columns and renderers work. Please post another question if you want to create such an `ImageColumn` and have a specific question. – Gerhard Schlager Apr 06 '11 at 14:28
I test the solution proposed, but this is not compiling <mx:AdvancedDataGridColumn headerText="favorite"> <mx:itemRenderer> <mx:Component> <mx:Image source="{data.isPreferred ? ICON_FAVORITE : ICON_NEUTRAL}"/> </mx:Component> </mx:itemRenderer> &ltl;/mx:AdvancedDataGridColumn> – xalibeut Apr 06 '11 at 14:29
-1120: Access of undefined property ICON_NEUTRAL. -1120: Access of undefined property ICON_FAVORITE. – xalibeut Apr 06 '11 at 14:35
Gerhard, appart from this visibility issue (looks like variable are not visible inside mx:itemrenderer and mx:component) everything works fine. I just put the string constants. Thank you for your help. – xalibeut Apr 06 '11 at 14:43
Did you remove the `` from the code snippet? The item renderer can't access your constants in your application. They have to be inside the renderer. – Gerhard Schlager Apr 06 '11 at 14:45
Please mark this question as answered so that others know that it is resolved. – Gerhard Schlager Apr 06 '11 at 14:48
yes I do, but the access issue remains. But, you made my day. Thanks. How do I mark the question as answered? – xalibeut Apr 06 '11 at 15:01
That's why you have to put the constants _inside_ the item renderer (like I did). You can't access anything that's ouside. Well, at least not easily... – Gerhard Schlager Apr 06 '11 at 15:17

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

1 Answers1