Conditionally change icons in datagrid rows using item click

Question

I have to designed a datagrid, in first column i have to use closed lock icon. when i click a row in a datagrid the selected rows' icon should change as opened lock icon. how i can achive this task in flex 3. please help me.

Answer 1

this is my coding for achieving above task: When lock is true lock image will display when false pen image will display. On item click the lock will be changed to true to false and vice versa..

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
 import mx.collections.ArrayCollection;
[Bindable]public var arc:ArrayCollection=new ArrayCollection([{college:"College0",lock:true,status:"in progress" }
,{college:"College1",lock:true,status:"in progress" }
,{college:"College2",lock:true,status:"in progress" }
,{college:"College3",lock:false,status:"in progress"}
]);
private function changeBookletLockStatus():void
{

    arc[dgBooklet.selectedIndex].lock = (arc[dgBooklet.selectedIndex].lock==false);
    arc.refresh(); 
} 
]]>
</mx:Script>


<mx:DataGrid sortableColumns="false" height="100%" width="100%" id="dgBooklet" dataProvider="{arc}" 
 alternatingItemColors="[0xfffffff, 0xe4e4e4]" itemClick="changeBookletLockStatus()" >
    <mx:columns> 
    <mx:DataGridColumn headerText="Column 1" dataField="college" />

    <mx:DataGridColumn headerText="icon" dataField="lock" width="40">
        <mx:itemRenderer>
        <mx:Component>
            <mx:HBox paddingLeft="2">
               <mx:Script>
                <![CDATA[
                    override public function set data( value:Object ) : void 
                    {
                       super.data = value;
                       img.source=data.lock==true?"assets/lock.png":"assets/pen.png";
                    }
                ]]>
                </mx:Script>
              <mx:Image id="img"  />
              </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>

    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Status" dataField="status" >
    </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

</mx:Application>