ComboBox ItemRenderer in Flex AdvancedDatagrid
March 9th, 2009
If you are declaring your AdvancedDataGridColumn in MXML then simply add
headerRenderer="View.HeaderRenderer"
<mx:AdvancedDataGridColumn wordWrap="true" headerRenderer="View.HeaderRenderer"
sortable="false" dataField="chkbox" width="200" textAlign="center">
Then Create your ComboBox in either MXML or ActionScript. I chose MXML in this case.
<?xml version="1.0"?>
<mx:HBox creationComplete="setStyles()" horizontalAlign="center" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
HeaderComboBox {
cornerRadius: 0;
arrowButtonWidth: 0;
openDuration: 10;
closeDuration: 10;
textAlign: left;
fontSize: 10;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
[Bindable] public var headerRendererData: Array = [ {label:"Select Action", data:0, buttonName: ""},
{label:"Close Selected", data:"close", buttonName: "Close these Tickets"},
{label:"Update Selected", data:"update", buttonName: "Update these Tickets"}];
public function doWork(e:ListEvent) : void {
//Put code here to action a selection event
combo.selectedIndex = 0; //reset combo to first value
trace (e);
}
private function setStyles() : void {
try {
combo.dataProvider = this.headerRendererData;;
combo.setStyle("cornerRadius",0);
combo.setStyle("openDuration",10);
combo.setStyle("closeDuration",10);
}
catch (e:Error) {}
}
]]>
</mx:Script>
<mx:ComboBox id="combo" width="98%" dataProvider="{this.headerRendererData}" change="doWork(event)">
</mx:ComboBox>
</mx:HBox>



Thanks Greg Jessup, your article create new my thinking. First when i use component of itemRender is Canvas, I can’t horizontalAlign=”right”, and then when I see your suggestion, I change component from Canvas into HBox. Thanks Greg again :)!
chary