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.