Main application can't capturing custom event Flex

Question

I have a problem when despatching an custom event from my "ItemRendered" to "Main application",the function "avatarSelectedHandler()" is not called when I click in the "CheckBox" (ItemRendered) located in the "DataGrid", I followed the official doc adobe but unfortunately I have not led to a solution.

below my code :

Try.mxml(Main application)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="initApps()">

<fx:Script>
    <![CDATA[
        import entity.Avatar;
        import events.AvatarSelected;
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;

        [Bindable]
        private var listAvatar:ArrayCollection=new ArrayCollection();




        public function initApps():void{
            getAvatar();
               avatarColumn.addEventListener(AvatarSelected.SELECTED_AVATAR,avatarSelectedHandler);
            //avatarGrid.addEventListener(AvatarSelected.SELECTED_AVATAR,avatarSelectedHandler);
            if(avatarColumn.hasEventListener(AvatarSelected.SELECTED_AVATAR))
            Alert.show("EventListener OK ");

        }
        public  function avatarSelectedHandler(event:AvatarSelected):void
        {
            Alert.show("L'evenement est bien traité sur main");
        }

        public function getAvatar():void{
            var date:Date=new Date();

            var avatar1:Avatar=new Avatar();
            avatar1.idAvatar=4562;
            avatar1.pseudo="X";

            var avatar2:Avatar=new Avatar();
            avatar2.idAvatar=659;
            avatar2.pseudo="Y";

            listAvatar.addItem(avatar1);
            listAvatar.addItem(avatar2); 
        }   
    ]]>
</fx:Script>

<s:DataGrid x="158" y="177" width="649" height="194" fontFamily="Times New Roman" id="avatarGrid"
            fontSize="15" requestedRowCount="4" textAlign="center" dataProvider="{listAvatar}">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="isAvatar" headerText="Id" ></s:GridColumn>
            <s:GridColumn dataField="pseudo" headerText="Pseudo"></s:GridColumn>
            <s:GridColumn  headerText="Selectionner" width="100" itemRenderer="rendered.CheckRendered" id="avatarColumn"></s:GridColumn>


        </s:ArrayList>
    </s:columns>

</s:DataGrid>
</s:Application>

My ItemRendered "CheckRendered.mxml"

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                width="50" height="27" clipAndEnableScrolling="true">
<fx:Metadata>
    [Event(name="avatarSelected", type="events.AvatarSelected")]

</fx:Metadata>

<fx:Script>
    <![CDATA[
        import entity.Avatar;           
        import events.AvatarSelected;
        import mx.controls.Alert;

        protected function cBox_clickHandler(event:MouseEvent):void
        {
            var eventAvatar:AvatarSelected=new AvatarSelected("avatarSelected",Avatar (data));
            dispatchEvent(eventAvatar);

        }

    ]]>
</fx:Script>

    <s:CheckBox id="cBox" horizontalCenter="0" click="cBox_clickHandler(event)"/>

</s:GridItemRenderer>

My custom event "AvatarSelected.as"

package events
{
import entity.Avatar;
import flash.events.Event;
import mx.states.OverrideBase;


public class AvatarSelected extends Event
{
    public static const SELECTED_AVATAR:String = "avatarSelected";

    public var avatar:Avatar;

    public function AvatarSelected(type:String, avatar:Avatar)
    {
        super(type);
        this.avatar =avatar;
    }

}

}

My VO "Avatar.as"

package entity
{
//[Bindable]
//[RemoteClass(alias="entity.Avatar")]

[Bindable]
public class Avatar
{
    public var idAvatar:Number;
    public var pseudo:String;

   }
}

I opted for another way to capture the event, I created a class SkinDataGrid that extends GridColumn to accept the event as an argument, but it does not work yet!

DataGrid on the Main Application:

<s:DataGrid x="171" y="333" width="649" height="194" fontFamily="Times New Roman" id="avatarGridII"
            fontSize="15" requestedRowCount="4" textAlign="center" dataProvider="{listAvatar}">
    <s:columns>
        <s:ArrayList>
            <skin:SkinDataGrid dataField="isAvatar" headerText="Id" ></skin:SkinDataGrid>
            <skin:SkinDataGrid dataField="pseudo" headerText="Pseudo"></skin:SkinDataGrid>
            <skin:SkinDataGrid  headerText="Selectionner" width="100" itemRenderer="rendered.CheckRendered" id="avatarColumnII" avatarSelected="avatarSelectedHandler(event)"></skin:SkinDataGrid>


        </s:ArrayList>
    </s:columns>

</s:DataGrid>

SkinDataGrid.as

  package skin
{
import spark.components.DataGrid;
import spark.components.gridClasses.GridColumn;

[Event(name="avatarSelected", type="events.AvatarSelected")]

public class SkinDataGrid extends GridColumn
{
    public function SkinDataGrid()
    {
        super();
    }

   }
}

any idea ? Thank you in advance.

Answer 1

You don't specify what kind of problem do you have (type of error), but from looking at the code I find suspicious, that function avatarSelectedHandler has as argument of MouseEvent type, when you assign it as handler of AvatarSelected type.