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 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>