using an image item render in a flex data grid

Question

I'm attempting to add an image to a datagrid item render dynamically in flex.

Here is my DataGrid code

The value of "str" in the getImagePath function is correct.

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
             doubleClickEnabled="true">
    <mx:Script>
        <![CDATA[
            private function userLabelFunction(item:Object, column:DataGridColumn):String
            {
                return item.user.username;
            }

            private function getImagePath(item:Object, column:DataGridColumn):String
            {
                var str:String=item.track["artwork-url"]

                if (str == "")
                {
                    str=item.user["avatar-url"];
                }

                return str;

            }
        ]]>
    </mx:Script>
    <mx:columns>
        <mx:DataGridColumn dataField="artwork-url"
                           headerText="Art"
                           itemRenderer="components.content.contents.datagrids.ImageRenderer"
                           labelFunction="getImagePath"/>
        <mx:DataGridColumn dataField="title"
                           headerText="Title"
                           minWidth="100"/>
        <mx:DataGridColumn dataField="user"
                           headerText="User"
                           labelFunction="userLabelFunction"/>
        <mx:DataGridColumn dataField="bpm"
                           headerText="BPM"/>
    </mx:columns>
</mx:DataGrid>

I cant manage to get that image url value into my item renderer

I've tried overriding the set data property like so

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
         height="60"
         verticalAlign="top"
         creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import components.content.contents.containers.ContentContainerSoundCloud;
            import mx.core.Application;
            import mx.controls.dataGridClasses.DataGridColumn;
            import com.adobe.viewsource.ViewSource;

            [Bindable]
            public var imgPath:String;

            private function init():void
            {

            }
            override public function set data(value:Object):void
                    {
                        super.data = value.track["artwork-url"];

                        imgPath =super.data.valueOf()
                        trace(imgPath)

                    }
        ]]>
    </mx:Script>

    <mx:Image source="{imgPath}" id="rowimage"/>
</mx:HBox>

But in doing so the trace output looks like so

<artwork-url>
  <mx_internal_uid>7C98E149-1984-584C-7600-AD8940BF2A9C</mx_internal_uid>
</artwork-url>

I was expecting the "value" property in the set data to recieve the string I sent it from the get imagePathFunction but it fact it returns my entire XMLList.

What am I doing wrong?

Answer 1

Based on your trace output it looks like you are retrieving the wrong value from your dataProvider to set as the source. Without seeing your actual data, it's hard to know what the exact issue may be.

That said, I would re-work your itemRenderer a bit. First, you don't need to put a single image in an HBox. Just use an Image. Also, you should not need to specify the height in the Renderer, the DataGrid should take care of such positioning.

I also removed the creationComplete listener, since no code was in it. And instead of using binding, I just set the soruce property on the component in the data set method. I also set the super.data to the value, not a processed value; and I performed the processing when setting the value's source. The updated code is like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"
         >
    <mx:Script>
        <![CDATA[
            import components.content.contents.containers.ContentContainerSoundCloud;
            import mx.core.Application;
            import mx.controls.dataGridClasses.DataGridColumn;
            import com.adobe.viewsource.ViewSource;

            [Bindable]
            public var imgPath:String;

            override public function set data(value:Object):void
                    {
                        super.data = value;

                        this.source =value.track["artwork-url"];
                        trace(imgPath)

                    }
        ]]>
    </mx:Script>

</mx:Image>

My preferred method in itemRenderers is to listen to the dataChange event, however that's just personal preference. There is nothing wrong w/ overriding the data set method.