CODEWITHSUNDEEP
actionscript-3conditional-statementsitemrendereradvanceddatagrid
kris
kris

Reputation: 90

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

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>

Upvotes: 0

Views: 1112

Answers (3)

Adrian Pirvulescu
Adrian Pirvulescu

Reputation: 4340

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

Upvotes: 1

Drenai
Drenai

Reputation: 12397

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.

Upvotes: 0

CyanAngel
CyanAngel

Reputation: 1238

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

Upvotes: 1

Related Questions