[source adress]http://verysimple.com/2008/09/10/handling-data-updates-with-the-flex-as3-datagrid/
[More like this]Detecting when data is edited in the DataGrid component
UPDATE: I don’t actually follow this technique because, although I feel it is technically correct, nobody seems to do it and Adobe doesn’t really seem to fix related glitches in this approach (possibly because they don’t want you to do it this way). But anyway, read on if you are interested in an alternate approach to updating data in a DataGrid.
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:
UPDATE: Sorry, I deleted the code by accident during a server move! The gist of it is that you simply add a collection change watcher to your data collection (An array or whatever you are using as the dataProvider for the grid). When the user updates data in the grid, it will fire Collection Change Events, even though you don’t have a hander for itemEndEdit or anything. It’s actually a really interesting and clean way to handle it, however I have noticed that the grid fires multiple change events per action and I can’t figure out how to distinguish the “correct” event. The real problems is that sometimes you’ll get three events and only one of them will have values for oldValue and newValue, while the other two have nulls. Weird, huh? The events also fire differently depending on how you edit, for example if you hit enter it will fire events one way, but if you use tab it will fire them differently.
Basically, it works and I think it’s a great idea but I could not figure out the logic of why the redundant events came through and I couldn’t find any properties on them to indicate which one was the right event other than checking for nulls. If somebody knows the logic of the Collect Change events fired by the DataGrid, I’d definitely like to know about it. I haven’t read Adobe recommending this method anywhere so they probably are not looking into it. So for me I just went with the itemEndEdit event like we’re told to do. I cast event.currentTarget into the correct UIComponent in order to get the data. I think it’s a sloppy way to do it but that’s what all the examples suggest, so I’ve just done it that way in my own work.
Opinions and suggestions are still welcome.