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.

Answer 2

You also can try to dispatch this event with bubbling enabled (by default it's set to false in the Event class constructor).

In your case, the AvatarSelected constructor can be changed to smth like that:

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

And event creating would be like this (attention on the third parameter in the AvatarSelected()):

var eventAvatar:AvatarSelected = new AvatarSelected("avatarSelected", Avatar (data), true);