Saturday, August 22, 2009

Creating Combobox within a DataGrid column in Flex

The compononet that needs to be attached might be a Combobox or a Checkbox.
One of the techniques is to create a custom ComboBox and use the itemRenderer property of the DataGridColumn to display it inside the data grid as a Combobox which then, internally fetches its values from an XML.

<mx:DataGrid id="portfolioGrid" width="100%" height="100%"
dataProvider="{portfolioModel.security}" selectable="true">
<mx:columns><mx:Array>
<mx:DataGridColumn dataField="Symbol"/>
<mx:DataGridColumn dataField="Quantity" textAlign="right"/>
<mx:DataGridColumn dataField="Price" textAlign="right"/>
<mx:DataGridColumn dataField="Value" textAlign="right"/>
<mx:DataGridColumn dataField="portfolioType"
width="175" textAlign="center"
headerText="Type"
sortable="false"
editable="true"
editorDataField="newState"
rendererIsEditor="true"
itemRenderer="MyComboBox"/>
</mx:Array></mx:columns>
</mx:DataGrid>


MyComboBox.mxml needs to be imported and corresponding handler functions for the ComboBox component needs to be defined in this separate file.