Question

I have an ArrayCollection bound to an editable DataGrid, another component needs to know when the ArrayCollection changes (as a result of changes in the DataGrid) so it can also update itself, so is listening to the COLLECTION_CHANGE event of the ArrayCollection.

The problem is that the DataGrid only updates the ArrayCollection when the row being edited losses focus. This is not good for my app as a user could edit a column on a row and not click elsewhere on the table for a long time (causing the row to lose fucus), therefore the changes won’t have propagated to the other parts of the application.

How can I make the data grid inform the ArrayCollection of a change every time there is a keyup event on a text input instead of every time a row looses focus?

Cheers,

Chris

Answer 1

I would add the handler to the component used to edit the value instead of to the ArrayCollection. Example:

<mx:DataGridColumn dataField="name" headerText="Name" itemEditor="{nameEditor}" editorDataField="selectedItem" />

Then this is used to edit the value:

<mx:Component id="nameEditor">
    <mx:ComboBox dataProvider="{outerDocument.names}" change="outerDocument.setNameField(event)" close="outerDocument.setNameField(event)" />
</mx:Component>

And this is the handler for the change (and close) event:

public function setDestinationField(event:*):void {
    var destination:String = (event.target as ComboBox).selectedLabel;
    if (destination === '') {
        delete _gridData[_currentlyEditedRowIndex].destination;
    } else {
        _gridData[_currentlyEditedRowIndex].destination = destination;
    }
}

_currentlyEditedRowIndex is set by adding this to the grid:

itemEditBegin="beginEdit(event);"