Flex Tip of the Day: filterFunction for real time filtering of data
July 7, 2007
Continuing my series of tips for Flex beginners ….
filterFunction for real time filtering of data
A filterFunction allows you to create a filtered view of an ArrayCollection or XMLListCollection based on some criteria. This is useful in showing only relevant part of the data to the user ….. AutoComplete functionality or Google Suggest like functionality can be implemented using filterFunctions.
Below is an example of filterFunction in action:
- View Source: I’ve put comments in the source of this example to explain the use of the filterFunction property of collections. Let me know if you have any questions.
- View Application in new Window
Drag the slider to see the real time filtering:
July 9th, 2007
Thanks for the tip,
Quick question, if i use “additem” on the collection do i need to refresh the collection to filter the new data? or will it do it automatically?
July 9th, 2007
Hi James,
The filter will be automatically applied when you addItem .. you do not need to refresh
November 5th, 2007
Hi this is a great implementation of filters. Is there a way to filter one version of an array or xmlcollection and still have access to the unfiltered version for use at the same time by a different component?
Thanks
January 7th, 2008
Yes you can create a ListCollectionView from the original ArrayCollection and filter the view.
Also the property list of ArrayCollecition gives you the raw data, unfiltered and unsorted.
February 13th, 2008
Hi, may i know does this works for TileList?
February 13th, 2008
Yanhua,
Yes it would work with a TileList as well, filterFunction acts on your data provider, when the data provider changes whatever control is dependent on that data updates
February 14th, 2008
I have an if else statement for my textinput filter. I tried to combine the above codes into the filter function(from example, filterForTestData). When i combined the two if else statements together, it can’t work.
It is either my textinput filter can work or the slider can work all depends which if else statement i put right after the .. boolean {.
February 14th, 2008
*my textinput filter is put in a comboBox.
July 28th, 2008
hi could you please help me out hear. i have a datagrid that gets data from a cfc through remote objects and i would like to filter it using a combo box and a slider, do you mind sharing an example on how to do this? thanks in advance
August 5th, 2008
Correct way to use filterFunction ( Dont apply the filterFunction on the main dataProvider instead use a ListCollectionView) .
ListCollView filtered = new ListCollectionView(myArrycoll);
Right click for view source:
http://www.preterra.com/flexsamples/listcollectionview/main.html
August 5th, 2008
Vijay,
ListCollectionView is another way to do this provided you need multiple views … my example above doesn’t
Why exactly is that “the correct way” ?
Mrinal
October 30th, 2008
I have been using filterFunction to filter out the data that I render on a TileList. Is there a way to have add and remove item effect for filterfunction too? I had tried having showEffect and hideEffect (wipeout and wipein) to the itemRenderer of the TileList. Even though it works, its add an unpredictable behavior to the items rendered on the TileList. Some items doesnt get listed and if i refresh, they come back again. Seems not a feasible solution. Have you been able to get around this problem Mrinal?
January 21st, 2009
Mrinal, Your example above is excellent…i just wanted to point out to people one more point that its a good practice to assign the filterFunction on the model referance(ICollectionView.filterFunc) rather than using a view reference(dataGrid.dataProvider.filterFunc).
It took me a while to figure out that i had to reset the dataGrid.dataProvider.filterFunc = null after assigning a new set of data from server.
January 26th, 2009
Mrinal I guess the reason why Vija says using ListCollectionView is the “correct way” is because only this way you’re sure not to break any other part of the application. By setting a filter function directly on an arraycollection other parts of the application using this arraycollection are impacted as well.
April 30th, 2009
Hi there how easy is it to use 2 sliders that filter the same content in real time no refresh buttons etc.
ie first slider is filtering one value second filtering values of different item