The Flex DataGrid is an incredibly useful component however there is one feature that is strangely missing in AS3 which is a cellEdit event. One would assume that a listener could be attached to the DataGrid which gets fired when a cell is edited – which is true. You can listen to the itemEndEdit event, unfortunately itemEditEnd is fired before any of the controls or dataProvider are updated. You have access to the original cell value, but the newly entered value is difficult to obtain.
An article by Paul Robertson from Adobe explains the sequence of DataGrid events and provides two workarounds that allow you to get the old and new values when a cell is edited. You can actually put his solution to work right away and get on with your day.
I wasn’t fully satisfied with this approach only because it seems weird that Adobe would make us jump through all these hoops just to get a common bit of data. Paul suggests that that DataProvider would be a good place to listen, but he didn’t find any suitable events. As it turns out, this is exactly the way to do it and I’ll provide example source code below. It actually makes more sense because the DataGrid is just a view and you could have multiple views of this same data throughout your application. When changes occur, they’re handled centrally by the model. This also fits nicely with the current trend of using a model locator singleton and binding UI controls to it. If your UI is bound to the model and the model is listening for changes, the whole thing just works and you don’t really need any code to handle data updates.
The relevant classes in the Flex API are the CollectionEvent.COLLECTION_CHANGE event, which is fired on every change. Updates will contain one or more PropertyChangeEvents which have properties “oldValue,” “newValue” and several other useful properties.
Example Code:
If you don’t want to download the project, the working parts of the code look something like this (note this won’t compile by itself):
Thanks to Paul for getting my gears spinning. I’d appreciate any comments or links to similar example code.