Question

Let me try to explain this the best I can.

I have a component containing a data grid with the following data grid column

        <mx:DataGridColumn dataField="email" headerText="Email Address">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox width="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalAlign="center">
                        <mx:TextInput id="tiEmailAddress" 
                                                width="95%"
                                                text="{data.email}"
                                                invalid="{data.isNotValidEmail(event);}"
                                                valid="{data.isValidEmail(event);}"/>
                        <mx:EmailValidator id="validatorEmailAddress"
                                      source="{tiEmailAddress}"
                                      property="text"
                                      required="true"
                                      requiredFieldError="Email address is required."/>
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

Here’s the guts of my value object:

[Bindable(event="contactChange")]
public class ContactVO extends EventDispatcher
{
    private var _email:String = "default email";

    public var selected:Boolean = false;
    public var edited:Boolean = false;
    public var isNew:Boolean = false;
    public var isValid:Boolean = false;


    public function ContactVO()
    {       }


    public function isNotValidEmail(e:Event):void
    {
        isValid = false;
        email = e.target.text;          
    }


    public function isValidEmail(e:Event):void
    {
        isValid = true;
        email = e.target.text;
    }


    public function get email():String   
    {                       
        return _email;
    }             


    public function set email(value:String) : void 
    {                       
        if (value != _email) {
            _email = value;
            edited = true;
        }
        dispatchEvent(new Event("contactChange", true));
    }

}

Then back in the component, I have this which gets called at creationComplete

addEventListener("contactChange", processContactChange);

Through the Flex debugger, I can see the addEventListener statement called when the component is created, I can see the event fired from the value object when the validation is performed and the value changes, but processContactChange is never called, so I assume the event is never making it to my component.

Any idea what I’ve gotten wrong here? Thanks!

[SOLUTION]

The conversation with @Flextras below helped to deepen my understanding of this process and figure out where the disconnect was in my understanding. Basically, I changed the innards of my component’s data column entry to the following:

                        <mx:TextInput id="tiEmailAddress" 
                                                width="95%"
                                                text="{data.email}"
                                                invalid="{data.isNotValidEmail(event);}"
                                                valid="{data.isValidEmail(event);}"
                                                creationComplete="{addListener(data)}"/>
                        <mx:Script>
                            <![CDATA[
                                private function addListener(data:Object):void
                                {
                                    var eventDispatcher:EventDispatcher = data as EventDispatcher;
                                    eventDispatcher.addEventListener("contactChange", outerDocument.processContactChange);
                                }
                            ]]>
                        </mx:Script>

and removed the event listener from my creationComplete method

Answer 1

When you add the event listener you have to add it to the class that fires the event. In your code, you’re adding it to the component that contains the DataGrid. Neither the itemRenderer, DataGrid, nor component containing the DataGrid fire the event.

IF the component containing the DataGrid has access to the ContactVO event, you can listen directly on that.

Otherwise, you can add an event listener in your itemRenderer.

If you absolutely need to execute code in the component containing the DataGrid, then the itemRenderer should listen on the Value Object for the event, then fire an event of it’s own. Make sure that the ‘itemRenderer’ event bubbles; and it will move up the display hierarchy.