Flex : How to reuse Item renderer? - apache-flex

Question

I have a data grid table, the gridColumn in the dataGrid table calls a "DropDownListItemRenderer". Using the same item renderer I want to change the contents in the drop down list according to the dataField name. So for example if the dataField name is colour then the drop down will contain red,blue,green ect. If the dataField name is furits, then the drop down list will contain different fruits options.
If u look at the codes in my item Renderer. I tried to do the above by creating a bindable array collection called dropDownListData. In the override set data function I get the dataField name, Using the data field name I add items in array collection accordingly.
Although the dropdown list is filled with the correct data when u run the program. The data in the drop down list is repeated and increased every time when the dropdown list is selected.
I think I am not using the right method to do this. So can someone show me how I do this ? Pls can someone help me with this ? Pls let me know if my question is not clear I will try to rephrase it.
Thanks :)
This is my MXML file :
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import FrontEndObjects.ColourItems;
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
private var order:ArrayCollection = new ArrayCollection();
private function addOrder():void{
var orderItems:ColourItems = new ColourItems();
order.addItem(orderItems);
}
]]>
</fx:Script>
<s:BorderContainer x="175" y="101" width="606" height="289">
<s:DataGrid id="myDG" x="53" y="27" width="516" height="201" dataProvider="{order}"
editable="true" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="label1" headerText="Order #" editable="true"/>
<s:GridColumn dataField="quant" headerText="Qty" editable="true"/>
<s:GridColumn dataField="color" headerText="Color" editable="true" rendererIsEditable="true" itemRenderer="myRenderers.DropDownListItemRenderer"/>
<s:GridColumn dataField="furits" headerText="Furits" editable="true" rendererIsEditable="true" itemRenderer="myRenderers.DropDownListItemRenderer"/>
</s:ArrayList>
</s:columns >
</s:DataGrid>
<s:Button x="499" y="236" label="add" click="addOrder()" />
</s:BorderContainer>
This is my DropDownList item Renderer :
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import spark.components.gridClasses.GridColumn;
import spark.events.IndexChangeEvent;
public var cName:String;
[Bindable]
private var dropDownListData:ArrayCollection = new ArrayCollection();
protected function onCbChange(event:IndexChangeEvent):void
{
var value:String = (event.currentTarget as DropDownList).selectedItem;
data[column.dataField] = value;
}
override public function set data(value:Object):void
{
super.data = value;
cName = column.dataField;
if(cName == "color"){
dropDownListData.addItem("red");
dropDownListData.addItem("blue");
dropDownListData.addItem("green");
}
else if(cName == "furits"){
dropDownListData.addItem("banana");
dropDownListData.addItem("apple");
dropDownListData.addItem("grapes");
}
}
]]>
</fx:Script>
<s:DropDownList id="cb" width="100%" change="onCbChange(event)" requireSelection="true" dataProvider="{dropDownListData}"/>
This is my Object class :
public class ColourItems
{
public var label1:String;
public var quant:String;
public var color:String;
public var furits:String;
}

Answer 1

In the setData method of the itemRenderer, you should check what data already exists in the list before doing the addItem

Answer 2

You set target columns as editable: editable="true" rendererIsEditable="true". When you click for cell, grid calls set data(value:Object) method in itemrenderer where you add items in dropdown list more more and more. You can easy fix it as disabled editable for cell:
<s:GridColumn dataField="color" headerText="Color" editable="false" itemRenderer="myRenderers.DropDownListItemRenderer"/>
<s:GridColumn dataField="furits" headerText="Furits" editable="false" itemRenderer="myRenderers.DropDownListItemRenderer"/>