In the last post, we looked at simple full-text searching with the QuickFilter module. In this post, I’ll show how to use provided more advanced search capabilities with the FilterBar module, which allows for multiple rules, column-specific searching, and all or any rule matching.
Gridx Series
Gridx in XPages — Entire Series
FilterBar
The FilterBar module is simple to add and provides great search functionality. When added to the grid, it provides — wait for it — a filter bar at the top of the grid.
By default, it tells you that no filter is in effect. When you click on the button in the upper left hand corner, you are presented with the filter dialog.
The Column drop-down lets you choose to search any column or to choose a single grid column to search.
The Condition drop-down gives you several options for the filtering condition — contains, equal, starts with, ends with, etc. This provides a lot of functionality for your searches.
The Value field is where you enter the search value. If you have selected a column to search, you will get type ahead for values in that column to optionally choose from.
The plus (+) icon in the lower left gives you the ability to add more rules to the filter. In this example, I added 3 rules to match.
When I executed my search, it returned a single row and the filter bar tells me that it’s showing 1 out of 1301 rows. It also provides a link to clear the filter. (The ‘x’ icon closes the filter bar.)
The Match drop-down gives you the ability to allow the search to work on a combination of all rules or to include rows that match at least one of the rules.
If I change the Match from all rules to any rule, I get more results.
Implementing FilterBar
Adding FilterBar is very straightforward; you just need to add two more modules to the grid.
Here’s the updated require() in my example:
require([
"gridx/Grid",
"dojo/store/Memory",
"gridx/core/model/cache/Sync",
"gridx/modules/ColumnResizer",
"gridx/modules/NestedSort",
"gridx/modules/Filter",
"gridx/modules/filter/FilterBar",
"dojo/domReady!" ],
function(Grid, MemoryStore, Cache, Resizer, NestedSort, Filter, FilterBar) {
And here is the updated grid object:
grid = new Grid({
id: "my_gridX",
cacheClass: Cache,
store: store,
structure: columns,
modules: [
Resizer,
NestedSort,
Filter,
FilterBar
]
});
That’s it!
Combine with QuickFilter
You can use both QuickFilter and FilterBar together in the same grid to provide quick full-text searching and rule-based advanced filtering.
Just add both modules and the filter base (gridx/modules/Filter)!
Local Data Only
Note: This will only work simply on a local data store, so I am using an AJAX request to pull the data from a REST service locally.
If you are using a remote data store, you’ll need to filter the data server-side before sending it client-side.
Unique IDs Required
Note: If your REST service provides data from a categorized row or a totals row at the end, it can cause filtering functionality not to work properly. This is because the grid requires each row to have a unique ID (which we’ve set to use NoteID in our examples), but category rows and totals rows don’t represent documents so they do not include a NoteID.
It does not cause an obvious error but filtering doesn’t work, the page freezes and you eventually get a message asking you about stopping or debugging JavaScript.
Claro Theme Required
As mentioned in a previous post, the claro theme must be used properly for this to work well.
Without it, the filtering dialog looks like this — it’s not even distinguished from the rest of the screen:
Up Next
In next post, we’ll look at how to filter based on non-string columns, such as dates and numbers.
