Flex: How can I Make changes to an ArrayCollection bound to data grid live?

Question

Hi guys,

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);"

Answer 2

Thanks Gabriel you put me on the right path. I will post here my final solution in case anyone else needs to do the same thing in the future.

  <mx:DataGridColumn headerText="Title" width="300" dataField="title">
    <mx:itemEditor>
      <mx:Component>
        <mx:TextInput change="data.title = text" />
      </mx:Component>
    </mx:itemEditor>
  </mx:DataGridColumn>

Now whenever the text is changed in the input the ArrayCollection being used as the data provider is also updated, so other components listen for COLLECTION_CHANGE events.