Question

I’m a little stumped on how I should go about doing something.

I have a FlexDataGrid with a bunch of columns. One of the columns has an ItemRenderer for it. I want all the cells in this column to listen for an event. The event I want the to listen for is when someone begins editing a cell in the same row that the ItemRenderered cell is in.

So I have this code in my ItemRenderer which gets applied to each cell in the column:

this.addEventListener(FlexDataGridEvent.ITEM_EDIT_BEGINNING, showPopUp);

When showPopUp is called, a button will appear under this ItemRenderer.

The problem is, I don’t know how I can make that eventListener work. How can I make this item renderer know when an ITEM_EDIT_BEGINNING event is happening in a different cell?

I’m completely stumped.

Thanks!

Answer 1

Your item renderer is actually a different component, so if you are dispatching them with the this keyword, they are not being seen by the other cells / item renderers.

Probably a bit more involved than you were expecting, but this is how you’d accomplish something like that

1) You will want to create a custom event that you can pass the row number with. Something like this will work:

package
{
    import flash.events.Event;

    public class EditRowEvent extends Event
    {
        public function EditRowEvent(type:String, rowEditingIn:Number, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            rowEditing = rowEditingIn;
            super(type, bubbles, cancelable);
        }

        public var rowEditing : Number;
    }
}

2) you need to dispatch when editing it to something all the item renders can see. Something like the parent grid:

DataGrid(this.parentDocument).dispatchEvent( new EditRowEvent( 'beginEdit', this_renderers_row ) );

3) You need to listen for this event on the parent as well (do this when the item renderer is initialized) :

protected function onCreationComplete(event:FlexEvent=null):void
        {
            DataGrid(this.parentDocument).addEventListener( 'beginEdit' , handleEditOnRow );
        }

4) handle what you want to happen when that editing starts on the row of that particular item renderer

        public function handleEditOnRow ( event : EditRowEvent ) : void {
            if( this_renderers_row == event.rowEditing ){
                // code to execute when someone starts editing this row!
            }
        }