Creating Cell Editors for Multiple Data Fields

DataGrid item renderers allow you to display multiple fields in one cell. For example, a name could be displayed in one cell but it may be a combination of two fields, first name and last name. How do you create a matching item editor? The key method to override when writing to multiple data fields is GridItemEditor.save().  Normally the save() method updates the data field specified by the GridColumn’s dataField property. By overriding the save() method you can update as many fields as you want. To see the full source of this editor, Download the project files and take a look at FirstLastNamePopUpGridItemEditor.mxml.

One problem you’ll run into when you create an editor for multiple fields is that the editor no longer fits neatly inside the cell. I think the best way to solve this problem is to put the item editor in a pop up so it is not clipped by the DataGrid. In the FirstLastNamePopUpGridItemEditor component this is done declaratively by using the Spark PopUpAnchor component.

The pop up in the item editor uses the Spark BorderContainer component. This ends up causing the child components in the pop up to get their own FocusManager which implies the focus loop will stay within the pop up. But what I really want is to be able to tab out of the item editor and go to the next item editor, the same way the tab key moves out of any other item editor. This can be done by re-dispatching selective events from the pop up to the item editor.

Another example of using pop ups in an item editor is the TextWithOkCancelGridItemEditor component. This component places OK and Cancel buttons on the right side of the Spark TextArea component. The TextArea component is sized to the cell so the OK and Cancel buttons need be in a pop up to keep them from being clipped by the DataGrid or the DataGrid’s scrollbar. Adding OK and Cancel buttons can be useful if the TextArea component uses the Enter key to insert a newline in the text instead of ending the editing session. That behavior may confuse some users so providing the OK button will give them clear way to end the editing session.

Run the application (requires Flash Player 10.2 or greater)

MultiControlPopUpEditor Project Files

The postings on this site are my own and don’t necessarily represent Adobe’s positions, views, strategies or opinions.