May 30, 2008

HOWTO: Set different group heights for different rows and depths in Advanced DataGrid

Filed under: HOWTO — venomeffect @ 1:38 pm

It’s been a long time since I wrote anything . Promise to be more regular. You heard that right. It is a promise.

So venom is back and this is what he is pondering for now :

Sometimes it is so obvious that you wonder why we dint put somethings into the component which you would assume to be there for granted . What can we say , the use and popularity of the component outgrows its features at times. One such use case which many users have encountered but not been able to get around to is the limitation of custom row heights at different levels of a group when the data provider of tree type is set to the Advanced Data Grid.

This is a very common need especially in financial analysis and when heavy use of item renderers is used for representing the data in a more methodical manner. In fact , a little bit of tweaking to the AdvancedDataGrid component has enabled me to meet this need. Probably you can add on to it whatever you might feel fit to meet your needs.

The two use cases:

I believe the need to set different row heights at different levels of a tree display can be two fold : one being that I would like every row at one particular depth to have a particular height with everything else being the same and the other being that I would want different rows to have different heights to avoid a lot of layout fiasco .

The  approach :

There are two additions to the code here here :

  • Property by the name depthForCustomHeight to which the depth needs to be set . When this value is set ( default being -1) , then this will take the groupRowheight value and set it only to the corresponding depth mentioned.
  • A depth array can be passed to the component which will specify which height needs to be set to which depth. This array should be an array of objects with each object being of the signature :

{depth:2,height:100}

This array will specify the height mentioned in the object to depth mentioned. Note that the depthArray is overridden when the depthForCustomHeight variable is set ( as it should be ) and the latter takes precedence over the former. So , under all circumstances before specifying depthArray, we have to ensure that depthForCustomHeight is of default value -1 .

Enough with the gyaan now. You can check out the app here :

Here are some screenshots of the feature :

When the depthForCustomHeight variable is set to a depth

Depth for custom height

When the depthArray is mentioned :

Depth Array

You can grab the source of the application here . The source for quiet a few of my personal initiatives in Flex are also there for peruse. The component name is VenomGroupRowHeightGrid and the MXML is VariableGroupRowHeight.mxml .It has a few dependencies , so keep the whole lot and run like hell.

3 Comments »

  1. Good job, brother! keep up the good work.

    Comment by vodka — June 1, 2008 @ 12:50 pm | Reply

  2. Cheerio… nice work and a useful one too 🙂

    Comment by Raghu — June 2, 2008 @ 6:39 am | Reply

  3. Hi

    Can you please send me an email? I would like to contact you for a flex job.

    Best regards,
    Nico

    Comment by Nico — October 2, 2009 @ 3:12 pm | Reply


RSS feed for comments on this post. TrackBack URI

Leave a reply to vodka Cancel reply

Create a free website or blog at WordPress.com.