RE: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
I don't have a tested code sample to offer, but you would use the fact
that your DataGrid's dataProvider has probably been turned into an
ArrayCollection, which has a filterFunction property. You set the
filterFunction to be a reference to a method that takes a single data
item as an argument and returns true or false to indicate whether the
item should be displayed.
For example, suppose the items in your dataProvider were Address
instances and you wanted to show only the ones for a particular state
selected in a stateComboBox. Then you'd write code like
private function myFilterFunction(item:Object):Boolean
{
return Address(item).state == stateComboBox.selectedLabel;
}
and somewhere set
myDataGrid.dataProvider.filterFunction = myFilterFunction;
To get the DataGrid to refresh when you select a different state, I
think you would call myDataGrid.invalidateList() in a hanlder for the
ComboBox's change event.
Gordon Smith
Adobe Flex SDK Team
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of stinasius
Sent: Friday, August 08, 2008 12:14 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: filtering a flex datagrid using a slider with
two thumbs
hi guys i hope am not being a pain, but how can i use a combo box and
a slider (two thumbed) to fliter a datagrid? a small code sample will
do it. thanks.
Re: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
Waiting on a server-side bugfix, so enjoy. Working example:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var allProducts : Array = [
{
name: Datsun 120y,
value : 1000
},
{
name: Nissan 350Z,
value : 55000
},
{
name: Porsche GT3,
value : 325000
},
{
name: HSV Clubsport,
value : 7
},
{
name: Mercedes SLR,
value : 120
},
{
name: Lada Niva,
value : 75
},
{
name: Ford Falcon XY GTHO,
value : 375000
},
{
name: Batmobile,
value : 654321
},
{
name: Ford Falcon XA GTHO,
value : 220
}];
[Bindable]
private var filteredList : ArrayCollection = new
ArrayCollection(allProducts);
private function updateFilter() : void
{
filteredList.filterFunction = myFilterFunction;
filteredList.refresh();
}
private function myFilterFunction(item : Object) : Boolean
{
//trace(filter item + item + between + min.value +
and + max.value);
return item.value = min.value item.value = max.value;
}
]]
/mx:Script
mx:DataGrid horizontalCenter=0 verticalCenter=0 width=410
height=354 dataProvider={filteredList}
mx:columns
mx:DataGridColumn headerText=Car Name dataField=name/
mx:DataGridColumn headerText=Value dataField=value/
/mx:columns
/mx:DataGrid
mx:HSlider verticalCenter=-191 horizontalCenter=0 minimum=0
maximum=200 id=min liveDragging=true change=updateFilter()/
mx:HSlider verticalCenter=191 horizontalCenter=0 minimum=0
maximum=200 id=max liveDragging=true change=updateFilter()
value=200/
mx:Label text=Min textAlign=right width=117
horizontalCenter=-147 verticalCenter=-191/
mx:Label text=Max textAlign=right width=117
horizontalCenter=-147 verticalCenter=191/
/mx:Application
On Wed, Aug 6, 2008 at 3:57 PM, stinasius [EMAIL PROTECTED] wrote:
hi if you dont mind could you clarify on the trace statement, am not
sure i understand what you said or how to go about it. thanks
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives:
http://www.mail-archive.com/flexcoders%40yahoogroups.comYahoo! Groups
Links
--
Therefore, send not to know For whom the bell tolls. It tolls for thee.
:: Josh 'G-Funk' McDonald
:: 0437 221 380 :: [EMAIL PROTECTED]
Re: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
Don't know, I imagine the first step will be building or locating a dual-thumb slider :) On Wed, Aug 6, 2008 at 4:42 PM, stinasius [EMAIL PROTECTED] wrote: hi josh nice example but how about using one slider with two thumbs? -- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.comYahoo! Groups Links -- Therefore, send not to know For whom the bell tolls. It tolls for thee. :: Josh 'G-Funk' McDonald :: 0437 221 380 :: [EMAIL PROTECTED]
Re: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
Shows how often I use the sliders. I didn't know you could use multiple
thumbs... This is not performant, you should be getting the max and min
within updateFilter() and sticking them in private vars, not in the filter
function itself... but you get the idea.
private function myFilterFunction(item : Object) : Boolean
{
return item.value =
Math.min(priceSlider.values[0],priceSlider.values[1]) item.value =
Math.max(priceSlider.values[0],priceSlider.values[1]);
}
On Wed, Aug 6, 2008 at 5:29 PM, stinasius [EMAIL PROTECTED] wrote:
i managed to build a dual thumb slider that i pass on the filter
function. here is the code.
mx:HSlider x=0 y=240 id=priceSlider minimum=0
maximum=300 tickInterval=10 snapInterval=10
thumbCount=2 values=[0,300] tickColor=#ff
labels=[$0k,$300M] liveDragging=true width=182
change=filterGrid()/
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives:
http://www.mail-archive.com/flexcoders%40yahoogroups.comYahoo! Groups
Links
--
Therefore, send not to know For whom the bell tolls. It tolls for thee.
:: Josh 'G-Funk' McDonald
:: 0437 221 380 :: [EMAIL PROTECTED]
Re: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
Complete example with 2 thumbs (from the earlier example):
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var allProducts : Array = [
{
name: Datsun 120y,
value : 1000
},
{
name: Nissan 350Z,
value : 55000
},
{
name: Porsche GT3,
value : 325000
},
{
name: HSV Clubsport,
value : 7
},
{
name: Mercedes SLR,
value : 120
},
{
name: Lada Niva,
value : 75
},
{
name: Ford Falcon XY GTHO,
value : 375000
},
{
name: Batmobile,
value : 654321
},
{
name: Ford Falcon XA GTHO,
value : 220
}];
[Bindable]
private var filteredList : ArrayCollection = new
ArrayCollection(allProducts);
private function updateFilter() : void
{
filteredList.filterFunction = myFilterFunction;
filteredList.refresh();
}
private function myFilterFunction(item : Object) : Boolean
{
return item.value =
Math.min(priceSlider.values[0],priceSlider.values[1]) item.value =
Math.max(priceSlider.values[0],priceSlider.values[1]);
}
]]
/mx:Script
mx:DataGrid horizontalCenter=0 verticalCenter=0 width=410
height=354 dataProvider={filteredList}
mx:columns
mx:DataGridColumn headerText=Car Name dataField=name/
mx:DataGridColumn headerText=Value dataField=value/
/mx:columns
/mx:DataGrid
!--mx:HSlider verticalCenter=-191 horizontalCenter=0 minimum=0
maximum=200 id=min liveDragging=true change=updateFilter()/
mx:HSlider verticalCenter=191 horizontalCenter=0 minimum=0
maximum=200 id=max liveDragging=true change=updateFilter()
value=200/
mx:Label text=Min textAlign=right width=117
horizontalCenter=-147 verticalCenter=-191/
mx:Label text=Max textAlign=right width=117
horizontalCenter=-147 verticalCenter=191/--
mx:HSlider horizontalCenter=0 verticalCenter=-200 id=priceSlider
minimum=0
maximum=300 tickInterval=10 snapInterval=10
thumbCount=2 values=[0,300] tickColor=#ff
labels=[$0k,$300M] liveDragging=true width=182
change=updateFilter()/
/mx:Application
On Thu, Aug 7, 2008 at 2:39 AM, Tim Hoff [EMAIL PROTECTED] wrote:
And go back to your original filterFunction:
if ( (city_cb.selectedLabel == All || item.city ==
city_cb.selectedLabel) (lct_cb.selectedLabel == All ||
item.location == lct_cb.selectedLabel) (item.value
priceSlider.values[0] item.value priceSlider.values[1])
){
result=true;
}
return result;
}
priceSlider.values[300] doesn't exist. Then as Alex suggests, walk
through the code with the debugger, or trace.
-TH
--- In flexcoders@yahoogroups.com, Tim Hoff [EMAIL PROTECTED] wrote:
Yeah shoot, my bad. Take the values property out of the tag. Should
have said set the min to 0 and the max to 3,000,000 (like you have it.
The values will lock the thumbs to those two positions (values)
only.
-TH
--- In flexcoders@yahoogroups.com, Josh McDonald dznuts@ wrote:
Shows how often I use the sliders. I didn't know you could use
multiple
thumbs... This is not performant, you should be getting the max and
min
within updateFilter() and sticking them in private vars, not in the
filter
function itself... but you get the idea.
private function myFilterFunction(item : Object) : Boolean
{
return item.value =
Math.min(priceSlider.values[0],priceSlider.values[1]) item.value
=
Math.max(priceSlider.values[0],priceSlider.values[1]);
}
On Wed, Aug 6, 2008 at 5:29 PM, stinasius stinasius@ wrote:
i managed to build a dual thumb slider that i pass on the filter
function. here is the code.
mx:HSlider x=0 y=240 id=priceSlider minimum=0
maximum=300 tickInterval=10 snapInterval=10
thumbCount=2 values=[0,300] tickColor=#ff
labels=[$0k,$300M] liveDragging=true width=182
change=filterGrid()/
--
Flexcoders Mailing List
FAQ:
http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives:
http://www.mail-archive.com/flexcoders%40yahoogroups.comYahoo!
Groups
Links
Re: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
Coz it's a quick and nasty (but working) example, and I have zero knowledge
about the finer details of the slider controls :)
On Thu, Aug 7, 2008 at 9:28 AM, Tim Hoff [EMAIL PROTECTED] wrote:
Hey Josh,
What's up with:
return item.value =
Math.min(priceSlider.values[0],priceSlider.values[1])
item.value =Math.max(priceSlider.values[0],priceSlider.values[1]);
You can avoid this by setting allowThumbOverlap=false. Then just use:
return item.value = priceSlider.values[0] item.value
=priceSlider.values[1);
-TH
--- In flexcoders@yahoogroups.com, Josh McDonald [EMAIL PROTECTED] wrote:
Complete example with 2 thumbs (from the earlier example):
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var allProducts : Array = [
{
name: Datsun 120y,
value : 1000
},
{
name: Nissan 350Z,
value : 55000
},
{
name: Porsche GT3,
value : 325000
},
{
name: HSV Clubsport,
value : 7
},
{
name: Mercedes SLR,
value : 120
},
{
name: Lada Niva,
value : 75
},
{
name: Ford Falcon XY GTHO,
value : 375000
},
{
name: Batmobile,
value : 654321
},
{
name: Ford Falcon XA GTHO,
value : 220
}];
[Bindable]
private var filteredList : ArrayCollection = new
ArrayCollection(allProducts);
private function updateFilter() : void
{
filteredList.filterFunction = myFilterFunction;
filteredList.refresh();
}
private function myFilterFunction(item : Object) : Boolean
{
return item.value =
Math.min(priceSlider.values[0],priceSlider.values[1]) item.value =
Math.max(priceSlider.values[0],priceSlider.values[1]);
}
]]
/mx:Script
mx:DataGrid horizontalCenter=0 verticalCenter=0 width=410
height=354 dataProvider={filteredList}
mx:columns
mx:DataGridColumn headerText=Car Name dataField=name/
mx:DataGridColumn headerText=Value dataField=value/
/mx:columns
/mx:DataGrid
!--mx:HSlider verticalCenter=-191 horizontalCenter=0 minimum=0
maximum=200 id=min liveDragging=true change=updateFilter()/
mx:HSlider verticalCenter=191 horizontalCenter=0 minimum=0
maximum=200 id=max liveDragging=true change=updateFilter()
value=200/
mx:Label text=Min textAlign=right width=117
horizontalCenter=-147 verticalCenter=-191/
mx:Label text=Max textAlign=right width=117
horizontalCenter=-147 verticalCenter=191/--
mx:HSlider horizontalCenter=0 verticalCenter=-200 id=priceSlider
minimum=0
maximum=300 tickInterval=10 snapInterval=10
thumbCount=2 values=[0,300] tickColor=#ff
labels=[$0k,$300M] liveDragging=true width=182
change=updateFilter()/
/mx:Application
On Thu, Aug 7, 2008 at 2:39 AM, Tim Hoff [EMAIL PROTECTED] wrote:
And go back to your original filterFunction:
if ( (city_cb.selectedLabel == All || item.city ==
city_cb.selectedLabel) (lct_cb.selectedLabel == All ||
item.location == lct_cb.selectedLabel) (item.value
priceSlider.values[0] item.value priceSlider.values[1])
){
result=true;
}
return result;
}
priceSlider.values[300] doesn't exist. Then as Alex suggests, walk
through the code with the debugger, or trace.
-TH
--- In flexcoders@yahoogroups.com, Tim Hoff TimHoff@ wrote:
Yeah shoot, my bad. Take the values property out of the tag. Should
have said set the min to 0 and the max to 3,000,000 (like you have
it.
The values will lock the thumbs to those two positions (values)
only.
-TH
--- In flexcoders@yahoogroups.com, Josh McDonald dznuts@ wrote:
Shows how often I use the sliders. I didn't know you could use
multiple
thumbs... This is not performant, you should be getting the max and
min
within updateFilter() and sticking them in private vars, not in the
filter
function itself... but you get the idea.
private function myFilterFunction(item : Object) : Boolean
{
return item.value =
Math.min(priceSlider.values[0],priceSlider.values[1]) item.value
=
Math.max(priceSlider.values[0],priceSlider.values[1]);
}
On Wed, Aug 6, 2008 at 5:29 PM, stinasius stinasius@ wrote:
i managed to build a dual thumb slider that i pass on the filter
function. here is the code.
mx:HSlider x=0 y=240 id=priceSlider minimum=0
maximum=300 tickInterval=10 snapInterval=10
thumbCount=2 values=[0,300] tickColor=#ff
labels=[$0k,$300M] liveDragging=true width=182
change=filterGrid()/
--
Flexcoders Mailing List
FAQ:
http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives:
http://www.mail-archive.com/flexcoders%40yahoogroups.comYahoo!
Groups
Links
Re: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
FWIW, If I were building this for users, I'd still allow sliders to overlap for ease-of-use purposes, but I'd fetch max and min on change rather than every loop of the filter function ;-) -Josh On Thu, Aug 7, 2008 at 9:31 AM, Josh McDonald [EMAIL PROTECTED] wrote: Coz it's a quick and nasty (but working) example, and I have zero knowledge about the finer details of the slider controls :) On Thu, Aug 7, 2008 at 9:28 AM, Tim Hoff [EMAIL PROTECTED] wrote: Hey Josh, What's up with: return item.value = Math.min(priceSlider.values[0],priceSlider.values[1]) item.value =Math.max(priceSlider.values[0],priceSlider.values[1]); You can avoid this by setting allowThumbOverlap=false. Then just use: return item.value = priceSlider.values[0] item.value =priceSlider.values[1); -TH -- Therefore, send not to know For whom the bell tolls. It tolls for thee. :: Josh 'G-Funk' McDonald :: 0437 221 380 :: [EMAIL PROTECTED]
Re: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
It's probably just a personal preference. You're thinking max and min thumbs, I'm thinking between foo and bar :) I was just thinking about the use case where the user has min = 1000, max = 2000 and wants to set min=0, max=800 - without thumb overlapping, you've gotta move the min thumb first, which may momentarily annoy the user if he grabs the max thumb first and tries to set it to 800... A trivial thing, however! On Thu, Aug 7, 2008 at 9:35 AM, Tim Hoff [EMAIL PROTECTED] wrote: No worries. Actually, allowThumbOverlap=false is the default. For me, allowing thumb overlap would purly depend on the use case. My opinin is that it makes more sense to the user to not allow the right thumb to go past the left thumb and vice versa. but, IMHO. Good example. -TH -- Therefore, send not to know For whom the bell tolls. It tolls for thee. :: Josh 'G-Funk' McDonald :: 0437 221 380 :: [EMAIL PROTECTED]
RE: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
Make sure your filter function returns true for some of the data
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of stinasius
Sent: Tuesday, August 05, 2008 10:14 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: filtering a flex datagrid using a slider with
two thumbs
hi i tried just that but nothing shows up in my datagrid when i filter
it. what could be the problem? here is my update filter function
public function filterGrid():void{
dataAr.filterFunction=cityFilter;
dataAr.refresh();
//dgrid.selectedIndex = null;
}
public function cityFilter(item:Object):Boolean{
var result:Boolean=false;
if ( (city_cb.selectedLabel == All || item.city ==
city_cb.selectedLabel) (lct_cb.selectedLabel == All ||
item.location == lct_cb.selectedLabel) (item.value
priceSlider.values[0] item.value priceSlider.values[300])
){
result=true;
}
return result;
}
RE: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs
removing the filterfunction doesn't really prove anything. Whenever you call refresh() after you've assigned the filterFunction, your filterfunction should get called. If you add a trace statement, you should see it once per item in the dataprovider. From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of stinasius Sent: Tuesday, August 05, 2008 10:43 PM To: flexcoders@yahoogroups.com Subject: [flexcoders] Re: filtering a flex datagrid using a slider with two thumbs hi my filter function returns true for some of the data and in fact when i remove the slider filter statement, everything works well. another thing is that i set the onChange function of the combo boxes and the slider to filterGrid(). is that ok or am doing it the wrong way?
