Here is an example of Data grid filtered using a H slider with 2 thumbs to select the range of date for which to filter the data grid. The combo box is used to select the specific column on which the filter has to be applied to. The check box is used to either enable or disable the filter functionality.
Screenshot:
For source please read the complete article
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
height=”300″ width=”600″
backgroundColor=”white”
creationComplete=”init();”><mx:Script>
<![CDATA[
import mx.events.SliderEvent;private function init():void {
if (checkBox.selected) {
arrColl.filterFunction = sliderFilterFunc;
arrColl.refresh();
}
}
private var comb : Array = [{label:"value1",data:0},
{label:"value2",data:1},
{label:"value3",data:2}];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 bool:Boolean;
switch(vx.selectedItem.data){
case 0:
bool = checkData(item.value1);
break;
case 1:
bool = checkData(item.value2);
break;
case 2:
bool = checkData(item.value3);
break;
}
return bool;
}private function checkData(num:Number):Boolean{
var minSlider:Number = slider.values[0];
var maxSlider:Number = slider.values[1];
if ((num >= minSlider)&&(num <= maxSlider))
return true;
else
return false;}
]]>
</mx:Script><mx:ArrayCollection id=”arrColl”>
<mx:source>
<mx:Array>
<mx:Object label=”One” value1=”100″ value2=”100″ value3=”60″/>
<mx:Object label=”Two” value1=”2″ value2=”90″ value3=”600″/>
<mx:Object label=”Three” value1=”300″ value2=”40″ value3=”200″/>
<mx:Object label=”Four” value1=”40″ value2=”100″ value3=”100″/>
<mx:Object label=”Five” value1=”500″ value2=”200″ value3=”400″/>
<mx:Object label=”Six” value1=”60″ value2=”300″ value3=”80″/>
<mx:Object label=”Seven” value1=”700″ value2=”500″ value3=”30″/>
<mx:Object label=”Eight” value1=”800″ value2=”50″ value3=”50″/>
<mx:Object label=”Nine” value1=”90″ value2=”90″ value3=”50″/>
<mx:Object label=”Ten” value1=”100″ value2=”10″ value3=”100″/>
</mx:Array>
</mx:source>
</mx:ArrayCollection><mx:ApplicationControlBar dock=”true”>
<mx:HBox width=”100%”>
<mx:Label text=”filter” />
<mx:CheckBox id=”checkBox” selected=”true” change=”checkBox_change(event);” />
<mx:ComboBox id=”vx” dataProvider=”{comb}”/>
<mx:Label text=”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:HBox>
</mx:ApplicationControlBar><mx:Panel status=”{arrColl.length}/{arrColl.source.length} item(s)”>
<mx:DataGrid id=”dataGrid” dataProvider=”{arrColl}” verticalScrollPolicy=”on” />
</mx:Panel></mx:Application>
Related posts:
