Archive for May, 2011

Single Click Cell Editing and More

The Spark DataGrid starts cell editing when a selected cell is clicked. But what if you want your DataGrid to start editing a cell regardless of whether the cell is selected or not? It is pretty easy to do this by adding a few listeners to the DataGrid. In a future release of the Spark DataGrid we will most likely add a property that will allow you to choose which method is used to start an editor session.

Download the project to see how it’s done.

The project also shows show to use the DateField and the ColorPicker as cell editors.

Run the application (required Flash Player 10.2 or greater)

Using Validators with Spark Cell Editors

At some point you will probably want to add a validator to a cell editor. This post shows how to use a validator with Spark cell editors. The Spark DataGrid contains two built-in cell editors, DefaultGridItemEditor and ComboBoxGridItemEditor, both of which extend GridItemEditor. Neither of these editors has a validator so you will want to create your own custom item editor to add validation. As an example I created an editor, NumberGridItemEditor, that uses the Spark number validator to ensure that the entered data is between 0 and 1000, inclusive.

To add a validator to a custom item editor is pretty simple. Just declare the validator and hook it up the input component.


<fx:Declarations>

<s:NumberValidator id="numberValidator" source="{textInput}" property="text"

triggerEvent="keyUp"/>

</fx:Declarations>

Since NumberGridItemEditor subclasses GridItemEditor it picks up some built-in support for validators. When the editor’s data is being saved, the GridItemEditor first checks if the data is valid by calling the validate() method. If the data is not valid then the editor won’t try to save it. If the Enter key is used to end the editor session then the editor will remain displayed so the input may be corrected. But if the user clicks away from the editor then the editor session will be cancelled if the data is not valid and therefore cannot be saved. If the default behavior doesn’t work for you then it can be modified by overriding the validate() and save() methods of GridItemEditor.

Download the project

 

 

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.

Using Spark Grid Item Editors

This post shows a simple example of using the default item editors in the Spark DataGrid. The example application shows how to use the DefaultGridItemEditor and ComboBoxGridItemEditor.

DefaultGridItemEditor is an editor for text. If you don’t specify an editor for a grid column, this is the one you will get.

The ComboBoxGridItemEditor was designed to provide a two click editing experience. When a cell is clicked to start an editor session, the combo box will be displayed with its drop-down list open. This allows a single click to choose the item in the down-down list that you want. After the down-down is clicked the combo box choice is saved and the editing session is closed. The result is only two clicks to edit a cell and choose a value.

Download the project