conditionally add an image to datagrid using an item renderer in as3

Question

I am adding an image to a cell of datagrid using an item renderer embedded in a data grid column. I need to add an image to a cell only if data from the row of the cell meets certain requirements. something like below is what I am trying to achieve:

<mx:AdvancedDataGridColumn dataField="delete" headerText="Delete" >
        <mx:itemRenderer>
            <mx:Component>
                <mx:VBox horizontalAlign="center" verticalAlign="middle">
                    <mx:Script>
                        <![CDATA[                                       
                            public function showImage():void{
                                if(rowData.column1 == "image1"){
                                    image1.visible = true;
                                }
                                else{
                                    image1.visible = false;
                                }
                        ]]>
                    </mx:Script>
                    <mx:Image source="{image1}" visible="{showImage}"  id="deleteFile" click="" scaleX="0.1" scaleY="0.1" horizontalCenter="true" horizontalAlign="center"/>                                    
                </mx:VBox>
            </mx:Component>
        </mx:itemRenderer>
            </mx:AdvancedDataGridColumn>

how do I do this? the conditional statement is fine but how can i call this appropriately that an image will only show if the statement is met. — kris, May 22 '14 at 10:30
override `public function set data()` in your item renderer code add this in — CyanAngel, May 22 '14 at 10:32
ive added my complete code for the datagrid column above, could you elaborate on your previous comment. I'm a bit lost — kris, May 22 '14 at 10:42

score 1 · Accepted Answer · answered May 22 '14 at 10:53

1

Add the following code to <mx:Script>

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

set data is the function that the grid calls to do set up, this is the best function to override to apply conditional properties to the ItemRenderer

answered May 22 '14 at 10:53

CyanAngel

1,240
1
14
28

It this case it works but the best place to compute such things is not set data but commitProperties – Adrian Pirvulescu May 22 '14 at 11:14
your probably right, I've just been going off the Adobe doc's, which seem encourage set data – CyanAngel May 22 '14 at 11:22

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

Check this out

  <mx:AdvancedDataGridColumn dataField="delete" headerText="Delete" >
    <mx:itemRenderer>
        <mx:Component>
            <mx:VBox horizontalAlign="center" verticalAlign="middle">
                <mx:Image source="{image1}" visible="{data.image1 == 'image1'}"  id="deleteFile" click="" scaleX="0.1" scaleY="0.1" horizontalCenter="true" horizontalAlign="center"/>                                    
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
 </mx:AdvancedDataGridColumn>

But I encourage you to build a separate class and set it as itemRenderer for the Column. Get more details on similar stackoverflow questions:

How can I know when a Button in a Flex DataGrid itemRenderer is clicked?

Flex 4 - DataGrid with Button in cells

edited May 23 '17 at 12:05

Community

1
1

answered May 22 '14 at 11:04

Adrian Pirvulescu

4,308
3
30
47

isn't a binding risky since data could be set to null by the `dataProvider`? – CyanAngel May 22 '14 at 11:07
@CyanAngel if dataProvider is null then there is no row inside the grid. So no need to call any of the renderers. Please try the sample and convince yourself that there is no runtime error. – Adrian Pirvulescu May 22 '14 at 11:08
Fair enough, same problem with with properties on untyped objects. But you've already addressed that by suggesting custom classes, which I whole heartedly agree with – CyanAngel May 22 '14 at 11:13
1

@CyanAngel Yes, it would definitely be risky. A null check should be done regardless. – Drenai May 22 '14 at 11:16

score 0 · Answer 3 · answered May 22 '14 at 10:54

CyanAngel is correct with comment about overriding set data

Update CityAngle just added the same answer as me, but I'll leave this here for posterity:-)

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

     if(value.column1 == "image1"){
            image1.visible = true;
     }
     else{
          image1.visible = false;
     }

}

data will be an object of they type that you have put in the DataGrids dataProvider.

conditionally add an image to datagrid using an item renderer in as3

3 Answers3