how to Move state dynamically using image click within Datagrid itemRenderer ?

Question

i used play button image within datagrid iteam renderer, if i click image then move to another state (by using currentState ='play') . so i tried like

<mx:DataGridColumn  textAlign="center"  headerText="" dataField="col2">
 <mx:itemRenderer>
  <mx:Component>
  <mx:HBox  textAlign="center"  paddingLeft="17">
         <mx:Image   source="@Embed(source='image/play_button.png')" click="currentState='Playsystem'"/>
    </mx:HBox>
  </mx:Component>
 </mx:itemRenderer>

but it's shows error like undefined state 'Playsystem'. But Already i have state . What did i worng .? Why error shows like this ?

Answer 1

You are getting this error because currentState is not a defined property of Component.

You need to change click="currentState='Playsystem'" to click="this.parent.parent.parent['currentState'] = 'Playsystem'"

as in:

<mx:DataGrid bottom="0" top="37" left="0" dataProvider="{dataAry}" width="340">
<mx:columns>
<mx:DataGridColumn  textAlign="center"  headerText="" dataField="col2">
 <mx:itemRenderer>
  <mx:Component>
  <mx:HBox  textAlign="center"  paddingLeft="17">
         <mx:Image   source="@Embed(source='125x125.gif')" click="this.parent.parent.parent['currentState'] = 'Playsystem'"/>
    </mx:HBox>
  </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

But I wouldn't do that way. It's kinda hacky. What I recommend is actual write a class for the component and have it listen and dispatch the click event to the container. More info