Using TreeGrid in Flex 2.0

2006-10-10T11:07:00.000-07:00

For all those of you who need the TreeGrid in Flex2.0, please find the relevant files as below.

I have basically converted James Ward's TreeGrid in Flex 1.5 to 2.0. More info about the treegrid can be found at the following URL.
www.cayambe.com/wordpress/?p=36

Please do post your thoughts on any improvisations to the code. I'm pretty new to flex myself!

Here are the three files

"TreeVO.as"

package{
import mx.collections.ArrayCollection;

public class TreeVO{

public var level:String;
public var desc:String;
public var childList:ArrayCollection;

//fields used by treeGrid renderer
public var isOpen:Boolean;
public var indent:Number;

/************************************************************************
/* constructor
/*************************************************************************/
function TreeVO() {
childList = new ArrayCollection();
isOpen = false;
indent = 0;
}
}
}

"MyTreeGrid.mxml"

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
width="100%" height="100%" initialize="initApp()">

<mx:DataGrid id="treeGrid" dataProvider="{dp}" sortableColumns="false" height="100%"
itemClick="itemClickEvent(event);" allowMultipleSelection="true">
<mx:columns>
<mx:Array>
<mx:DataGridColumn dataField="desc" headerText="Description" width="140"
itemRenderer="MyTreeGridRenderer"/>
<mx:DataGridColumn dataField="level" headerText="Level" width="200"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>

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

[Bindable]
public var dp : ArrayCollection;

public var myRow:int;

/************************************************************************
/* initApp
/*************************************************************************/
public function initApp():void{

dp = new ArrayCollection();

//-------
var a1:TreeVO = new TreeVO();
a1.level ="Level 1";
a1.desc = "I am a1"
//-------
var a2:TreeVO = new TreeVO();
a2.level = "Level 1";
a2.desc = "I am a2"
//-------
var a1_1:TreeVO = new TreeVO();
a1_1.level = "Level 2";
a1_1.desc = "I am a1_1";

var a1_2:TreeVO = new TreeVO();
a1_2.level = "Level 2";
a1_2.desc = "I am a1_2";

var a1_3:TreeVO = new TreeVO();
a1_3.level = "Level 2";
a1_3.desc = "I am a1_3";
//-------

var a1_2_1:TreeVO = new TreeVO();
a1_2_1.level = "Level 3";
a1_2_1.desc = "I am a1_2_1";

var a1_2_2:TreeVO = new TreeVO();
a1_2_2.level = "Level 3";
a1_2_2.desc = "I am a1_2_2";
//-------

var a1_3_1:TreeVO = new TreeVO();
a1_3_1.level = "Level 3";
a1_3_1.desc = "I am a1_3_1";
//-------

a1_2.childList.addItem(a1_2_1);
a1_2.childList.addItem(a1_2_2);
a1_3.childList.addItem(a1_3_1);

a1.childList.addItem(a1_1);
a1.childList.addItem(a1_2);
a1.childList.addItem(a1_3);

dp.addItem(a1);
dp.addItem(a2);

}

private function itemClickEvent(event:ListEvent):void {
myRow = event.rowIndex;
//Dumper.dump("myRow: "+myRow);
}
]]>
</mx:Script>

</mx:Application>

"MyTreeGridRenderer.mxml"

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

<mx:Image id="imageIcon" click="iconPress(event)"/>
<mx:Label id="labelValue"/>

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

public var indent:Number = 10;

[Embed(source='Assets.swf', symbol='TreeDisclosureClosed')]
[Bindable]
public var closeIcon:Class;

[Embed(source='Assets.swf', symbol='TreeDisclosureOpen')]
[Bindable]
public var openIcon:Class;

/************************************************************************
/* setValue
/*************************************************************************/
override public function set data(data:Object):void{

if(data != null){

super.data = data;

labelValue.text = data.desc;
labelValue.x = 30 + data.indent;

if(data.childList.length > 0){

if(data.isOpen == false){
imageIcon.visible = true;
imageIcon.source = closeIcon;
}
else{
imageIcon.visible = true;
imageIcon.source = openIcon;
}
}
else{
//There shouldnt be any icon
imageIcon.visible = false;
}
imageIcon.x = 20 + data.indent;
}
}

/************************************************************************
/* iconPress
/*************************************************************************/
private function iconPress(event:MouseEvent):void{
callLater(disclosurePress);
}

/************************************************************************
/* disclosurePress
/*************************************************************************/
private function disclosurePress():void{

var indexNum:Number = parentApplication.myRow-1;
var item:TreeVO = parentApplication.dp[indexNum];

if(parentApplication.dp[indexNum].isOpen == false){
openItem(item, indexNum);
}
else{
closeItem(item);
}

item.isOpen = !item.isOpen;

}

/************************************************************************
/* openItem
/*************************************************************************/
private function openItem(item:TreeVO, indexNum:Number):void{

//Dumper.dump("*** openItem for data: "+item.desc);
var root:ArrayCollection = parentApplication.dp;

//add the rows for the children at this level
for(var i:Number = 0; i < item.childList.length; i++){
if(item.indent){
item.childList[i].indent = item.indent + indent;
}
else{
item.childList[i].indent = indent;
}
//Dumper.dump("Adding data: "+item.childList[i].desc+" at index= "+(indexNum+1+i));
root.addItemAt(item.childList[i], indexNum+1+i);
}

//recursively open already opened nodes at this level
for(var j:Number = 0; j < item.childList.length; j++){
if (item.childList[j].isOpen){
openItem(item.childList[j], indexNum+j+1);
}
}

}

/************************************************************************
/* closeItem
/*************************************************************************/
private function closeItem(item:Object):void{

var root:ArrayCollection = parentApplication.dp;
var deleteIndex:Number = parentApplication.myRow-1;

for(var i:Number = 0; i < item.childList.length; i++){
if(item.childList[i].isOpen == true){
closeItem(item.childList[i]);
}

//Dumper.dump("Deleting value: "+root[deleteIndex+1].desc+" at index: "+(deleteIndex+1)+" from array");
root.removeItemAt(deleteIndex+1);
}
}

]]>
</mx:Script>

</mx:Canvas>

codercentral

Using TreeGrid in Flex 2.0

"TreeVO.as"

"MyTreeGrid.mxml"

"MyTreeGridRenderer.mxml"