Pass different dataProvider into the same ComboBox CellRenderer used in multiple columns of a DataGrid

Recently, I got a request to provide a sample to pass different dataProvider to the same CellRenderer used in multiple columns of a DataGrid. i.e., there are multiple columns in a DataGrid that need to use the same ComboBox CellRenderer. However, the dataProvider for each of the column needs to be different. Obviously, there are several ways to do this. Here I will show two of them.

1. The first approach is tightly couple the main app and the CellRenderer.
This approach requires the CellRenderer has knowledge about the parent document. It define the different dataProvider in the main app for each column CellRenderer, and then the CellRenderer will fetch dataProvider and set the dataProvider of the ComboBox in setValue() based on the column Index we get from getCellIndex().columnIndex like this:

function setValue(str:String, item:Object, sel:Boolean) : Void
{ //Get values from the dataProvider
combo._visible =(item!=undefined);
if (item!=undefined){
var ind = getCellIndex().columnIndex;
trace (“ind=”+ind);
if (ind==0) {
combo.dataProvider = parentDocument.nameDP;
} else if (ind==1){
combo.dataProvider = parentDocument.phoneTypesDP;

combo.selectedIndex = item.phoneTypes.index;
rowData = item;
See sample passDiffDP.mxml and the cellrenderer passDiffDPCell.mxml.

2. The second approach is to create a generic CellRenderer.
If you want to have a generic CellRenderer that is not tightly coupled with the parent app, then you should not set dataProvider in the CellRenderer. Instead, you should have the parent document telling the cell renderer what the data provider is for a given column. In this way, the combo CellRenderer class can be generic and could be used by any application.

There should be different ways to create generic CellRenderer, but extending the DataGridColumn works pretty well for me.
The only thing that’s needed in the extended class is a dataProvider String. The code is as simple as the following:

class myDataGridColumn extends mx.controls.gridclasses.DataGridColumn
var dataProvider:String;

Now the new DataGridColumn will take a property dataProvider, so you can pass individual dataProvider to each column like this:
<myDataGridColumn dataProvider=”nameDP” columnName=”name” headerText=”Name” cellRenderer=”{passDiffDPCellFromMain}” editable=”true”/>
<myDataGridColumn dataProvider=”phoneTypesDP” columnName=”phoneTypes” headerText=”Phone Type” cellRenderer=”{passDiffDPCellFromMain}” editable=”false”/>

For more details, see sample code: