Adding a filterer to FilteringTable widget
Posted June 20th, 2007 by mailarchive
Hello,
I'm wondering if there are any examples available of adding filterers
to the FilteringTable widget. I'd like to be able to show/hide rows on
based on input received via text box.
Thanks,
MJH
Dojo Forum
Comments
Right now, there aren't. But that's a relatively new piece of functionality,
and I need to add that as a part of the test suite at some point.
But here's the basics of it: a filter function return a boolean value, true
if it satisfies your condition, and false if it doesn't. A custom filtering
function should take an HTML Row as the argument, which you can inspect in
any way you see fit.
When you've written your filtering function, there are several ways of
adding it to the widget:
1. in the column in question, like so:
my field
Note that this is a reference (i.e. no parenthesis).
2. using [widget].setFilter:
dojo.widget.byId("myTable").setFilter("myField", myFilterFunction);
And to perform the filtering:
dojo.widget.byId("myTable").applyFilters();
This is all pretty new and it might change based on usage (so feedback is
encouraged), but I think the API is pretty stable now.
trt
Malaney J. Hill wrote:
--
View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf21102...
Sent from the Dojo forum at Nabble.com.
Wow, the filtering table is amazing!! I was able to cobble together a
filter without much
problem. I basically tied the "applyFilters" call to the onkeyup of a
textbox and specified a filter as you indicated. (Autocomplete="off"
helps big time). Here's my filter code, though know it is definitely
not optimized and doesn't deal with numeric values .... yet:
===============
function inspectRow(rowObj)
{
if (!rowObj) return true;
var filtText = document.myFilter.namefilter.value.toLowerCase();
if (filtText)
{
var rObj = rowObj.toLowerCase();
if (rObj.indexOf(filtText) >= 0)
{
return true;
}
else
{
return false;
}
}
else
{
return true;
}
}
After getting this working, I wanted to try to filter more than one
row at a time. It was at this point that I realized I had to call a
seperate function to do this. It would be really nice to be able to
send parameters to the filter function. This way I don't have to
specify the filter input within the function itself. Could there
possibly already be a way to pass parameters to the filter call?
Another minor detail is that you said that my filter would receive an
HTML Row as input when in fact it receives the data contained in the
column (i.e. Adam, David, etc ...). This is actually much easier to
parse than a row so I vote you keep it as is.
Other than that, FilteringTable is definitely a marvelous piece of code.
Bravo,
Malaney
On 8/15/06, Tom Trenka wrote:
Whoops, my apologies. It actually passes your filter function the value of
the field for that particular column; I need to change the docs for that,
thank you for the catch.
You can optimize that function a little like so:
function inspectRow(val){
if (!val) return true;
var filtText = document.myFilter.namefilter.value.toLowerCase();
if (filtText) {
return (val.toLowerCase().indexOf(filtText) >= 0);
}
return true;
}
trt
Malaney J. Hill wrote:
--
View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf21102...
Sent from the Dojo forum at Nabble.com.
Thanks for the optimization, works like a charm! However, I do wish
there was a way that I could pass the namefilter.value in as a parameter.
Also, it probably helps to be realistic about the amount of data that the
browser can hold. I tested this puppy out with 250+ rows, each containing
4 columns of string data (longest was 50 chars) and I started getting the
"Unresponsive script" warning in Mozilla. This was loading the data in via
HTML, not sure if loading via JSON will improve things.
MJH
On 8/17/06, Tom Trenka wrote:
There's some ongoing work with namespaces that is happening right now that
has been known to cause the unresponsive script error that you're seeing;
hopefully that will be ironed out soon so that it's not quite an issue.
It also depends on how much widget you're trying to do in the window; the
more widgets you have, the slower the load process--and it's being worked
on.
That widget *should* be able to handle 250 rows though. I haven't tested
more than 200 but it was pretty spiffy when I did. I suppose we should try
a bulk test...I think I'll try it now.
trt
Malaney J. Hill wrote:
--
View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf21102...
Sent from the Dojo forum at Nabble.com.
There's some ongoing work with namespaces that is happening right now that
has been known to cause the unresponsive script error that you're seeing;
hopefully that will be ironed out soon so that it's not quite an issue.
It also depends on how much widget you're trying to do in the window; the
more widgets you have, the slower the load process--and it's being worked
on.
That widget *should* be able to handle 250 rows though. I haven't tested
more than 200 but it was pretty spiffy when I did. I suppose we should try
a bulk test...I think I'll try it now.
trt
Malaney J. Hill wrote:
--
View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf21102...
Sent from the Dojo forum at Nabble.com.
Sorry about the double post before, something was weird with Nabble.
So preliminary testing is telling me that a FilteringTable with 400+ rows is
pretty slow to render, which I'm not surprised about. However, I can
populate the SimpleStore behind it with 10,000 complex JSON objects very
quickly (on my MacBook Pro, the 2.0GHz with 2GB RAM, FF 1.5+, it takes all
of 73ms to fill the store; on Safari, it's about 440ms. I'd say that's more
than acceptable performance :).
So I'm thinking about adding the ability to page the table as well. If I
do, it will be an optional flag, and you'll be able to specify the size of
each page (probably I'll go with a default of 50), and I'll have to come up
with a mechanism for doing the paging. I *don't* want to pull the infinite
scrollbar trick for this widget for 0.4, but maybe we'll see what happens.
Given that I'm not providing a UI for the filtering, perhaps I won't provide
a UI for the paging either, and we can let others do some customization
things that we can incorporate later.
We'll see what happens. I won't be getting to the paging for at least a
week and a half though, so don't expect anything too soon (other things on
my plate, top one being the Chart).
trt
Malaney J. Hill wrote:
--
View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf21102...
Sent from the Dojo forum at Nabble.com.
I have a couple of comments regarding your email below as well as what
I believe to be a bug to report.
Number 1, I think the idea of a Filtering Table should be to provide a solution
to dealing with large amounts of data. If you add paging to the table
it kinda defeats
the purpose because now you are no longer filtering all of the
results, merely the
ones that are shown on the page. At any rate, I think paging should
be left to the
server side language. Easy enough to do. I would focus on the
functionality that
the Filtering Table adds to web development... Filtering.
Secondly, I too have had better performance utilizing the JSON method
of populating
the table as opposed to the inline HTML table replacement.method.
However, I have
not been able to successfully set or apply filters to a JSON populated
table. Using the example from
http://archive.dojotoolkit.org/nightly/tests/widget/test_FilteringTable_...
I am unable to call a setFilter action within the dojo.addOnload
function. Its seems that
when a widget is created on the fly only the first row is ever sent to
the filter for filtering.
To test this I added the following code to line 519 of
src/widget/FilteringTable.js which is the applyFilters function.
(Note: my version may be about a week old).
var row=rows[i];
// this is my debug line
alert('row='+i+' '+ this.store.getField( this.getDataByRow(row),
this.columns[1].getField() ) );
for(var j=0; j wrote:
I'll look into it; I've a feeling the issue has to do with the dynamic
building, and I have not tested this case yet (Dustin Machi is using it
pretty heavily in this fashion right now, so I've been relying a little on
him for bug reports). If you want to file a bug on it, go to
http://trac.dojotoolkit.org, log in (guest/guest, iirc), and file a bug to
me (ttrenka).
As far as paging goes...I'm not sure you're understanding where I'd be going
with it (which is ok). I would be building it so that the full dataset is
stored within the internal SimpleStore (which performs very well, it looks
like), and then giving the option of turning paging on, with how many rows
you want to show at once. This way the browser isn't forced to try to
render thousands of rows at a shot, which is the main performance
bottleneck.
Filtering and sorting would still operate on the entire dataset (in theory);
a sort would force the table to start at page 1 again though, while that
behavior wouldn't necessarily be the same with a filter.
Either way, I'm not sure that feature will make it into a 0.4 release as it
is; if it does, it will not affect the current API signature of the widget.
trt
Malaney J. Hill wrote:
--
View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf21102...
Sent from the Dojo forum at Nabble.com.
Thanks Tom,
I'll definitely report the bug and I hear you on the paging. Its probably
not a bad feature to have so long as it is optional. I do, however, feel
that its critical that both filtering and sorting operate on the
entire data set.
End users get confused otherwise.
As far as the 0.4 release is concerned I'm not too big on the paging,
but I would
love to see the JSON-based filtering worked out and if there is any
way that I can
help in that effort I would be more than happy to. Looking at the
code, I seem to have
eliminated the SimpleStore as a culprit, it must be the dynamic building.
MJH
On 8/21/06, Tom Trenka wrote:
Yeah, I'm a very big proponent of "optional", but either way the sort and
filter would have to operate on the entire set and not just what you are
seeing, so I wouldn't worry about that.
JSON filtering is a definite must have though, so I'll fix that as soon as
I'm able.
trt
Malaney J. Hill wrote:
--
View this message in context: http://www.nabble.com/Adding-a-filterer-to-FilteringTable-widget-tf21102...
Sent from the Dojo forum at Nabble.com.