vrokolos

If you are used to the LookupComboBox control in delphi or the similar ones in .net and you wish you had something like that for flex well wait no more. Here is a LookupGridColumn component:

LookupGridColumn.mxml code:

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn
xmlns="*"
xmlns:mx="http://www.adobe.com/2006/mxml"
editorDataField="LookupValue"
labelFunction="Lookup">
<mx:Script>
<![CDATA[
// LookupGridColumn.mxml
// Help here: http://vrokolos.blogspot.com/2008/03/lookup-combobox-in-flex.html 
//the lookup field of the lookupProvider objects
[Bindable]
public var lookupField: String;

//the description field of the lookupProvider objects
[Bindable]
public var resultField: String;

//the provider for the values of the combobox
[Bindable]
public var lookupProvider: Object;

//given an object, it will return the lookup's description
public function Lookup(theOb: Object, column: DataGridColumn): String
{
 var tempResult: String = "";
 for each ( var n: Object in lookupProvider )
 {
   if (n[lookupField] == theOb[dataField])
   {
     tempResult = n[resultField];
     break;
   }
 }
 return tempResult;
}
]]>
</mx:Script>
<mx:itemEditor>
<mx:Component>
<mx:ComboBox
 dataProvider="{outerDocument.lookupProvider}"
 labelField="{outerDocument.resultField}">
<mx:Script>
 <![CDATA[
   //returns the lookup field of the selected item
   public function get LookupValue(): Object
   {
     if (selectedItem != null)
     {
       return selectedItem[outerDocument.lookupField];
     } else {
       return "";
     }
   }

   //whenever the row changes, find the selecteditem
   public override function set data(theOb: Object): void
   {
     super.data = theOb;
     for (var i: int = 0; i< dataProvider.length; i++)
     {
       var k: Object = dataProvider[i];
       if (k[outerDocument.lookupField] == theOb[outerDocument.dataField])
       {
         selectedIndex = i;
       }
     }
   }
 ]]>
</mx:Script>
</mx:ComboBox>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>

Now let's see an example. Suppose we have these two classes in our model:

[Bindable]
public class Category
{
public var UniqueId:int;
public var Name:String;
}

[Bindable]
public class Product
{
public var UniqueId:int;
public var CategoryId:int;
public var Name:String;
public var Descn:String;
}

where each product's CategoryId links to the UniqueId of it's Category. To use this relationship in a datagrid we just have to do this:

<mx:DataGrid id="grdProduct" editable="true" dataProvider="{Products}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Descn" dataField="Descn"/>
<mx:DataGridColumn headerText="CategoryId" dataField="CategoryId"/>
<local:LookupGridColumn 
  lookupProvider="{Categories}"
  headerText="Category"
  dataField="CategoryId"
  lookupField="UniqueId"
  resultField="Name"/>
</mx:columns>
</mx:DataGrid>

And here's the example: (try changing the category and focusing another row to see what happens to CategoryId)
UPDATE: Someone noticed that if you focus the field categoryId (that one specifically) before changing rows and after selecting another value in the lookupcombobox it won't save the changes. I don't think this will affect any of your projects since the field categoryId or the similar ones will most likely be hidden or read-only.