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
- Part 1: Concepts and Default Features
- Part 2: Creating a REST Service
- Part 3: Creating Your First Grid
- Part 4: Additional Grid Features
- Part 5: Grid Column Features
- Part 6: Reordering Columns
- Part 7: Sorting
- Part 8: Opening Documents
- Part 9: Multi-Row Entries
- Part 10: Full-Text Searching and Field-Specific Filtering
- Part 11: Editable Columns
- Part 12: Highlighting Edited Rows
- Part 13: Create a Dojo EnhancedGrid
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…
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:
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.
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.
FWIW – This is what it looks like without that extra style sheet:
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.
Multiple Rules
You can add up to 3 filtering rules. The dialog provides a nice accordion interface to modifying the rules.
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.
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.
