Gridx in XPages – 16: Advanced Searching with the FilterBar Module

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


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.

Gridx 16 A

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.

Gridx 16 B

The Column drop-down lets you choose to search any column or to choose a single grid column to search.

Gridx 16 C

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.

Gridx 16 D

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.

Gridx 16 D2

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.

Gridx 16 E

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.)

Gridx 16 F

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.

Gridx 16 G

If I change the Match from all rules to any rule, I get more results.

Gridx 16 H

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:

  "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: [ 

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:

Gridx 16 I

Up Next

In next post, we’ll look at how to filter based on non-string columns, such as dates and numbers.


6 responses to “Gridx in XPages – 16: Advanced Searching with the FilterBar Module”

  1. D80, Julio César Becerra Bañuelos says :

    Hello, good day, I have a system in which we use enhancedgrid, and we have some problems with slow when load thousands of records (10,000 or 100,000).

    I wonder if they have had at some point this problem, and if they have any solution

    > El 10/12/2014, a las 1:02, Xcellerant escribió: > >

    • Brad Balassaitis says :

      I would strongly recommend that you not try to load anywhere near that amount of data, because users generally do not intend to scroll or page through that much data in a browser app. It would be much better to set a lower limit for the initial load and filter the data server-side before getting it to the client-side.

  2. Ali says :

    Hi Brad,
    is there any way that I can place a drop down filter in the column header (Excel like filter) where each filter will have its own distinct values that will filter the results based on the user selection?

    • Brad Balassaitis says :

      I’m not aware of a built-in feature for that (although I know that Sencha Ext JS grid has it). You can build a column header menu on your own (h, but you’d then need to get the selected value and filter the data.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: