flex custom event with item renderer and custom component

Question

OK you Flex experts, I need some help. I have a datagrid in my main application with an itemrenderer (mxml). When you press the image in the ir, a custom component (mxml) opens. The cc has a button that is supposed to call a function in the main application which updates the arraycollection (dataprovider) and therefore the datagrid updates. I've tried several variations of parentDocument, outerDocument, and custom events, but I cannot get that function to work from the button. I think it's b/c I have the cc nested in the ir. Anything that I call directly from within the ir works.

Does anyone have any suggestions or even better a working example I could take a look at?

Here's what I tried:

//in main application

public function creationComplete_handler(event:FlexEvent):void{
   dgList.addEventListener("ceRD", fnt_ceRD);
}
public function fnt_ceRD():void {
    Alert.show("called");
}


<mx:AdvancedDataGrid id="dgList" dataProvider="{acLists}" designViewDataType="flat">
   <mx:columns>
      <mx:AdvancedDataGridColumn headerText="Roster" sortable="false" itemRenderer="c_CO.AppLocal.ListManager.iRenderers.irADVStudents" />   </mx:columns>
</mx:AdvancedDataGrid>

In itemrenderer, used the popupmanager so that I could center on top of application as opposed to button in datagrid

public function btnRoster(event:MouseEvent):void{
    var rShow:rosterDetails = new rosterDetails();
    PopUpManager.addPopUp(rShow, FlexGlobals.topLevelApplication.mainContent, true);
    PopUpManager.centerPopUp(rShow);
}

In custom component:

 <fx:Metadata>
        [Event("ceRD", true, false)]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
        import flash.events.Event;

            protected function btnSave(event:MouseEvent):void {

            var i_ceRD:Event = new Event("ceRD");
            dispatchEvent(i_ceRD);
            PopUpManager.removePopUp(this);

        }

        ]]>
    </fx:Script>

Answer 1

You are experiencing trouble because the listener for "ceRD" is added to the DataGrid while the event is being dispatched from the Roster Details component. There is no relationship between the DataGrid and RosterDetails.

Consider moving the logic to create and display the RosterDetails out of the ItemRenderer. I would suggest having the irADVStudents renderer dispatch an 'imageClick' event which can be handled in your main application.

Inline renderers are helpful for adding simple event handling:

<mx:AdvancedDataGrid dataProvider="{acLists}">
    <mx:columns>
        <mx:AdvancedDataGridColumn headerText="Roster" sortable="false">
            <mx:itemRenderer>
                <mx:Component>
                    <local:irADVStudents imageClick="outerDocument.onRoster(event)"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:AdvancedDataGridColumn>
    </mx:columns>
</mx:AdvancedDataGrid>

Then you can simply add a listener for your 'save' event. Ensure to remove the listener as this is a potential memory leak. (A weak listener is also an option).

public function onRoster(event : Event) : void
{
    var rosterDetails : RosterDetails = new RosterDetails();
    rosterDetails.addEventListener("save", onSave);

    PopUpManager.addPopUp(rosterDetails, this, true);
    PopUpManager.centerPopUp(rosterDetails);
}

protected function onSave(event:Event):void
{
    Alert.show("SAVED");
}

Custom events can be used to pass data around the application, such as which item was clicked on from the renderer.