Tuesday, October 10, 2006

Using TreeGrid in Flex 2.0

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>

5 Comments:

At Wed Nov 08, 08:13:00 AM PST, Blogger Ron said...

problems with events
there is problem with the selection row events which are not working
in the tree column part.
how can it be fixed ?

 
At Wed Nov 08, 09:35:00 AM PST, Blogger lkondur said...

set data function was missing a call to the super. i've updated the code.

 
At Thu Dec 07, 08:43:00 AM PST, Blogger Victor Rubba said...

Have you had any luck getting both the disclosureIcon and imageIcon to render? I'd like to see the folder icon as well so it looks just like the tree control. No matter what I try, both icons seem to then render with the same image. Strange.

 
At Thu Mar 29, 08:50:00 AM PDT, Blogger Guillaume said...

Hi Latha,

I found a little bug in the ‘openItem’ function.
When you open items until 3rd level, then close first level and open it again the sublevels arn’t displayed properly.

Here’s the ‘openItem’ function corrected :
http://www.y-dow.info/treeGrid_openItem.txt

Thanks for your work.

 
At Fri Oct 05, 12:52:00 PM PDT, Blogger David said...

Awesome work.

I recommend leaving sortableColumns="true"
It's a neat (non-crashing) result.

 

Post a Comment

<< Home