aodz

Filter datagrid using a hslider

Posted on: January 22, 2009


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:

testfilterdg

For source please read the complete article

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
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>

Advertisements

2 Responses to "Filter datagrid using a hslider"

Hi,

I am working on open source, reusable extension of Flex 3 DataGrid to enable client-side filtering and searching. My solution includes filters using multiple CheckBoxes, TextInput, Slider and more…
You can find it at
http://www.iwobanas.com/2009/06/datagrid-with-client-side-filtering-and-searching/

I am looking forward any comments and suggestions from you!

Cheers,
Iwo Banaś

Please take a look at http://www.flexdatagrid.com or http://www.flexicious.com.
This component takes care of all different filtering options and has an extensible model for you to create your own!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

I have moved to a different location

check out my new home Flexout

calendar

January 2009
M T W T F S S
« Dec   Feb »
 1234
567891011
12131415161718
19202122232425
262728293031  

Blog Stat

  • 83,703 Hop's so far!!!

follow me

Archives

Linkedin Blogger Twitter Youtube Orkut

Top Clicks

  • None

latest flickr photos

top rated

%d bloggers like this: