FlexOuti am an itemrendrer in the making!

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();”>

<mxcript>
<![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(evtliderEvent):void {
arrColl.refresh();
}

private function sliderFilterFunc(itembject)oolean {
var booloolean;
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)oolean{
var minSlider:Number = slider.values[0];
var maxSlider:Number = slider.values[1];
if ((num >= minSlider)&&(num <= maxSlider))
return true;
else
return false;

}

]]>
</mxcript>

<mx:ArrayCollection id=”arrColl”>
<mxource>
<mx:Array>
<mxbject label=”One” value1=”100″ value2=”100″ value3=”60″/>
<mxbject label=”Two” value1=”2″ value2=”90″ value3=”600″/>
<mxbject label=”Three” value1=”300″ value2=”40″ value3=”200″/>
<mxbject label=”Four” value1=”40″ value2=”100″ value3=”100″/>
<mxbject label=”Five” value1=”500″ value2=”200″ value3=”400″/>
<mxbject label=”Six” value1=”60″ value2=”300″ value3=”80″/>
<mxbject label=”Seven” value1=”700″ value2=”500″ value3=”30″/>
<mxbject label=”Eight” value1=”800″ value2=”50″ value3=”50″/>
<mxbject label=”Nine” value1=”90″ value2=”90″ value3=”50″/>
<mxbject label=”Ten” value1=”100″ value2=”10″ value3=”100″/>
</mx:Array>
</mxource>
</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>

<mxanel status=”{arrColl.length}/{arrColl.source.length} item(s)”>
<mxataGrid id=”dataGrid” dataProvider=”{arrColl}” verticalScrollPolicy=”on” />
</mxanel>

</mx:Application>

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tags: datagrid, filter, flex, hslider

This entry was posted on Thursday, January 22nd, 2009 at 1:53 pm and is filed under flex. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.