Friday 31 Oct 2014   
Add Comment

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.

FlexSearch.mxml

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.



Book.cfc

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.



Demo

See this code running!


Download

Download this code as a zip!


Comments

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


Author

Paul Kukiel


Published

Thursday 17 Apr 2008

Tags

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