Question

Let’s say I have a data grid and there’s a method attached to clicking on any item in a row of the grid. Now, some of the items in the table row are also buttons. Each of these are associated with a different action. We only want one of these actions to be performed. Here is some sample code:

<mx:DataGrid id="dataGrid" dataProvider="{data}" itemClick="selectRow()">
    <mx:columns>
        <mx:DataGridColumn dataField="name" />
        <mx:DataGridColumn id="choose" headerText="Make a choice">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox>
                        <renderers:MyButton label="Choose Wisely" click="{outerDocument.choiceMade()}"/>
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

My question is:

When the user selects a button item in the row, both methods (selectRow & choiceMade) are executed. Since both methods are
executed, is the order of both fixed
somehow? Is the button method (choiceMade) always
fired before the row method (selectRow), is it
the other way around, or are they
both executed asynchronously?

The thing I’m questioning is that we have currently a member variable to track which selection was made and to ignore the the contents of the other method (the else portion of the method resets this value). Now, if the methods just happen to execute in a different order (or at the same time), the behavior will be unpredictable.

I don’t have a good handle on how all this works so any light you can shed on how Flex fires these methods will be appreciated. Is the member variable flag the way to do this (it smells so bad)?

Answer 1

Both events will be dispatched and it will happen pretty much at the same time. You really shouldn’t count on an execution order when working with events. That’s not very good practice.

As for your specific problem, you can do this:

<renderers:MyButton label="Choose Wisely" 
                    click="event.stopImmediatePropagation(); 
                           outerDocument.choiceMade()" />

It will stop the click event from propagating through the displaylist and so the datagrid will not receive an itemclick event. The selectrow() method will not be executed when you click on the button.