Monday 30 Nov 2015   

Flex Datagrid Filter Tutorial

Flex / ColdFusion Tutorial #7

In this sample, a DataGrid is populated and a textbox allows entry of data. As the data is typed the DataGrid is dynamically filtered by eliminating rows that don't match the filter. It automatically searches all columns defined in the grid.


When a user types in a key word the search splits the words by a space delimiter and matches letter by letter, filtering each row from the arrayCollection narrowing down the results.


The cfc queries the database retrieving the dataset which is passed to flex. The resulting dataset is bound to the data grid. I am able to use the existing data without going back to ColdFusion. While remote objects are quick it’s not as quick as client side and if I can do it with flex well why not.


See this code running!


Download this code as a zip!


Great code. Yours is the best I've found. Thanks!!!
salut @ Friday 15 May 2009 - 04:00:48 AM

Is there a way to disable the searchText until after the datagrid is populated?
FlexGuy @ Thursday 06 Aug 2009 - 05:41:46 AM

Set the TextInput enabled="false" then in getDataSuccess set it back to true.
Paul @ Thursday 06 Aug 2009 - 05:47:06 AM

Thanks for smart solution.
Jewel @ Friday 23 Oct 2009 - 06:48:25 PM

I normally set my dataProvider for a DataGrid in the the script block instead of in the DataGrid control. Can I do the same here, and if so, how?
Lee @ Saturday 31 Oct 2009 - 03:01:58 AM

Any idea how to use this with multiple filters? Say, if I have a drop down to filter the books by Genre first, then be able to type something and just filter by what I am typing and Genre?
Chris @ Tuesday 10 Nov 2009 - 01:04:25 AM

Click button to add a comment


Paul Kukiel


Thursday 17 Apr 2008


cfcomponent  cffunction  cfquery  cfreturn  cfset  mx:Application  mx:DataGrid  mx:FormItem  mx:method  mx:RemoteObject  mx:Script  mx:TextInput