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

*
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


Related Posts

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

    Simple but useful example.

    Thx.

  2. solitair  October 20, 2008 7:15 pm

    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.

  3. Vinícius  May 4, 2009 1:26 pm

    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.

  4. shaman4d  September 17, 2009 6:55 am

    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.

  5. Omry  October 12, 2009 2:01 am

    Nice, simple and time saving, thank you for this post!

  6. Gopi  November 18, 2009 4:26 pm

    Its Superb

  7. Anonymous  December 29, 2009 11:40 am

    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?

  8. mahesh babu  February 4, 2010 2:53 am

    Hi,
    can u provide total code for above screen?Its urgent.

    Regards
    D.Mahesh Babu

  9. Ankit Bhatia  March 14, 2010 10:08 pm

    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..

  10. Ankit Bhatia  March 14, 2010 10:24 pm

    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.. :-)

  11. Benson  August 25, 2010 8:23 pm

    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?

  12. Shravan  May 6, 2011 2:49 pm

    benson:

    To control the rowcount,

    rowCount={dg.dataProvider.length};

  13. Sagar  December 7, 2012 2:43 am

    If someone looking for same solution for multilevel tree, then visit: /2012/12/adjustable-flex-datagrid-row-height-for.html

  14. Anonymous  December 7, 2012 2:45 am
<

Error. Page cannot be displayed. Please contact your service provider for more details. (26)


Direct TV Offers - usdirect has the best directtv deals