How can I trigger an itemEditEnd Event in a Flex List when the CheckBox is checked/unchecked?

Question

I have a List component that has drop-in CheckBox itemEditor that also serves as the itemRenderer. It displays each item as a simple CheckBox with a label.

However, the itemEditEnd Event does not get triggered until I click on something outside of the List. I want it triggered once the CheckBox is checked or unchecked.

I was thinking of manually dispatching the ListEvent.ITEM_EDIT_END in a CLICK Event handler, but then the itemEditEnd Event would get dispatched twice. There's gotta be a better way to do this.

Any ideas?

Thanks.

Answer 1

Here is the solution I came up with. I changed my List to use the component as an itemRenderer only, not as a itemRenderer and itemEditor. I then added a MouseEvent.CLICK handler to call a function in the List from the itemRenderer to perform the necessary actions:

My List Component:

package
{
    import mx.controls.List;
    import mx.core.ClassFactory;

    public class CustomCheckBoxList extends List
    {
        public function CustomCheckBoxList()
        {
            super();

            itemRenderer = new ClassFactory(CheckBoxRenderer);
        }

        public function dispatchSelectionEvent(item:Object, selected:Boolean):void
        {
            // Take action here...
        }
    }
}

My ItemRenderer:

package
{
    import flash.events.MouseEvent;

    import mx.controls.CheckBox;

    public class CheckBoxRenderer extends CheckBox
    {
        public function CheckBoxRenderer()
        {
            super();
        }

        override protected function clickHandler(event:MouseEvent):void
        {
            super.clickHandler(event);

            CustomCheckBoxList(listData.owner).dispatchSelectionEvent(data, selected);
        }
    }
}

Answer 2

I've just run into this. I'm using a custom component rather than the drop-in approach, and this works when using the renderer as the editor.

Note that the Flex folks evidently came up with the notion that users would want to toggle their checkboxes a few times before settling on the state to commit to...at which point they'd hit the Enter key. How obvious!

My solution is to synthesize a keyboard event that is equivalent to hitting Enter. The tricky part is that one must use the callLater() method to dispatch the event because the list control won't have registered its keyboard listener on the editor until after the checkbox's click handler gets called. Here's my click handler for the checkbox in my custom renderer/editor component:

private function onClick(value:Object):void {
newValue = value;
var list:ListBase = ListBase(owner);
list.callLater(dispatchEvent, [new KeyboardEvent(KeyboardEvent.KEY_DOWN, true, false, Keyboard.ENTER, Keyboard.ENTER)]);

}

Cheers,

-steve