How do I change the State in an itemRenderer based on an action in another itemRenderer?

Question

I have a DataGridColumn with an ItemRenderer that extends the Box component. The default display is a Text component. When the user clicks on the text component, I change the State to add a PopUpMenuButton child, and make the Text component invisible. This works fine. However, I only want to allow one PopUpMenuButton to be visible in the DataGrid at a time (similar to how an itemEditor works). I don't want to use an itemEditor, because I've run into too many problems trying to get that to work in this instance.

I am implementing IDropInListItemRenderer in my itemRenderer, in order to access the listData property, which will give me the owner (DataGrid), but I don't know how to "turn off" the "editing" state in other itemRenderers in the DataGrid.

How can I accomplish this?

Thanks.

Answer 1

Here we go. I simply added an Listener for Change Events in the listData.owner - if it is triggered, I update the currentState to null. Works like a charm. Much easier than trying to access the itemRenderers in the column and resetting them all. Better on performance too.

private function label_clickHandler():void
{
    showEditor();
}

private function showEditor():void
{
    this.currentState = "editingMode";

    var ownerListBase:ListBase = ListBase(listData.owner);

    ownerListBase.addEventListener(ListEvent.CHANGE, ownerListBase_changeHandler);
}

private function ownerListBase_changeHandler(event:ListEvent):void
{
    this.currentState = null;

    var ownerListBase:ListBase = ListBase(listData.owner);

    ownerListBase.removeEventListener(ListEvent.CHANGE, ownerListBase_changeHandler);
}