DataProvider for each DataGridColumn

Question

Hi, all
How can I give a dataProvider for each DataGridColumn?
Because I have an arrayCollection with arrays and each array will
be assigned to one dataGridColumn. But the problem is the value of
dataField are the same for all columns, so at the end I only got
the values from the last array for the whole dataGrid. By the way
the number of columns depends on the length of the arrayCollection
and it is dynamic.
How can I write a custom DataGridColumn for it?
Anybody got any ideas?
Thank you very much.

Answer 1

I'm pasting the code I used. That's the best I can do for
you.
First is the main application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function mouseIn( event:MouseEvent ) : void
trace("In: target="+event.target+";
current="+event.currentTarget+"; related="+event.relatedObject);
if( event.relatedObject == box.parent ) {
b1.visible = true;
b2.visible = true;
private function mouseOut( event:MouseEvent ) : void
trace("out: target="+event.target+";
current="+event.currentTarget+"; related="+event.relatedObject);
if( event.relatedObject == box.parent ) {
b1.visible = false;
b2.visible = false;
[Bindable] private var dp:ArrayCollection = new
ArrayCollection(
[ [1,2,3,4], [10,20,30,40], [100,200,300,400] ]);
]]>
</mx:Script>
<mx:VBox id="box" x="43" y="45" width="300" height="185"
horizontalAlign="center"
mouseOver="mouseIn(event)"
mouseOut="mouseOut(event)"
backgroundColor="#804040" verticalAlign="middle">
<mx:Button width="127" height="97" />
<mx:Button label="Button 1" id="b1" visible="false"/>
<mx:Button label="Button 2" id="b2" visible="false"/>
</mx:VBox>
<mx:DateChooser
selectableRange="{{rangeStart : new Date(2000,0,1),rangeEnd
: new Date()}}"
id="dateChoose" showToday="false"/>
<mx:DataGrid x="163" y="292" height="179" width="326"
dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"
itemRenderer="components.forums.ArrayItemRenderer"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"
itemRenderer="components.forums.ArrayItemRenderer"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"
itemRenderer="components.forums.ArrayItemRenderer"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
This is the item renderer code:
package components.forums
import mx.controls.Text;
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
public class ArrayItemRenderer extends Text
public function ArrayItemRenderer()
super();
override protected function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth, unscaledHeight);
if( data )
var dp:ArrayCollection = (listData.owner as
DataGrid).dataProvider as ArrayCollection;
var colIndex:int = listData.columnIndex;
var rowIndex:int = listData.rowIndex;
var colArray:Array = dp.getItemAt(colIndex) as Array;
text = String(colArray[rowIndex-1]);
else text = "";
----------------------------