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.