[flexcoders] Image in DataGrid

[venkat eswar]

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>