CODEWITHSUNDEEP
actionscript-3apache-flex
GavinR
GavinR

Reputation: 6244

Click Event Fire when Checkbox in ItemRenderer is Clicked

I have an itemRenderer custom component inline of my DataGrid component. I need to have an event fire in the containing class (at the same level as the DataGrid) when the checkbox is checked or unchecked (in the itemRenderer component). How would I do this?

<mx:DataGrid id="dg" width="100%" dataProvider="{dgProvider}" editable="true" itemClick="dg_itemClickHandler(event)">
    <mx:columns>
        <mx:DataGridColumn  dataField="selected" width="100" headerText="Include:" textAlign="center" editable="true" editorDataField="cbSelected" rendererIsEditor="true">
            <mx:itemRenderer>
                <mx:Component>
                    <!-- We need this canvas because it centers the checkbox: -->
                    <mx:Canvas width="100" textAlign="center">
                        <mx:Script>
                            <![CDATA[
                                // Define a property for returning 
                                // the new value to the cell.
                                [Bindable]
                                public var cbSelected:Boolean;


                                protected function selectedCheckbox_clickHandler(event:MouseEvent):void
                                {
                                    cbSelected = selectedCheckbox.selected;
                                }
                            ]]>
                        </mx:Script>
                        <mx:CheckBox 
                            id="selectedCheckbox" 
                            selected="{data.selected}" 
                            horizontalCenter="0"
                            click="selectedCheckbox_clickHandler(event)" />
                    </mx:Canvas>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
</mx:columns>

Upvotes: 0

Views: 3647

Answers (1)

JeffryHouser
JeffryHouser

Reputation: 39408

There are a few things at play here... the first is what you asked for and the second is what I think you really need.

First, when you say "Containing Class" I assume you refer to the DataGrid's parent. That is very different than the itemRenderer's parent. To get the DataGrid's parent to dispatch an event from the itemRenderer's code, I would make use of outerDocument. 

protected function selectedCheckbox_clickHandler(event:MouseEvent):void
{
  cbSelected = selectedCheckbox.selected;
  outerDocument.dispatchEvent(new Event('myEvent'));
}

I don't like the user of outerDocument because it breaks encapsulation.

However, I suspect that you need to have a listener in the parent, and it doesn't matter if the parent fires the event or not. In that case, you can just create an event that bubbles using the Bubble property of your event:

protected function selectedCheckbox_clickHandler(event:MouseEvent):void
{
  cbSelected = selectedCheckbox.selected;
  outerDocument.dispatchEvent(new Event('myEvent',true));
}

You can listen for the event on any component in the hierarchy chain all the way up to the main Application. That includes your DataGrid and your DataGrid's parent container. The event won't show up in MXML code hinting but you can add eventListeners using the addEventListener method:

dataGrid.addEventListener('myEvent',myEventListener);

When you need to tell the parent to do something from an itemRenderer; bubbling the event from the renderer is my preferred approach.

Upvotes: 1

Related Questions