RE: [flexcoders] Image in DataGrid

[Tracy Spratt]

The image source must depend on the priority property, so you need something
like:

<mx:Image source="{data.priority + '.jpg'}" />

 

Tracy Spratt,

Lariat Services, development services available

  _____  

From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On
Behalf Of venkat eswar
Sent: Tuesday, March 10, 2009 8:43 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Image in DataGrid

 


Pls run the application.clicking the add button adds new rows.When i select
High from the combobox it should display  1.jpg. But imgstr1  as bindable ,
it update all the rows. How to solve this?


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
creationComplete="init()" layout="absolute">
    <mx:Script>
        <![CDATA[
        
        import mx.events.ListEvent;
        import mx.controls.Alert;
        import mx.collections.ArrayCollection;
        
        [Bindable]
        private var taskCol:ArrayCollection;
        
        public function init():void
        {
            grid.initialize();
            taskCol = new ArrayCollection();
        }
        
        public function add():void
            {
                taskCol.addItem({image: "",task: ""});
            }
        
[Bindable]
        public var imgStr1:String; 
            public function setImage(event:ListEvent):void
            {
                                    
            if(grid.selectedItem.priority == "High")
            {
                Alert.show("High");
                imgStr1 ="com/assets/1.jpg";
            }
            else if(grid.selectedItem.priority == "Medium")
            {
                Alert.show("Medium");
                imgStr1 ="com/assets/2.jpg";
            }
            else
            {
                Alert.show("Medium");
                imgStr1 ="com/assets/3.jpg";
            }
            
        }
        
        
        ]]>
    </mx:Script>
    
    
    <mx:AdvancedDataGrid id="grid" x="136" y="141" dataProvider="{taskCol}"
designViewDataType="tree">
        <mx:columns>
            <mx:AdvancedDataGridColumn id="imgCol" headerText="Column 1"
dataField="image">
            <mx:itemRenderer>
                 <mx:Component>
                 <mx:VBox>
                 <mx:Script>
                     <![CDATA[
                         
                         
                     ]]>
                 </mx:Script>
                    <mx:Image source="{outerDocument.imgStr1}" />
                     </mx:VBox>
                 </mx:Component>
                        </mx:itemRenderer>
            </mx:AdvancedDataGridColumn> 
            <mx:AdvancedDataGridColumn headerText="Column 2"
dataField="task">
            <mx:itemRenderer>
                                 <mx:Component>
                                 
                                       <mx:ComboBox  tabEnabled="true"
selectedIndex="1"
change="data.priority=selectedItem;outerDocument.setImage(event)"
text="{data.priority}">
                                            <mx:dataProvider>
                                               <mx:ArrayCollection>
 
<mx:String>High</mx:String>
 
<mx:String>Medium</mx:String>
 
<mx:String>Low</mx:String>
                                                   
                                                </mx:ArrayCollection>
                                                
                                             </mx:dataProvider>
                                             
                                       </mx:ComboBox>
                                 </mx:Component>
                                 
                              </mx:itemRenderer>
                              
                        </mx:AdvancedDataGridColumn>    
        </mx:columns>
    </mx:AdvancedDataGrid>
    <mx:Button x="396" y="250" label="Add" click="add()"/>
    
</mx:Application>