Simple DataGrid Item Editor in Flex

One of the more mysterious features of the Flex DataGrid is how to use item editors. Well I am going to start a few tutorials on this subject. This first tutorial is going to jump in and show how to create an easy to use item editor. Item editors can be simple or very complex - anything from a text input to a full input form. This tutorial is going to use a basic ComboBox to change a single value.

In the example application below we have two columns, one for the name and one to define if they are "guapo". The second column has been defined as editable so if you click on it you will see the ComboBox show up and you will be able to change the value to Yes or No. After editing has finished the dataprovider on the DataGrid will be updated with the new value. This means you actually have to click somewhere else or Enter to submit the changes - this is part of the item editing process. Well take a second and check it out. The source code for the item editor example is available.

Jumping right into it I am going to throw out the code for the main application. This code has the DataGrid and a little bit of script to initialize the data we use. The SimpleItem class is also below and is simple.

And the SimpleItem class, which is of course Bindable.

There are a few items in the DataGrid that I should go over. I set the editable property on the grid to be true. For the first column I set the editable property to false to keep people from changing the name associated with the item. All the hook up magic is done in the second column which is the column that can be edited. The itemEditor property takes the name of the component we are going to use for the editor - in our case ComboEditor, a custom component. The second important property is the editorDataField which tells the column what property to bind back to the dataField property. We now need to build the custom component.

The component is based off of a Box and has a ComboBox. The component code lies below. I will explain the nuances after.

First and foremost you will notice the script which overrides the set data function to initialize the newValue. The second thing you will see in the component is that I have a Boolean value named newValue, same as the editorDataField. Next we have the drop down which has its selectedIndex bound to guapo property on item. If guapo is true the drop down will show "Yes" otherwise "No". The final thing we need to do is update newValue when the value changes. To do this we hook into the event fired when the drop down changes, when this happens we set newValue equal the boolean expression dd.selectedIndex == 0 which will return true if the "Yes" value is selected.

That pretty much takes care of creating and using a very basic item editor in Flex. I plan on expanding on these basic ideas in a later tutorial so keep an eye out. Until then feel free to ask any questions or just leave a nice comment.