ComboBox ItemRenderer in flex DataGrid

9 10 2009

For my Application I need a CobmboBox in Datagrid, and the combo will have a list of data. For this I googled a few samples. Here is a sample code, I modified it with my requirements.

My requirement is populate the Datagrid and there will be columns in datagrid that can be modified and updated to the database. To achive this I created ComboBox as ItemRenderer in the DataGridColumn. The data to the Combo must be dynamic.

Sample Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="fillDataGrid()">

 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;

 //  data provider of combo in datagrid, can get dynamic data by a service
 private var comboData:Array = new Array("Value0","Value1","Value2","Value3");

 /**
  *  populate the datagrid with sample data
  */
 private function fillDataGrid():void {
 var arrColl:ArrayCollection = new ArrayCollection;
 for (var i:int=0,j:int=0; i<50; i++,j++ ) {
 if ( j>3 ) j=0;

// create an object that will be provided to combo
 var obj:Object = new Object;
 obj.value = "Value"+j;
 obj.list = comboData;

// data is for first column, com is for the itemrenderer in that com object
 //value is slectedItem of combo and list is the provider of that combo
 arrColl.addItem({data:"data"+i, com:obj});

}

dg.dataProvider = arrColl;

}
 ]]>

</mx:Script>
 <mx:DataGrid id="dg" x="60" y="21" rowCount="5">
 <mx:columns>
 <mx:DataGridColumn dataField="data" headerText="Data" />
 <mx:DataGridColumn headerText="Value" itemRenderer="DynRender" />
 </mx:columns>
 </mx:DataGrid>
 </mx:Application>

DynRender.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off">

<mx:Script>
<![CDATA[

 override public function set data(value:Object):void {
   if(value != null) {
    super.data = value;
    mycombo.selectedItem=data.com.value;
   }

 }
 ]]>

</mx:Script>
<mx:ComboBox id="mycombo" dataProvider="{data.com.list}" width="100%"  />
</mx:Canvas>

The required data for the combo box is provided by the collection in ‘com’ item, In that we will provide the list item as dataprovider of the combo box. And value will the the selectedItem.








Follow

Get every new post delivered to your Inbox.