Saturday, March 20, 2010    
Home My Books Blog ColdFusion About Me Back    

Calendar
<< Jul 2006 >>
S M T W T F S
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

Search

Categories
 • Acrobat (3) [RSS]
 • Adobe (90) [RSS]
 • AdobeMAX06 (45) [RSS]
 • AdobeMAX07 (59) [RSS]
 • AdobeMAX08 (66) [RSS]
 • AdobeMAX09 (39) [RSS]
 • AdobeMAX10 (1) [RSS]
 • AIR (219) [RSS]
 • Appearances (191) [RSS]
 • Books (72) [RSS]
 • CFEclipse (15) [RSS]
 • ColdFusion (1381) [RSS]
 • Data Services (34) [RSS]
 • Fish Tank (5) [RSS]
 • Flash (197) [RSS]
 • Flex (498) [RSS]
 • Home Automation (5) [RSS]
 • Jobs (116) [RSS]
 • JRun (14) [RSS]
 • Labs (43) [RSS]
 • LiveCycle (34) [RSS]
 • MAX (232) [RSS]
 • Mobile (120) [RSS]
 • Regular Expressions (17) [RSS]
 • RIA (21) [RSS]
 • SQL (40) [RSS]
 • Stuff (536) [RSS]
 • Tips (CF Studio) (80) [RSS]
 • Tips (CF) (795) [RSS]
 • Tips (Dreamweaver) (91) [RSS]
 • Tips (Flex Builder) (2) [RSS]
 • Using CF (162) [RSS]

Other BLOGs
 • Charlie Arehart
 • Lee Brimelow
 • Ray Camden
 • Christophe Coenraets
 • Sean Corfield
 • Mihai Corlan
 • Cornel Creanga
 • Mark Doherty
 • John Dowdell
 • Danny Dura
 • Enrique Duvos
 • Steven Erat
 • Kevin Hoyt
 • Serge Jespers
 • Adam Lehman
 • Duane Nickull
 • Miti Pricope
 • Andrew Shorten
 • Ryan Stewart
 • James Ward
 • Greg Wilson
 • Full As A Goog

RSS Feeds
 • Feed
 • Subscribe

Join my mailing list and find out about new books and other topics of interest.

Thoughts, ideas, tips, musings, and pontifications (not necessarily in that order) by Ben Forta ...
NOTE: This is my personal blog, and the opinions and statements voiced here are my own.

Viewing By Day : July 13, 2006 / Main
July 13, 2006

Filtering Data In Flex

This afternoon a user IMed me to ask for help with a ColdFusion powered Flex 2 application. He wanted to be able to perform on-the-fly filtering of data in a CF populated Flex DataGrid control. Here is the solution I sent him.

Populate the DataGrid with an ArrayCollection (converting the data to an ArrayCollection if needed). ArrayCollection has a property named filterFunction (well, technically filterFunction is a property of listCollectionView of which ArrayCollection is a subclass) which takes the name of a function to be used to filter data. Each time ArrayCollection contents are refreshed this passed function will be called, once per ArrayCollection item. If the function returns true then the item is included, if false then it is excluded. So, to filter DataGrid contents on-the-fly, simple define a filter function that performs the filtering you need, and call ArrayCollection.refresh() as the filter text changes.

Here is a complete example. In the interests of simplicity this uses a local ArrayCollection (as opposed to data returned from ColdFusion) and will run as is. ArrayCollection myData is the dataProvider for the DataGrid. Function processFilter() is the filter function, it accepts an object and returns true or false based on whether it is a match or not (this filter function looks for substrings in a single column, and this could be changed of course). The TextInput box is where filter text is entered, and the change event simply calls myData.refresh() which forces the filter function to be reapplied to the ArrayCollection.

It is worth noting that filterFunction should not be specified until the ArrayCollection has been populated (or you'll get a null reference error). So, if you are using RemoteObject to invoke a CFC method to return data to populate an ArrayCollection, you should not set filterFunction until data has been returned. As such, you may want to do this in a RemoteObject result handler.

Here's the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical" creationComplete="initApp()">


    <mx:Script>
    <![CDATA[

    // On startup

    public function initApp():void
    {

        // Set filter function
        // Be careful to set filterFunction
        // only after ArrayCollection has been
        // populated.

        myData.filterFunction=processFilter;
    }
        
    // Filter function

    public function processFilter(item:Object):Boolean
    {
        var result:Boolean=false;

        // If no filter text, or a match, then true

        if (!item.name.length
            || item.name.toUpperCase().indexOf(txtFilter.text.toUpperCase()) >
= 0)
            result=true;
                
        return result;
    }
    ]]>

    </mx:Script>

    <!-- Data (use ArrayCollection) -->
    <mx:ArrayCollection id="myData">
        <mx:source>
            <mx:Object name="Ben Forta" location="Oak Park, MI" phone="(248)555-5555" />
            <mx:Object name="Jane Doe" location="New York, NY" phone="(212)555-1234" />
            <mx:Object name="Jim Jones" location="Atlanta, GA" phone="(414)555-1212" />
            <mx:Object name="Roberta Roberts" location="Chicago, IL" phone="(312)555-4321" />
            <mx:Object name="Steve Stevens" location="Boston, MA" phone="(617)555-5656" />
        </mx:source>
    </mx:ArrayCollection>

    <!-- UI -->
    <mx:HBox width="100%">
        <mx:Label text="Filter:"/>
        <mx:TextInput id="txtFilter" width="100%"
                        change="myData.refresh()"/>

    </mx:HBox>
    <mx:DataGrid dataProvider="{myData}"
                    width="100%" height="100%">

        <mx:columns>
            <mx:DataGridColumn headerText="Name"
                                dataField="name"/>

            <mx:DataGridColumn headerText="Location"
                                dataField="location"/>

            <mx:DataGridColumn headerText="Phone"
                                dataField="phone"/>

        </mx:columns>
    </mx:DataGrid>
    
</mx:Application>

Related Blog Entries

TrackBacks
There are no trackbacks for this entry.

No trackback URL. Trackbacks are only allowed via interactive form.

Comments
Hey,
i created a Flex Library (DataFilterLib) that take care of all the filtering process, completly in MXML.
This library is free, you can find the project details there:
http://code.google.com/p/flex-datafilterlib/
If you want to have a look at the examples, they are all there (source available):
http://www.flex-tutorial.fr/DataFilterLib/examples/" target="_blank">http://www.flex-tutorial.fr/DataFilterLib/examples...
Check the examples online if you want to see how to filter on multiple criterias, using different Flex UI Components (CheckBox, Slider, List, ...).

Thanks,
Fabien
http://www.flex-tutorial.fr
# Posted By Adobe Flex Tutorial | 10/2/09 2:43 PM
Check out www.flexicious.com. Its a extended DataGrid control that provides all the filter functionality and a lot more!!
# Posted By Flexicious | 11/30/09 12:58 AM

  © Copyright 1997-2009 Ben Forta, All Rights Reserved