Use a combo box in a CFGrid

This is a great example, and it’s great for learning what actionscript can do… It uses an import of an actionscript file to put a combo box in a cell in a cfgrid… it’s awesome.View the example

Here is the original Post I want to be able to remember this stuff so i blog it.



<cfif parameterExists(form.submit_btn)>

<CFDUMP var=“#form#”>


<cfform format=“Flash” skin=“haloSilver” width=“400” height=“300”>

<cfsaveContent variable=“onLoad”>



//applying the cellRenderer ‘’ to the 4th column _level0.myGrid.getColumnAt(3).cellRenderer = GridRenderer;



<!— grid with 3 columns name, firstName, department —>

<cfgrid name=“myGrid”>

<cfgridColumn name=“name”>

<cfgridColumn name=“firstName”>

<cfgridColumn name=“department”>

<cfgridrow data=“Maegerman, Philippe, 1“>

<cfgridrow data=“Fonda, Nahuel, 2“>


<cfinput type=“submit” name=“submit_btn” value=“Submit to see the form dump”>

<!— onLoad trigger —>

<cfinput type=“text” visible=“No” width=“0” height=“0” name=“trigger2” bind=“{1==2?”:#onLoad#}”>


and here is the actionscript file that is needed, put them in the same directory, and it will work.


import mx.controls.ComboBox;

class GridRenderer extends mx.core.UIComponent{

var combo;

var listOwner : MovieClip;

var getCellIndex : Function;

var getDataLabel : Function;

function createChildren(Void) : Void{

combo = createClassObject( ComboBox, “combo”, 1, {owner:this});

combo.dataProvider = [{data:1,label:’CF_Pim’}, {data:2,label:’AsFusion’}];

combo.addEventListener(“change”, this);


function getPreferredHeight(Void) : Number{

return combo != undefined ? 25:0;


function setValue(str:String, item:Object){

var val = item.department;

for(var i = 0; i < combo.dataProvider.length; i++){

combo.dataProvider[i].data == val ? combo.selectedIndex = i : ”;



function change() {





View the example

Leave a comment