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 ”


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 :



Heres a sample application using this popUp header renderer component

You can find the source here


1 Comment »

  1. Hi,
    I’m very impressed with your code and I’m actually using it in my application! seems like it is the best sample I could find on this topic!
    what I’m doing is that I have checkboxes in my combobox with a filter button, so that the users can filter on multiple items and do the filtering by clicking on the filter button.
    I have 2 problems:
    1) I create checkboxes in onPopUpMouseDown function! so they get created everytime the combobox opens!!! and so the selected checkboxes will be deselected (refresh!)
    2) you are calling the filterFunction in VenumHeaderRenderer on grid.dataProvider.
    in my UI I take care of grouping too! so when I have grouping on my data this grid.dataProvider will be my groupingCollection and not a flat data! and that’s why the filtering does not work on a grouped data!
    I tried to add the filterFunction to my flat data in my application mxml file, but it gets called before the grid gets created so it gives me a null pointer exception :(((( I’m stuck! It’s been 3 days that I want to fix this bug, I really like your code and want to use it.
    I would appreciate your help

    Comment by golnoosh — June 25, 2009 @ 5:59 pm | Reply

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: