How to know when a Button in a Flex DataGrid itemRenderer is clicked

actionscript-3apache-flexbuttondatagriditemrenderer

I have a DataGrid component that displays a few columns of data. It has one additional column that displays a Button that allows the user to take an action with regard to the record. 

<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 that is available there, but unrelated to the data in the DataGrid.

What is the best way to catch the Button click in the parent component, and know what record it corresponds to?

Should I use a Custom Event, or an itemEditor, or something else completely?

Best Answer

You need to make the itemRenderer a class, and then reference your DataGrid from within that class utilizing the methods described here. You can then dispatch events from the DataGrid, which are easy to listen for in the container that holds it. What you don't want to do is rely on bubbling or attempt to listen to the itemRenderer directly. You will probably 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.

Related Topic