203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
Latest 7 Posts
XPages Tip: Adding a Bootstrap Class to All Labels via the Theme (Redux)
Wed, Jul 20th 2016 5
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 8
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 4
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 5
Browser Session Lifespan – Idle Session Timeout vs LTPA Token Expiration
Tue, May 24th 2016 4
XPages Tip: Passing an Array to a Custom Control Property
Tue, Apr 12th 2016 4
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 4
Top 10
Implementing Font Awesome 4.0.3 in XPages
Mon, Apr 7th 2014 10
Dojo in XPages – 23: Using a Lightbox to Display Image Attachments
Thu, May 15th 2014 10
Set Focus on a Field when Showing a Bootstrap 3 Modal
Wed, Aug 6th 2014 10
Client-Side JavaScript Debugging Tip — Using XSP.dumpObject() and XSP.log()
Wed, Oct 1st 2014 10
Dojo in XPages – 8: Processing Each Element in a NodeList with forEach()
Thu, Feb 27th 2014 9
Adding Event Handlers to Font Awesome Icons in XPages
Wed, Apr 9th 2014 9
Computing Custom Date Format Patterns Throughout an Application
Mon, Aug 18th 2014 9
Gridx in XPages – 18: Formatting Date and Currency Columns
Thu, Dec 18th 2014 9
Order of execution for client-side JavaScript event handlers and callbacks
Mon, Jun 16th 2014 8
XPages Tip: Filtering a View Data Source with URL Parameters
Mon, Jul 7th 2014 8

Gridx in XPages – 15: Adding QuickFilter for Full-Text Searching
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Brad Balassaitis    

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

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:

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

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.

Dec 09, 2014
5 hits

Recent Blog Posts

Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition