Geek Answers Handbook

How do I know when a button is clicked on a DataGrid FlexGrid data element?

I have a DataGrid component that displays multiple columns of data. It has another column that displays a button that allows the user to take action on the recording.

<mx:DataGrid dataProvider="{myData}"> <mx:columns> <mx:DataGridColumn dataField="firstName" headerText="First Name" width="75" /> <mx:DataGridColumn dataField="LastName" headerText=" Last Name" width="150" /> <mx:DataGridColumn dataField="phone" headerText="Phone" width="120" /> <mx:DataGridColumn headerText="" width="110"> <mx:itemRenderer> <mx:Component> <mx:Box horizontalAlign="center" width="100%"> <mx:Button label="Take Action" /> </mx:Box> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid>

I need to perform an action in the parent component using other data available there, but not related to the data in the DataGrid.

What is the best way to catch a button click in a parent component and find out which record matches?

Should I use a custom event or itemEditor or something else entirely?

+4
source share
2 answers

Thanks Joel. Here is the final solution that I came up with after reading this article (which I read before). I want to add an element whose Button was pressed on an array that is a property of another element, so I pass the "other element" to the DataGrid component as a property and perform actions against it in the function call from itemRenderer:

 /* CustomDataGrid.mxml */ <mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ public var otherData:Object; public function takeAction(item:Object):void { otherData["children"][0] = item; } ]]> </mx:Script> <mx:columns> <mx:DataGridColumn dataField="firstName" headerText="First Name" width="75" /> <mx:DataGridColumn dataField="LastName" headerText=" Last Name" width="150" /> <mx:DataGridColumn dataField="phone" headerText="Phone" width="120" /> <mx:DataGridColumn headerText="" width="110" itemRender="ActionButtonItemRenderer" /> </mx:columns> </mx:DataGrid> /* ActionButtonItemRenderer.as */ package { import flash.events.MouseEvent; import mx.controls.Button; public class ActionButtonItemRenderer extends Button { public function ActionButtonItemRenderer() { super(); label = "Take Action"; } override protected function clickHandler(event:MouseEvent):void { super.clickHandler(event); var owner:CustomDataGrid = listData.owner as CustomDataGrid; owner.takeAction(data); } } }
+1
source

You need to make itemRenderer a class, and then reference your DataGrid from this class using the methods described here . Then you can send events from the DataGrid that are easy to listen to in the container that supports it. What you don't want to do is rely on the bubble or try to listen directly to itemRenderer. You might want to create a custom event that carries the data property of the DataGrid row so that your event listener can quickly access this information.

+2
source

More articles:


All Articles