Looking for an example of a dynamically created Spark.DataGrid in Flash Builder

Question

I'm trying to create a DataGrid dynamically in Flash Builder AS3 code (not in the markup) but can't get any data to display. Here's how I'm created the grid:

for (var i:int = 0; i < numOfWinners; i++){
            if (list[i].Name[0])                        
                dataP.addItem({profilePic: list[i].ProfilePicUrl.toString(), name: list[i].Name.toString(), prizePic: list[i].ItemImageUrl.toString()});
            else
                dataP.addItem({profilePic: list[i].ProfilePicUrl.toString(), name: list[i].UserName.toString(), prizePic: list[i].ItemImageUrl.toString()});
        }

        // Create a new DataGridColumn object.
        var playerCol:GridColumn = new GridColumn("profilePic");
        playerCol.width = 110;

        var nameCol:GridColumn = new GridColumn("name");
        nameCol.width = 100;             
        nameCol.itemRendererFunction = MyCustomItemRendererFunction;            
        var prizePicCol:GridColumn = new GridColumn("prizePic");
        prizePicCol.width = 160;

        cols.addItem(nameCol);
        cols.addItem(playerCol);
        cols.addItem(prizePicCol);
        grid.columns = cols;            
        grid.dataProvider = dataP;



        private function MyCustomItemRendererFunction(item:Object, column:GridColumn):ClassFactory 
    {           
        // Create a Class Factory variable
        var myRendererObject:ClassFactory;

        // This is the "default" color is nothing else happens
        // I'm passing it a pointer to "MyItemRenderer"

        myRendererObject = new ClassFactory(ProfilePicRenderer);

        if (column.dataField == "profilePic")
        {
            myRendererObject.properties = { source: item.profilePic};
        }

        return myRendererObject;

    }

All the examples I seem to find are in the markup for a Flex 4 (MX + Spark) project.

What am I doing wrong here?

Thanks!

Answer 1

You can add ProfilePicRenderer as below:

var playerCol:GridColumn = new GridColumn("Profile Picture");
var profilePicItemRenderer:ClassFactory = new ClassFactory(ProfilePicRenderer);
playerCol.itemRenderer =  profilePicItemRenderer;
playerCol.width = 110;

where ProfilePicRenderer.mxml looks like below:

<?xml version="1.0"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    override public function set data(value:Object):void {
        if (super.data != value) {
            super.data = value;
        }
        image.source = "./images/" + data.profilePic;
    }
    ]]></fx:Script>
<s:Image id="image" width="50" height="50"/>

</s:GridItemRenderer>

Similarly add PrizePicRenderer as below:

var prizePicCol:GridColumn = new GridColumn("Prize Picture");
var prizePicRenderer:ClassFactory = new ClassFactory(PrizePicRenderer);
prizePicCol.itemRenderer =  prizePicRenderer;
prizePicCol.width = 160;

where PrizePicRenderer.mxml looks like below:

<?xml version="1.0"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    override public function set data(value:Object):void {
        if (super.data != value) {
            super.data = value;
        }
        image.source = "./images/" + data.prizePic;
    }
    ]]></fx:Script>
<s:Image id="image" width="50" height="50"/>
</s:GridItemRenderer>

Here is the sample application which adds the DataGrid dynamically with itemRenderer:

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    import mx.collections.ArrayList;

    import spark.components.DataGrid;
    import spark.components.gridClasses.GridColumn;

    private var dataP:ArrayCollection = new ArrayCollection([
        {"name": "Lebron James", "profilePic": "p1.jpeg", "prizePic": "t1.jpg"},
        {"name": "Stephen Curry", "profilePic": "p2.jpeg", "prizePic": "t2.jpg"},
        {"name": "Kevin Durant", "profilePic": "p3.jpeg", "prizePic": "t3.jpg"},]) ;

    private function addDataGrid():void
    {
        var grid:DataGrid = new DataGrid();

        var nameCol:GridColumn = new GridColumn("Name");
        nameCol.width = 100;
        nameCol.dataField = "name";

        var playerCol:GridColumn = new GridColumn("Profile Picture");
        var profilePicItemRenderer:ClassFactory = new ClassFactory(ProfilePicRenderer);
        playerCol.itemRenderer =  profilePicItemRenderer;
        playerCol.width = 110;

        var prizePicCol:GridColumn = new GridColumn("Prize Picture");
        var prizePicRenderer:ClassFactory = new ClassFactory(PrizePicRenderer);
        prizePicCol.itemRenderer =  prizePicRenderer;
        prizePicCol.width = 160;

        var cols:ArrayList = new ArrayList();
        cols.addItem(nameCol);
        cols.addItem(playerCol);
        cols.addItem(prizePicCol);
        grid.columns = cols;

        grid.dataProvider = dataP;
        vGroup.addElement(grid);
    }
    ]]></fx:Script>
<s:VGroup id="vGroup" paddingTop="10" paddingLeft="10"
                    paddingBottom="10" paddingRight="10">
    <s:Button label="Click to build DataGrid dynamically." click="addDataGrid()"/>
</s:VGroup>
</s:Application> 

I assume you have picture files in your project and dataProvider is well defined. Hope this is helpful.

Here is the ActionScript version of ProfilePicRenderer which is ProfilePicRendererAS.as if you don't want MXML.

package {
import spark.components.Image;
import spark.components.gridClasses.GridItemRenderer;

public class ProfilePicRendererAS extends GridItemRenderer {
private var image:Image;
public function ProfilePicRendererAS() {
    super();
    image = new Image();
    image.width = 50;
    image.height = 50;
    this.addElement(image);
}
override public function set data(value:Object):void {
    if (super.data != value) {
        super.data = value;
    }
    image.source = "./images/" + data.profilePic;
}
}
}