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

“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 :

Goodies:

Heres a sample application using this popUp header renderer component

You can find the source here

About these ads