Flex Examples » filterFunction http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Filtering an MX DataGrid control by date range using Flex http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/#comments Tue, 02 Feb 2010 02:11:22 +0000 Peter deHaan http://blog.flexexamples.com/?p=2366 The following example shows how you can filter an MX DataGrid control in Flex using two MX DateField control’s and filtering the ArrayCollection data provider.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ --> <mx:Application name="MX_DataGrid_filter_DateField_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();">   <mx:Script> <![CDATA[ protected const MIN_DATE:Date = new Date(2010, 0, 1); protected const MAX_DATE:Date = new [...]]]> The following example shows how you can filter an MX DataGrid control in Flex using two MX DateField control’s and filtering the ArrayCollection data provider.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ -->
<mx:Application name="MX_DataGrid_filter_DateField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            protected const MIN_DATE:Date = new Date(2010, 0, 1);
            protected const MAX_DATE:Date = new Date(2010, 11, 31);
 
            protected function date_labelFunc(item:Object, col:DataGridColumn):String {
                var time:Number = Date.parse(item[col.dataField]);
                return new Date(time).toDateString();
            }
 
            protected function arrColl_filterFunc(item:Object):Boolean {
                var cDate:Number = Date.parse(item.holidayDate);
 
                if (!sDate || !eDate) {
                    return true;
                }
 
                if (sDate.selectedDate && eDate.selectedDate) {
                    return (sDate.selectedDate.time <= cDate) && (eDate.selectedDate.time >= cDate);
                } else if (sDate.selectedDate) {
                    return sDate.selectedDate.time <= cDate;
                } else if (eDate.selectedDate) {
                    return eDate.selectedDate.time >= cDate;
                } else {
                    return true;
                }
            }
 
            protected function init():void {
                sDate.selectedDate = MIN_DATE;
                sDate.selectableRange = {rangeStart:MIN_DATE, rangeEnd:MAX_DATE};
 
                eDate.selectedDate = MAX_DATE;
                eDate.selectableRange = sDate.selectableRange;
            }
        ]]>
    </mx:Script>
 
    <mx:ArrayCollection id="arrColl" filterFunction="arrColl_filterFunc">
        <mx:source>
            <mx:Array>
                <mx:Object holidayName="New Years" holidayDate="2010/1/1" />
                <mx:Object holidayName="Martin Luther King, Jr. Day" holidayDate="2010/1/18" />
 
                <mx:Object holidayName="Groundhog Day" holidayDate="2010/2/2" />
                <mx:Object holidayName="Chinese New Year" holidayDate="2010/2/14" />
                <mx:Object holidayName="Valentine's Day" holidayDate="2010/2/14" />
                <mx:Object holidayName="President's Day" holidayDate="2010/2/15" />
                <mx:Object holidayName="Ash Wednesday" holidayDate="2010/2/17" />
 
                <mx:Object holidayName="Daylight Saving Time starts" holidayDate="2010/3/14" />
                <mx:Object holidayName="St. Patrick's Day" holidayDate="2010/3/17" />
                <mx:Object holidayName="First Day of Spring" holidayDate="2010/3/20" />
 
                <mx:Object holidayName="April Fool's Day" holidayDate="2010/4/1" />
                <mx:Object holidayName="Easter" holidayDate="2010/4/4" />
                <mx:Object holidayName="Administrative Professional's Day" holidayDate="2010/4/21" />
                <mx:Object holidayName="Earth Day" holidayDate="2010/4/22" />
 
                <mx:Object holidayName="Cinco De Mayo" holidayDate="2010/5/5" />
                <mx:Object holidayName="Mothers Day" holidayDate="2010/5/9" />
                <mx:Object holidayName="Armed Forces Day" holidayDate="2010/5/15" />
                <mx:Object holidayName="Memorial Day" holidayDate="2010/5/31" />
 
                <mx:Object holidayName="Flag Day" holidayDate="2010/6/14" />
                <mx:Object holidayName="Father's Day" holidayDate="2010/6/20" />
                <mx:Object holidayName="Summer Begins" holidayDate="2010/6/21" />
 
                <mx:Object holidayName="Independence Day/July 4th" holidayDate="2010/7/4" />
 
                <mx:Object holidayName="Labor Day" holidayDate="2010/9/6" />
                <mx:Object holidayName="Grandparents Day" holidayDate="2010/9/12" />
                <mx:Object holidayName="First Day of Autumn" holidayDate="2010/9/23" />
 
                <mx:Object holidayName="Columbus Day" holidayDate="2010/10/11" />
                <mx:Object holidayName="United Nations Day" holidayDate="2010/10/24" />
                <mx:Object holidayName="Halloween" holidayDate="2010/10/31" />
 
                <mx:Object holidayName="All Saints' Day" holidayDate="2010/11/1" />
                <mx:Object holidayName="Daylight Saving Time Ends" holidayDate="2010/11/7" />
                <mx:Object holidayName="Veteran's Day" holidayDate="2010/11/11" />
                <mx:Object holidayName="Thanksgiving" holidayDate="2010/11/25" />
 
                <mx:Object holidayName="Wright Brothers Day" holidayDate="2010/12/17" />
                <mx:Object holidayName="First Day Winter" holidayDate="2010/12/21" />
                <mx:Object holidayName="Christmas" holidayDate="2010/12/25" />
                <mx:Object holidayName="New Years Eve" holidayDate="2010/12/31" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="Start date:">
                <mx:DateField id="sDate" change="arrColl.refresh();" />
            </mx:FormItem>
            <mx:FormItem label="End date:">
                <mx:DateField id="eDate" change="arrColl.refresh();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dGrid" dataProvider="{arrColl}" width="400">
        <mx:columns>
            <mx:DataGridColumn dataField="holidayName" />
            <mx:DataGridColumn dataField="holidayDate" labelFunction="date_labelFunc" />
        </mx:columns>
    </mx:DataGrid>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/feed/ 19 Filtering an XMLListCollection using Regular Expressions http://blog.flexexamples.com/2009/04/01/filtering-an-xmllistcollection-using-regular-expressions/ http://blog.flexexamples.com/2009/04/01/filtering-an-xmllistcollection-using-regular-expressions/#comments Thu, 02 Apr 2009 06:59:11 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/01/filtering-an-xmllistcollection-using-regular-expressions/ The following example shows how you can filter an XMLListCollection collection by using regular expressions in Flex 4.

Full code after the jump.

For more information on the the API changes related to the removal of the “fx” prefix in Flex 4, see the “Dropping the Fx Prefix” page on opensource.adobe.com.

<?xml version="1.0" [...]]]> The following example shows how you can filter an XMLListCollection collection by using regular expressions in Flex 4.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

For more information on the the API changes related to the removal of the “fx” prefix in Flex 4, see the “Dropping the Fx Prefix” page on opensource.adobe.com.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/01/filtering-an-xmllistcollection-using-regular-expressions/ -->
<s:Application name="XMLListCollection_filterFunction_RegExp_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        backgroundColor="white">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            private function textInput_change():void {
                if (textInput.text.length == 0) {
                    xmlListColl.filterFunction = null;
                } else {
                    xmlListColl.filterFunction = xmlListColl_filterFunc;
                }
                xmlListColl.refresh();
            }
 
            private function xmlListColl_filterFunc(item:Object):Boolean {
                if (textInput.text.length == 0) return true;
                var f:String = "ig";
                var wasRegExp:RegExp = new RegExp(textInput.text, f);
                var nowRegExp:RegExp = new RegExp(textInput.text, f);
                var wasMatch:Boolean = wasRegExp.test(item.@was);
                var nowMatch:Boolean = nowRegExp.test(item.@now);
 
                return (wasMatch || nowMatch);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:XML id="nodesXML" source="nodes.xml" />
        <mx:XMLListCollection id="xmlListColl"
                source="{nodesXML.node}"
                filterFunction="xmlListColl_filterFunc" />
    </fx:Declarations>
 
    <s:controlBarContent>
        <mx:Form styleName="plain">
            <mx:FormItem label="Filter:">
                <s:TextInput id="textInput"
                        change="textInput_change();" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{xmlListColl}"
            verticalScrollPolicy="on"
            width="90%"
            rowCount="10">
        <mx:columns>
            <mx:DataGridColumn dataField="@was" headerText="Was:" />
            <mx:DataGridColumn dataField="@now" headerText="Now:" />
        </mx:columns>
    </mx:DataGrid>
 
</s:Application>

And the nodes.xml data file is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/01/filtering-an-xmllistcollection-using-regular-expressions/ -->
<nodes>
    <node was="mx.components.ButtonBarButton" now="spark.components.ButtonBarButton" />
    <node was="mx.components.DataGroup" now="spark.components.DataGroup" />
    <node was="mx.components.DropDownList" now="spark.components.DropDownList" />
    <node was="mx.components.FxButton" now="spark.components.Button" />
    <node was="mx.components.FxButtonBar" now="spark.components.ButtonBar" />
    <!-- ... -->
</nodes>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/04/01/filtering-an-xmllistcollection-using-regular-expressions/feed/ 3 Using a Slider to filter items in a DataGrid control in Flex http://blog.flexexamples.com/2008/09/12/using-a-slider-to-filter-items-in-a-datagrid-control-in-flex/ http://blog.flexexamples.com/2008/09/12/using-a-slider-to-filter-items-in-a-datagrid-control-in-flex/#comments Sat, 13 Sep 2008 06:57:41 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/12/using-a-slider-to-filter-items-in-a-datagrid-control-in-flex/ In a previous example, “Using a CheckBox to filter items in a DataGrid in Flex”, we saw how to filter the items in a Flex DataGrid control based on whether the user selected a CheckBox control or not.

The following example shows how you can filter items in a Flex DataGrid control using an [...]]]> In a previous example, “Using a CheckBox to filter items in a DataGrid in Flex”, we saw how to filter the items in a Flex DataGrid control based on whether the user selected a CheckBox control or not.

The following example shows how you can filter items in a Flex DataGrid control using an HSlider control, and the ArrayCollection class’s filterFunction property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/12/using-a-slider-to-filter-items-in-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function init():void {
                if (checkBox.selected) {
                    arrColl.filterFunction = sliderFilterFunc;
                    arrColl.refresh();
                }
            }

            private function checkBox_change(evt:Event):void {
                if (checkBox.selected) {
                    arrColl.filterFunction = sliderFilterFunc;
                } else {
                    arrColl.filterFunction = null;
                }
                arrColl.refresh();
            }

            private function slider_change(evt:SliderEvent):void {
                arrColl.refresh();
            }

            private function sliderFilterFunc(item:Object):Boolean {
                var minSlider:uint = slider.values[0];
                var maxSlider:uint = slider.values[1];
                if ((item.value >= minSlider) &&
                            (item.value <= maxSlider)) {
                    return true;
                } else {
                    return false;
                }
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="One" value="100" />
                <mx:Object label="Two" value="2" />
                <mx:Object label="Three" value="300" />
                <mx:Object label="Four" value="40" />
                <mx:Object label="Five" value="500" />
                <mx:Object label="Six" value="60" />
                <mx:Object label="Seven" value="700" />
                <mx:Object label="Eight" value="800" />
                <mx:Object label="Nine" value="90" />
                <mx:Object label="Ten" value="100" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="filter:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="values:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="1000"
                        values="[0,1000]"
                        labels="[0,500,1000]"
                        thumbCount="2"
                        showTrackHighlight="true"
                        snapInterval="1"
                        tickInterval="100"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrColl}"
                verticalScrollPolicy="on" />
    </mx:Panel>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/12/using-a-slider-to-filter-items-in-a-datagrid-control-in-flex/feed/ 1 Using a CheckBox to filter items in a DataGrid in Flex http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/#comments Thu, 13 Mar 2008 02:42:18 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ The following example shows how you can filter items in a Flex DataGrid using a CheckBox control, and the ArrayCollection class’s filterFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridColumn; private function toggleFilter():void { if (checkBox.selected) { [...]]]> The following example shows how you can filter items in a Flex DataGrid using a CheckBox control, and the ArrayCollection class’s filterFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;

            private function toggleFilter():void {
                if (checkBox.selected) {
                    arrColl.filterFunction = processFilter;
                } else {
                    arrColl.filterFunction = null;
                }
                arrColl.refresh();
            }

            private function processFilter(item:Object):Boolean {
                return parseFloat(item.value) == 0;
            }

            private function value_labelFunc(item:Object, col:DataGridColumn):String {
                return item[col.dataField].toFixed(2);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="ColdFusion" value="0.00" />
                <mx:Object name="Dreamweaver" value="0.12" />
                <mx:Object name="Fireworks" value="1.01" />
                <mx:Object name="Flash" value="0" />
                <mx:Object name="Flash Player" value="-0.00" />
                <mx:Object name="Flex" value="0.00" />
                <mx:Object name="Illustrator" value="2.92" />
                <mx:Object name="Lightroom" value="0.32" />
                <mx:Object name="Photoshop" value="0.06" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrColl}"
                verticalScrollPolicy="on">
            <mx:columns>
                <mx:DataGridColumn dataField="name" />
                <mx:DataGridColumn dataField="value"
                        labelFunction="value_labelFunc" />
            </mx:columns>
        </mx:DataGrid>
        <mx:ControlBar>
            <mx:CheckBox id="checkBox"
                    label="Filter DataGrid"
                    click="toggleFilter();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/feed/ 21