fumbling through flex: components > datagrid > itemeditors > dataprovider > scope

Been taking a whack at a little Flex app, using the freebie flex 2 sdk, editing with xcode and textmate. Rather than going at it systematically, I decided to fumble through, just trying to make something I had in mind work. Learning by doing, or rather, learning by fumbling.

The rough idea starts with a text field that autocompletes based on data from an xml file. Found a component that does that, called AutoComplete, a little trouvaille made by adobe that’s based on the ComboBox control. So far so good. Then I found a modified version that displayed info from the same data (dataProvider in flexese) in a DataGrid control. Moving right along.

Then I decided to try making the editable fields of the DataGrid use flex components to do the editing, like NumericStepper and ComboBox. Here’s where the fumbling got more intense. It’s not too tough to integrate those controls into the DataGrid: the itemEditor attribute of the DataGridColumn is pretty straight forward. It took a little more digging to get to the attributes of the these drop-in editors though.

For example, say you want to set the NumberStepper’s maximum, or get the ComboBox to display values based on a dataProvider of its own. Then you need to write out the element itemEditor specifically, instead of using the itemEditor attribute of the DataGridColumn. Like here.

That worked fine for NumericStepper. Then on to the ComboBox and it’s dataProvider. Say you have an ArrayCollection called myComboBoxData in a script block somewhere outside the DataGrid, and you want to use it as the dataProvider for a ComboBox itemEditor.

Oops. Compiling that gives an error about not being able to access myComboBoxData… hmmm, smells like a scope issue, no? Sure enough. After a little hunting, I found out that the mx:Component tag defines a new scope in an MXML file, to quote directly from the livedocs. The solution is to use the outerDocument keyword, like this:

<mx:ComboBox dataProvider=”{outerDocument.myComboBoxData}” />

That did the trick.

In the end, I decided not to use the DataGrid after all, since it was becoming too complicated to dig down into the DataGrid and I only needed to edit one item at a time anyway. So instead of displaying several lines of data in a DataGrid, I use single components for one set of data only. The user gets one AutoComplete component to fill in, then whatever they select gets displayed in individual components for editing.

Most importantly, the user doesn’t have a list of several things that they don’t need to see. And the ComboBox still gets to have its own dataProvider, and I can still set maximum of the NumericStepper, like above. And conveniently for me, there’s no scope problem because there’s no mx:Component tag creating a new scope. Simple > complicated > simpler. Fumbling along.

This entry was posted in flash, actionscript, flex and tagged , . Bookmark the permalink.

4 Responses to fumbling through flex: components > datagrid > itemeditors > dataprovider > scope

  1. Louis says:

    thanks mate this helped me a lot!

  2. noah little says:

    You’re welcome! Glad to hear it, Louis.

  3. Sean says:

    I searched everywhere for a solution to this.

    ie. Enabling a different combobox dataProvider to the containing datagrid.

    For clarity, in addition to:

    I needed to setup the dataProvider as Public:

    public var myComboBoxData:Array =



  4. noah little says:

    Great, thanks for the added tip Sean. 🙂

Comments are closed.