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.

February 25, 2008

HOWTO: Context specific data filter using a popUp on the AdvancedDataGrid headerRenderer

Filed under: HOWTO — venomeffect @ 10:57 am

“Venom Ponders : If context weren’t that important, then man can pray for being the lone male in a world full of women and God can give him that pleasure…………………while making him a raving homosexual ”

BackGround:

Some of the most intriguing applications of a grid is a task planner . A task planner has the kind of functionality that can push the limits of customization we can push a grid to. One of the most important features of a task planner will be to filter the data based on some category without compromising on the oft neglected “intuitive” factor . Enter the AdvancedDataGrid.

Among the many customizable pieces of the AdvancedDataGrid, the headerRenderer should top the list . It is surprising the kind of things a person can fathom and apply with modifications here and there to the ADG header , my latest lap mate . But then again , she has has her limitations. She is not that great in accommodating three or more UIComponents . I thought I will get around to it to solve both the problems .

Code explained:

The headerRenderer here in this code sample is a modification to the existing AdvancedDataGridHeaderRenderer. She accomodates a popUpButton with a popUpMenu whose members change on the basis of the dataField of the column whose header carries it.

Two functions in particular need to be mentioned here. These being :

protected function onPopUpMouseDown(event:MouseEvent):void{…} and

protected function filterData(event:MenuEvent):void {…}

The first function provides the functionality and the dataProvider to load the PopUpMenu while the second function provides the functionality to specify the filter function. Thats it. Simple is’nt it ? Now if someone needs to provider a different functionality to the code altogether rather than specify the filter function , then these are the functions to override to get the functionality working.

P.S : I confess the code can be buggy . And yeah. The dataFields are hard coded into the set data of the headerRenderer. Dint think of a better means of getting around it . This being a prototype component you are free to modify it , steal it and sabotage it at your will to suit your requirements. She is for open stuff.

Here’s how the output of a sample program using this headerRenderer will look like :

popUpExample

Goodies:

Heres a sample application using this popUp header renderer component

You can find the source here

December 4, 2007

HOWTO: Setting a custom sortItemRenderer to the AdvancedDataGrid

Filed under: HOWTO — venomeffect @ 11:18 am

“We should all do what in the long run gives us joy, even if it means sorting the laundry ”

BackGround:

sortItemRenderer is one of those tiny goodies that comes with the AdvancedDataGrid package; albeit hard to miss. It is a nifty venomous utility that can be customizable according to needs.

The component by default uses the AdvancedDataGridSortItemRenderer which renders the sort feature of the header.

Sweet. But now I am in my familiar break-the-code-and-do-some-shit-on-my-own mood when I use my own headerRenderer , I lose the sort display completely !

The solution here will to write either a custom sortItemRenderer or handle the default sortItemRenderer within the headerRenderer code . Here I explain how to build a custom sortItemRenderer that can be used with any customized headerRenderer.

Code explained :

The core feature to understand here is the function getIconInfo() that returns a SortInfo object . The SortInfo object contains information which is used by the sortItemRenderer to dipslay the icon and the sequence value of the sort. ( P.S. : The order of sorting can easily be specified by accessing sequenceNumber as returned by this SortInfo object.

This function makes a call to the getFieldSortInfo method of AdvancedDataGrid to retrieve the sort information.

This example code uses two icons to display ascending/descending sort as in :

var sortIcon:Class = arrowDown ? _descendingIcon : _ascendingIcon;

A simple function flips the icon based on the SortInfo value .

The output of the program will look like this :

Custom Sort

Goodies :
Here is the link to an application that uses this custom built sortRenderer

You can find the source here

Blog at WordPress.com.