"Filter results in DataGrid" Flex Tutorial

Utorok, Apríl 29th, 2008

This is new post in my DataGrid Series Flex Tutorials. This tutorial shows you how to filter rows for searched keyword. It’s quite easy, since dataProvider for DataGrid is ArrayCollection, and ArrayCollection has variable filterFunction. It simple expect function which will filter correct rows for you. So basically, you have Datagrid and dataProvider is defined like this

[as]
[Bindable] public var dpRows:ArrayCollection;
[/as]

then you can create filter function in this simple way:

[as]
public function filterResults():void
{
dpRows.filterFunction = _sortRows;
dpRows.refresh();
}
[/as]

and finally function, which filters results. It returns true for row, which will be visible, and false for row which will be hiden.

[as]
private function _sortRows(item:Object):Boolean
{
var col:String = cmbCol.selectedItem.data as String;
var key:String = keyword.text;

key = key.toLowerCase();

if (key != “”)
{
if (col != “any”)
{
var value:String = item[col];
value = value.toLowerCase();

if (value.indexOf(key) >= 0)
{
return true;
}
} else {
for (var o:String in item)
{
value = item[o];
value = value.toLowerCase();
if (value.indexOf(key) >= 0)
{
return true;
}
}
}
} else {
return true;
}

return false;
}
[/as]

It’s quite simple tutorial. Here you can see source code for example which follows.

ArrayCollection filterFunction example screenshot

In next tutorial for DataGrid I will show you how you can add Button into cell. We will use custom itemRenderer for DataGridColumn.

If you have any questions, or suggestions for tutorial, please let me know…

Enjoy.

tagged under:

ABOUT THIS AUTHOR

4 Comments


  1. Yulia
    Visit Site
    Apríl 30th, 2008

    Hi,
    I’m interested in buying links from your blog
    Please contact me by email
    Thanks


  2. Tink
    Visit Site
    Máj 2nd, 2008

    You might find the following useful too

    http://www.tink.ws/blog/filtereddatagrid/

    I implemented it this way as I was using the same ArrayCollection in more than one place, and I needed each to be filtered in a different way, without affecting the other (i.e. not affecting the original data).


  3. Flexicious
    Visit Site
    December 12th, 2009

    Please feel free to look at http://www.flexdatagrid.com or http://www.flexicious.com. Its a custom flex datagrid that has built in support for server and client paging in addition to a host of other features.


  4. senling
    Visit Site
    Jún 3rd, 2010

    Hi,

    I tried your code and it works perfect.
    I’m facing small issue while customizing it to my app.

    Result-set are retrieved from database table and binded to the datagrid dataprovider. I’m displaying only few columns from the result-set. For individual column filtering , there is no issue. But for ‘Any’ option filter returns following error :

    TypeError: Error #1009: Cannot access a property or method of a null object reference.

    at this line
    value = item[o];
    value = value.toLowerCase();

    Please provide some suggestion.

    Thanks in Advance
    Senling

Sorry, comments for this entry are closed at this time.

Images is enhanced with WordPress Lightbox JS by Zeo