Gridx in XPages – 15: Adding QuickFilter for Full-Text Searching

The QuickFilter module provides simple full-text search functionality to a grid. In this post, I’ll show how to use it and how it works.

Gridx Series

Gridx in XPages — Entire Series

QuickFilter

The QuickFilter module adds a text box and icon to the top right area of the grid.

Gridx 15 A

Once you type a value to search for in the box, it will automatically filter the data. (It appears to start after you pause typing.) You can also trigger the search by clicking on the filter icon to the right.

In this example, I typed ‘pa’ into the box. It filtered the list to people who live in Pennsylvania or have a first or last name that includes ‘pa’.

Gridx 15 B

Once a search has been executed, you can click the ‘x’ icon in the right side of the search box to clear the results. If you change the search string, it will execute a new search over the entire data store; it does not search the filtered results.

It does not seem to support anything other than simple text searching (i.e. no wildcards or logical operators to combine search terms).

Sorting Search Results

If you have a sorting module in the grid (such as NestedSort, in my example), you can sort the filtered results.

Gridx 15 C

Implementing QuickFilter

Adding QuickFilter 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/QuickFilter",
  "dojo/domReady!" ], 
  function(Grid, MemoryStore, Cache, Resizer, NestedSort, Filter, QuickFilter) {

And here is the updated grid object:

grid = new Grid({ 
  id: "my_gridX", 
  cacheClass: Cache, 
  store: store, 
  structure: columns, 
  modules: [ 
    Resizer, 
    NestedSort,
    Filter,
    QuickFilter
  ] 
});

That’s it!

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.

Up Next

In the next post, we’ll look at the FilterBar module, which provides much more advanced searching functionality.

Advertisements

4 responses to “Gridx in XPages – 15: Adding QuickFilter for Full-Text Searching”

  1. Jason Baird says :

    Thanks for this series, I am struggling with something though and cannot seem to find the answer anywhere. I have a working grid and the ability to filter, what I need to do is get a handle on the results after the filter to chart. Is there a way? Have you done this?

    • Brad Balassaitis says :

      I have not done that specifically, but I would definitely try the Export module, as shown in this post: https://xcellerant.net/gridx-in-xpages-27-exporting-to-excel/ (it looks like the quotes and angle braces were messed up in the code, but I’ll fix it later).

      The export module doesn’t really do the whole export — what it does is provide you the data into a single variable so that you can do what you want with it.

      In your case, you could get that data and then parse it as needed to get your updated chart data. If the grid is filtered, it will only export the rows that are filtered, so I would expect that this would work.

  2. Ndiritu N says :

    Thanks for this very helpful resource.

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

%d bloggers like this: