Subscribe

  • Subscribe  

DataGrid with flexible row height

Posted by Harry Vikatos | July 10, 2008 .

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.


Name

Email

Website

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Comments


Related Posts

1 Comment so far
  1. OSteEL  July 11, 2008 1:57 am

    Simple but useful example.

    Thx.


Cox television ||| Verizon Satellite TV ||| Comcast cable offers