Flex Examples » refresh() 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 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 Determining when an ArrayCollection changes in Flex http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/ http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/#comments Thu, 15 May 2008 06:32:53 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/ The following example shows how you can detect when a Flex ArrayCollection has changed (items added, removed, refreshed) by listening for the collectionChange event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.utils.ObjectUtil; import mx.controls.dataGridClasses.DataGridColumn; import mx.events.CollectionEvent; private function [...]]]> The following example shows how you can detect when a Flex ArrayCollection has changed (items added, removed, refreshed) by listening for the collectionChange event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.events.CollectionEvent;

            private function arrColl_collectionChange(evt:CollectionEvent):void {
                callLater(addTheItem, [evt]);
            }

            private function arrCollAddItem():void {
                arrColl.addItem({data:new Date()});
            }

            private function addTheItem(evt:Event):void {
                eventsArrColl.addItem(evt);
            }

            private function arrCollRemoveItem():void {
                if (arrColl.length > 0) {
                    arrColl.removeItemAt(0);
                }
            }

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

    <mx:ArrayCollection id="eventsArrColl" />
    <mx:ArrayCollection id="arrColl"
            collectionChange="arrColl_collectionChange(event);" />

    <mx:Model id="columnModel">
        <columns>
            <bubbles>{bubblesCheckBox.selected}</bubbles>
            <cancelable>{cancelableCheckBox.selected}</cancelable>
            <currentTarget>{currentTargetCheckBox.selected}</currentTarget>
            <eventPhase>{eventPhaseCheckBox.selected}</eventPhase>
            <items>{itemsCheckBox.selected}</items>
            <kind>{kindCheckBox.selected}</kind>
            <location>{locationCheckBox.selected}</location>
            <oldLocation>{oldLocationCheckBox.selected}</oldLocation>
            <target>{targetCheckBox.selected}</target>
            <type>{typeCheckBox.selected}</type>
        </columns>
    </mx:Model>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item to ArrayCollection"
                emphasized="true"
                click="arrCollAddItem();" />
        <mx:Button label="Remove item"
                click="arrCollRemoveItem();" />
        <mx:Button label="Refresh items"
                click="arrColl.refresh();" />

        <mx:Spacer width="100%" />

        <mx:PopUpButton label="Toggle DataGrid columns"
                openAlways="true">
            <mx:popUp>
                <mx:Form styleName="plain"
                        backgroundColor="white">
                    <mx:FormItem label="bubbles:">
                        <mx:CheckBox id="bubblesCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="cancelable:">
                        <mx:CheckBox id="cancelableCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="currentTarget:">
                        <mx:CheckBox id="currentTargetCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="eventPhase:">
                        <mx:CheckBox id="eventPhaseCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="items:">
                        <mx:CheckBox id="itemsCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="kind:">
                        <mx:CheckBox id="kindCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="location:">
                        <mx:CheckBox id="locationCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="oldLocation:">
                        <mx:CheckBox id="oldLocationCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="target:">
                        <mx:CheckBox id="targetCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="type:">
                        <mx:CheckBox id="typeCheckBox"
                                selected="true" />
                    </mx:FormItem>
                </mx:Form>
            </mx:popUp>
        </mx:PopUpButton>
    </mx:ApplicationControlBar>

    <mx:VDividedBox width="100%" height="100%">
        <mx:List id="list"
                dataProvider="{arrColl}"
                labelField="data"
                width="50%"
                rowCount="5" />
        <mx:DataGrid id="dataGrid"
                dataProvider="{eventsArrColl}"
                itemRenderer="mx.controls.Label"
                width="100%"
                height="100%">
            <mx:columns>
                <mx:DataGridColumn dataField="bubbles"
                        visible="{columnModel.bubbles}" />
                <mx:DataGridColumn dataField="cancelable"
                        visible="{columnModel.cancelable}" />
                <mx:DataGridColumn dataField="currentTarget"
                        visible="{columnModel.currentTarget}" />
                <mx:DataGridColumn dataField="eventPhase"
                        visible="{columnModel.eventPhase}" />
                <mx:DataGridColumn dataField="items"
                        labelFunction="dataGridColumn_labelFunc"
                        visible="{columnModel.items}" />
                <mx:DataGridColumn dataField="kind"
                        visible="{columnModel.kind}" />
                <mx:DataGridColumn dataField="location"
                        visible="{columnModel.location}" />
                <mx:DataGridColumn dataField="oldLocation"
                        visible="{columnModel.oldLocation}" />
                <mx:DataGridColumn dataField="target"
                        visible="{columnModel.target}" />
                <mx:DataGridColumn dataField="type"
                        visible="{columnModel.type}" />
            </mx:columns>
        </mx:DataGrid>
    </mx:VDividedBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/feed/ 10 Resetting a sort on a DataGrid control in Flex http://blog.flexexamples.com/2008/04/08/resetting-a-sort-on-a-datagrid-control-in-flex/ http://blog.flexexamples.com/2008/04/08/resetting-a-sort-on-a-datagrid-control-in-flex/#comments Wed, 09 Apr 2008 06:51:23 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/08/resetting-a-sort-on-a-datagrid-control-in-flex/ The following example shows how you can reset a sort on a Flex DataGrid control by setting the ArrayCollection data provider’s sort property to null and refreshing the array collection using the refresh() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/08/resetting-a-sort-on-a-datagrid-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> [...]]]> The following example shows how you can reset a sort on a Flex DataGrid control by setting the ArrayCollection data provider’s sort property to null and refreshing the array collection using the refresh() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/08/resetting-a-sort-on-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.Sort;

            private function refreshSort():Boolean {
                arrColl.sort = null;
                return arrColl.refresh();
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object en="One" fr="Un" es="Uno" />
                <mx:Object en="Two" fr="Deux" es="Dos" />
                <mx:Object en="Three" fr="Trois" es="Tres" />
                <mx:Object en="Four" fr="Quatre" es="Cuatro" />
                <mx:Object en="Five" fr="Cinq" es="Cinco" />
                <mx:Object en="Six" fr="Six" es="Seis" />
                <mx:Object en="Seven" fr="Sept" es="Siete" />
                <mx:Object en="Eight" fr="Huit" es="Ocho" />
                <mx:Object en="Nine" fr="Neuf" es="Nueve" />
                <mx:Object en="Ten" fr="Dix" es="Diez" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Reset sort"
                click="refreshSort();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            rowCount="6"
            verticalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn dataField="en"
                    headerText="English:" />
            <mx:DataGridColumn dataField="fr"
                    headerText="French:" />
            <mx:DataGridColumn dataField="es"
                    headerText="Spanish:" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/08/resetting-a-sort-on-a-datagrid-control-in-flex/feed/ 2 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 Sorting an ArrayCollection using the SortField and Sort classes http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/ http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/#comments Sun, 05 Aug 2007 15:18:48 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/ Sometimes in life you just need data to be sorted. Whether its a case insensitive sort (for names) or a numeric sort (for, uh, numbers), you just want things sorted in a particular order.

This example demonstrates how you can take a bunch of random numbers in an ArrayCollection and sort them numerically in ascending [...]]]> Sometimes in life you just need data to be sorted. Whether its a case insensitive sort (for names) or a numeric sort (for, uh, numbers), you just want things sorted in a particular order.

This example demonstrates how you can take a bunch of random numbers in an ArrayCollection and sort them numerically in ascending order.

Download source (ZIP, 1K) | View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.SortField;
            import mx.collections.Sort;
            import mx.collections.ArrayCollection;
 
            [Bindable]
            private var arrColl:ArrayCollection;
 
            /** This method gets called by the main mx:Application tag and initializes/populates the ArrayCollection object with a bunch of random numbers. */
            private function init():void {
                var i:int;
 
                /* Initialize and populate the ArrayCollection object. */
                arrColl = new ArrayCollection();
                for (i = 0; i < 20; i++) {
                    arrColl.addItem({data:getRandomNumber().toFixed(4)});
                }
            }
 
            /** This method returns a random floating-point number between 0 and 10000. */
            private function getRandomNumber():Number {
                return Math.random() * 10000;
            }
 
            /** This method gets called by the Button control's click handler and creates a new SortField and Sort object which are used to sort the ArrayCollection. */
            private function button_click():void {
                /* Create the SortField object for the "data" field in the ArrayCollection object, and make sure we do a numeric sort. */
                var dataSortField:SortField = new SortField();
                dataSortField.name = "data";
                dataSortField.numeric = true;
 
                /* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
                var numericDataSort:Sort = new Sort();
                numericDataSort.fields = [dataSortField];
 
                /* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */
                arrColl.sort = numericDataSort;
                arrColl.refresh();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list" dataProvider="{arrColl}" textAlign="right" labelField="data" width="100" />
 
    <mx:Button id="button" label="sort items" click="button_click()" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/feed/ 38