using an image item render in a flex data grid

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?

-------------Problems Reply------------

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.

Category:flex Views:0 Time:2010-07-07

Related post

  • How i find that an item is edited complete in data grid in Flex? 2011-08-03

    please tell me somebody that, How i find that an item is edited complete in data grid in Flex ? Actually i am using Flex 4 and develop application for AIR, I need to make an editable grid. all of my custom made editor is work but the native textinput

  • Highlight selected cell of a flex data grid 2009-08-25

    Hi I have a flex data grid.I need to highlight the selected cell of the data grid.can u please help me? --------------Solutions------------- AdvancedDataGrid does have a property selectionMode. Change property value single cell or multiple cells, you

  • Transposing a set of rows as column in a Flex Data Grid 2009-08-26

    I have an array like the following one public var sal:Array=[ {empNo:1001, sal:1000, exp:400}, {empNo:1002, sal:3000, exp:240}, {empNo:1003, sal:1000, exp:452}, {empNo:1004, sal:5000, exp:348}, ...... {empNo:1550, sal:2000, exp:330}, ]; I need to sho

  • How convert flex Data grid values to CSV format file? 2010-04-12

    I am new beginner, is it possible the covert flex data grid to CSV file format with out use any backend (java,php ..) file ? . Because I tried with out use bankend . is it convert or not ? So any one give suggest me . or which is best method to conve

  • How to assign a item render dynamically in flex? 2012-01-13

    I want to change a list's item render with code like this: booklist.itemRenderer = BookItemRender; BookItemRender is a subclass of s:ItemRenderer. It report error: 1067: Implicit coercion of a value of type Class to an unrelated type How to correctly

  • Order of events when there are nested items in a Flex data grid 2011-06-07

    Let’s say I have a data grid and there’s a method attached to clicking on any item in a row of the grid. Now, some of the items in the table row are also buttons. Each of these are associated with a different action. We only want one of these actions

  • Flex data grid: Check whether item renderer displays last row in grid 2012-02-03

    I'm currently working with the OLAPDataGrid component and got stuck at a relatively simple task: I want to style the last row of the grid differently from the rest, so my cell item renderer needs to know whether he's rendering the last row with conte

  • optimize flex data grid performance 2011-03-17

    I have a requirement to display a timeline chart in flex. as of now, i have accomplished it using a flex adg but it takes a lot of time to render[10-12sec for an avg vol of data]. Typically my data grid consists of 13 [Fixed] rows and 60 columns[one

  • flex data grid visibility when empty 2010-10-19

    I have data grid that measures the height according to the rows it has, but i need to disappear/ make invisible when i have no data, so the header will not just appear alone. --------------Solutions------------- Check your dataProvider each time it's

  • How can I use Flex to create a data grid and use it on a web page? 2009-07-29

    I want to render a very simple Flex data grid. How do I anchor the SWF flash file in the HTML? Do I need to compile a special .swf or can I use a 'standard' data grid .swf - and just pass the data to it? --------------Solutions------------- The way F

  • How to select rows using key board in data grid in flex 2010-06-15

    HI, I need to select rows using key board up and down arrow buttons in the flex data grid.Please give the solution. Thanks, Ravi --------------Solutions------------- You can move between cells and rows using keyboard navigation. I'm not sure how that

  • Flex spark list show a strange behavior, when i add an item render that is also spark item renderer 2011-08-10

    Flex spark list show a strange behavior, when i add an item render that is also spark item renderer. The problem is that when i adding the item renderer that is dynamically add, an extra space is added in the list when i add first item. my list code

  • Flex: Simulating a click on a button inside an item renderer of a data grid 2011-11-22

    I'm using a data grid with an item renderer that creates a toggle button. The idea is to have a list of items and only allow one to be selected and pre-select one at start. I've got the single button selection working, meaning that when I click on on

  • Adding a spesific data item to a Data Grid - Flex 4 2010-06-22

    I better explan what i mean: I have a Data Grid with automacticly genorated columns, i now need to add data items into a spesific row / column of this grid e.g. col 2 row 3. It dosnt have a data provider at the moment as i wish to be very selective a

  • Get data from dynamic HTTPService Asynchronous to populate an Advanced Data Grid Flex 2009-12-28

    I have to populate an Advanced Data Grid which have the following fields: Continent->State->Society-->Actual Value-->Estimate Value I want to simulate a financial market so i have to change some of the values by asynchronous request from

  • How to create a dynamic xml which populates an advanced data grid in flex air application 2009-12-28

    Is it possible to create a dynamic xml file which changes in some fields to populate an advanced data grid? I have to display continents, countries, society and its values but i want to change randomly only the value and not all toegether... The clie

  • JQuery data grid with sort, items, columns drag&drop. Is there any? 2010-04-05

    jQuery data grid with items&columns drag&drop, Items sort. Is there any? I need: Dragable\Dropable Items Drag and drop sorting of table columns Sort Items in columns You can experience the usefulness of Adobe Flex builder Data Grid and its Dr

  • Flex Advanced Data Grid w/ hierarchical data: How to access currentTarget fields on dragdrop event? 2011-02-08

    So this is driving me crazy. I've got an advanced data grid with a dataprovider that's an array collection w/ hierarchical data. Each object (including the children) has an id field. I'm trying to drag and drop data from within the ADG. When this hap

  • Problem working with Flex data management and PHP 2011-06-02

    I am working with a salary managment system in Flash Builder 4.5 for PHP. I am using a Flex data management system. I have a few issues which are addressed below: When I add an item to data grid and do not commit it, I am not able to delete it. This

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.090 (s). 11 q(s)