Dojo Data Grid – Part 14: Enhanced Filtering with No Coding!

Dojo EnhancedGrid plugins take the functionality of the grid to a whole new level. In this post, we’ll look at the tremendous Filter plugin, which allows users to create multiple filtering rules with many matching options — all with no coding whatsoever!

Dojo Data Grid Series

Start with a Dojo EnhancedGrid

Before you can use an EnhancedGrid plugin, you need to be set up the Dojo Data Grid control to render as a Dojo EnhancedGrid. Follow the steps in this post to get ready.

1. Load the Filter Plugin

The dojox.grid.enhanced.plugins.Filter module must be included on the page, so add it to the page resources. Properties > Resources > Add > Dojo Module…
Dojo_14_1_AddFilterModules

2. Add the Plugin to the Grid

The first step made the plugin module available, but you also need to add it to the grid.

Go to the properties of the Dojo Data Grid > Dojo and click the Add button. Add the property as shown here:
Dojo_14_2_AddPluginProperty

3. Add a style sheet

In addition to the style sheets listed in the previous post, you need an additional style sheet for the filter bar and filtering dialog to format properly.

Add this style sheet to the page resources as well:

/.ibmxspres/dojoroot/dojox/grid/enhanced/resources/claro/EnhancedGrid.css

All together, the resources of the page should look like this:

<xp:this.resources>
  <xp:dojoModule name="dojox.grid.EnhancedGrid"></xp:dojoModule>
  <xp:dojoModule name="dojox.grid.enhanced.plugins.Filter"></xp:dojoModule>
	
  <xp:styleSheet
    href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css">
  </xp:styleSheet>
  <xp:styleSheet
    href="/.ibmxspres/dojoroot/dojox/grid/resources/EnhancedGrid.css">
  </xp:styleSheet>
  <xp:styleSheet
    href="/.ibmxspres/dojoroot/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
  </xp:styleSheet>
</xp:this.resources>

Filtering Enabled

When you load the grid, you will now see the filter bar appearing directly below the column headers.
Dojo_14_3_FilterBar

Filtering the Grid

To filter the data, click on the icon on the left of the filter bar in order to pop up the filtering dialog.
Dojo_14_5_FilterDialog

FWIW – This is what it looks like without that extra style sheet:
Dojo_14_4_FilterPopup_NoStyleSheets

Filter Rules

You can set the filtering to match all or any of the specified rules.

For each rule, you select a column and condition and enter a value.

The Column options are ‘Any Column’ or any specific column in the grid. (You can add properties to grid columns to prevent them from being filterable.)

The Condition option determines how it searches the column. It defaults to ‘contains’, but has many other options for matching the data.
Dojo_14_6_FilterConditions

Multiple Rules

You can add up to 3 filtering rules. The dialog provides a nice accordion interface to modifying the rules.
Dojo_14_7_MultipleRules

Results

When you click the button to execute the filter, the grid is updated with the results. It gives you a count of items and the total that were searched. It also provides a link to clear the filter and display the full data set.
Dojo_14_8_FilterResults

Bonus — It’s Sortable!

You can even sort the filtered results.

I am thoroughly impressed that this works so well with so little effort. Keep an eye on performance, though, because it has to hit the server to filter the data.

REST Service Type – Important

The filtering seems to work well when the grid is bound to a viewItemFileService rest service. It does not work with a viewJsonService service.

More Information

For more information about the Filtering plugin, check out the documentation.

Advertisements

23 responses to “Dojo Data Grid – Part 14: Enhanced Filtering with No Coding!”

  1. Alan Hurt says :

    Not that you could utilize this at the moment, but if you want to see how the Enhanced grid has evolved, you can check here: https://github.com/oria/gridx

    Dojo is starting to go the route of using git to manage plugins rather than a DojoX library

  2. Eric McCormick (@edm00se) says :

    Excellent write up, as usual Brad. Thanks!

  3. James Bard says :

    Part 15 – Exporting from the Enhanced Grid ???

    • Brad Balassaitis says :

      Part 15 is a different plugin. I’m still debating whether to dig into the exporting.

      • James Bard says :

        Personally, I would appreciate it. I know my users would love this feature. I have found a lot of help about xpages, and a lot of help about dojo, but not a lot of information on getting dojo pieces to work in xpages. I tried to follow Paul Calhoun’s examples from NotesIn9 Episode 92, and was mostly successful, but still fell short. I much prefer your method for its simplicity and xpage style. I easily added the smaller plugins (drag-n-drop, nested sorting, etc) in the same way as the filter, but I’m still having issues with the exporting. I met David Leedy at Developer2013 yesterday, and he said your series here is the go to place, so I thought I would throw my two cents in here.

      • Brad Balassaitis says :

        Just got it figured out, so it’ll be part 16 of the series. 🙂

  4. Arpit Bothra says :

    Thanks Brad, I am new to DOJO. Given code is working fine. However I am looking for simple filter to apply on table , similar to excel. Can you help me out here?

  5. Gary J. Morin says :

    Thanks so much for the work you’ve done on this series. Fantastic stuff!

  6. Roman says :

    Again bug.. after filtering cannot exit from edit mode 😦
    Same bug as in infinite scrolling

  7. Boris Shuster says :

    Hello! Thank you very much for your blog! But enhanced grid with filter brilliantly works in IE10, FF, but doesnt work in Chrome/Opera. Neither my code, nor DojoDataGrids.nsf/Grid_09_EnhancedGrid_Filter.xsp. I am too sad :-).

    • Brad Balassaitis says :

      I’ll try to look into this soon and let you know what I find.

      • Boris Shuster says :

        Hello, Brad! Thanks for trying to help! It doesnt work in 8.5.3 environment. I downloaded version 1.9.3 and has copied ibm folder from 1.5.1 (sorry, I dont know how get new version “domino” dojo, apart from Domino 9 installation).I am afraid that this barbaric method 🙂

    • Brad Balassaitis says :

      I’ve done some searching and it looks like Chrome as of version 29 causes dojo.query to return unexpected results. I’ve seen reports of it from Dojo 1.4x through 1.6.1, but I don’t know if it goes beyond that. Domino 8.5.3 uses Dojo 1.6.1, so that’s why it’s not working in Chrome.

      My test database works on a Notes 9 server. If you have to use it on 8.5.3, you may need to put a different Dojo version on the server and have the database use it.

      See this post by Paul Withers for a little bit more information: http://www.intec.co.uk/domino-8-5-3-greater-power-over-dojo-thanks-ibm-for-your-work/

      • edm00se says :

        Brad, as my work is still working on transitioning to Domino 9, I’ve been working in an 8.5.3FP5UP1 world. Following the instructions from the Dojo 1.6.2 fix, I was able to update the dojo.js file from an extracted copy of the 1.6.1 source, then minify and gzip it back accordingly. I just needed to set the Dojo version in my xsp.properties accordingly (to the namespace I used).

        I’ve confirmed this has taken my Dojo Enhanced Grid with filter plugin from non-functional (error thrown in Chrome >=29 was in relation to an undefined function) to 100%. This was already working in IE and FF, but I can confirm I know have Chrome, IE, and FF all working in 8.5.3 with the filter plugin.

        https://github.com/dojo/dojo/commit/fc262d0d589c490cdd671791f1546a4665ed69c6#commitcomment-3954783

      • Brad Balassaitis says :

        Very nice! Thanks for posting this.

  8. Lars Merrald says :

    Hello Brad,
    Thanks for this series of very usefull tips. It has been a huge help for me trying to learn xpages. Regarding the EnhancedGrid filtering I had an issue with disabled screen after hitting the filter button. I found that the issue disappeared after changing the application theme from “Bootstrap 3.2.0”. I guess I have to dig into themes and stylesheets.

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: