DataGrid with flexible row height
In one project I needed to have a data grid cell present some hierarchical data and I thought I could just use a tree control as the item data renderer for that grid column.
This what I got:
As you can see if you open the trees, the data row is not adjusting and you simply cannot see the child nodes.
A special tree control had to be made and used as the data renderer, to get me to the correct result, as shown below:
The code for this customised tree control can be seen below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Tree xmlns:mx="http://www.adobe.com/2006/mxml" dataProvider="{data.tree}"
itemOpen="switchStatus(true)" itemClose="switchStatus(false)"
showRoot="true" labelField="@label">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.DataGrid;
private var treeOpen:Boolean = false;
private function switchStatus(o:Boolean):void {
treeOpen = o;
var dg:DataGrid = this.parent.parent as DataGrid;
//causes row height to adjust
if(dg!=null) dg.invalidateList();
}
override protected function measure():void {
super.measure();
var rc:int = 1;
if(treeOpen) {
rc = 2+(((data.tree as XMLListCollection).getItemAt(0) as XML).
folder as XMLList).length();
}
this.measuredHeight = rc*rowHeight
//tree will be collapsed after invalidateList - we need to open it
if(treeOpen) expandItem(dataProvider[0], true);
}
]]>
</mx:Script>
</mx:Tree>
Let’s have a quick walk through on what we are doing here:
The key thing is to override the measure() function that calculates the row height (measuredHeight) of the component. If the tree is open, we calculate the row height by multiplying the rowHeight by the number of items of the tree (and yes we are making our life easier in this example by assumming a 1-level depth tree, with items called folders). The call to the measure() function is forced by invalidating the parent data grid, every time the tree is opened or closed.
Notice that you also need to set the variableRowHeight property of the data grid to true.
Leave a Comment
If you would like to make a comment, please fill out the form below.
Simple but useful example.
Thx.
hi, there.
I’m a novice of Flex programming. I think that the code you showed is not the whole one for the demo example above. Can I get more information to use the component embedded into a datagrid?
Thank you in advance.
Hello, could you show me the datagrid code example that works with this tree? I have a doubt in how should I call this example (tree) in dataGrid.
Very interesting article. Could you please a source? I try to implement similar functionality with List but I have no result. So source will bbe very helpfull.
After this.measuredHeight = rc*rowHeight List’s cell doesnt stretch.
Nice, simple and time saving, thank you for this post!
Its Superb
I need to get rowHeight of a datagrid looping trough the datagrid because I need to apply the rowheight of each row to another datagrid.
How can I do this?
Hi,
can u provide total code for above screen?Its urgent.
Regards
D.Mahesh Babu
Hey Harry, this is similar to what I was looking for.. I am trying to do the same thing with a list control instead of a datagrid. Although I am trying it myself with the help of above mentioned code but still any help from you will be appreciated
have a nice time..
Hey guys..
I just found a simple solution for this variable rowHeight problem. You only need to add ” variableRowHeight = ‘true’ ” to the datagrid tag and you are done. You need not to write or modify actionscript for that 
Its really simplifying our lives.. 
Nice work! But what will happen if height of rows with data exceeds the height of DataGrid? In my case, DataGrid with verticalScrollPolicy’s off doesn’t grow by itself. Is there any workaround to fix it?
benson:
To control the rowcount,
rowCount={dg.dataProvider.length};