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.

i didn't have any idea about how to change icons by clicking items of datagrid. But i got answer for my question by using set data method within item renderer. :) — Santhosh Nayak, Jul 25 '11 at 07:13
Then be sure to answer your own question and select it as the answer. — JeffryHouser, Jul 25 '11 at 12:10
I posted a formal answer detailing the two different ways to update a renderer when the data changes. — JeffryHouser, Jul 26 '11 at 11:15

score 0 · Answer 1 · answered Jul 26 '11 at 11:14

0

There are two options for updating an itemRenderer when the data changes.

The first is to override the set data method; as you stated that works for you.
The second is to listen to the dataChange event and perform your updates in that event handler.

answered Jul 26 '11 at 11:14

JeffryHouser

39,401
4
38
59

Santhosh Nayak · Accepted Answer · 2011-09-03T04:59:41.423

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>

Conditionally change icons in datagrid rows using item click

2 Answers2