Retrieving the new values while editing data inside the Data Grids

Maybe you like data grids as much as I do, or maybe you don’t like them at all. But either way, you decide one day that you want to use a data grid not only for displaying the data, but also for editing the data inline.

How do you do that? Or to rephrase the question, how do you get the new value once the user has finished editing one cell? If you search on the Internet, you will find different ways to do this. But somehow, they all seem to be less straightforward than you would expect.

I mean, when I first started to implement this behavior for an project I was working on, I expected to find an event that is dispatched by the data grid once the editing was finished. And using that event, I would access the old values and the new values. If you ever worked with triggers in a relational database, you probably remember that inside of a trigger you can easily access the old row and the new row values (that is, the values before the update and after). Well, it turns out that with a Flex data grid things are not as straightforward as I expected.

First I started by looking at the events that a data grid can dispatch. From that long list, only the events involving item_and_something looked like they would satisfy my needs. And out of that, I pick the event itemEditEnd as the lucky winner. Now, if you register an event listener on this event and then you go in debug mode and inspect the event, you will find that the data property is still not updated. Instead, you will find the old value and there is no property such as newValue or something similar to easily get the new value. At the time when this event is dispatched, the data model used by the data grid isn’t updated.

The only way I found to get the new data is to do something like this:

private function editListener(event:DataGridEvent):void {
    //get the data grid component     
    var dataGrid:DataGrid = event.target as DataGrid;
    //get the column object 
    var col:DataGridColumn = dataGrid.columns[event.columnIndex];
    //use the column object and data grid itemEditorInstance property to retrieve the new value
    var newValue:String = dataGrid.itemEditorInstance[col.editorDataField];
    //get the old value
    var oldValue:String = event.itemRenderer.data.toString();
}

While this code isn’t complicated, it’s not simple either. This leaves me with two questions:

  1. If you ever edited inline of a data grid, how did you do it?
  2. Why doesn’t the data grid have an event that just offers the old and new value when one cell is edited? I’ve just submitted a feature request for the Flex SDK for this one: https://bugs.adobe.com/jira/browse/SDK-16680 If you have the time, maybe you can vote for it.

Here is a small project sample to try the code.

UPDATE

A friend poited me out, that Peter Ent wrote about this too: http://weblogs.macromedia.com/pent/archives/2008/06/itemeditors_-_p_1.html

One thought on “Retrieving the new values while editing data inside the Data Grids

Leave a Reply

Your email address will not be published. Required fields are marked *