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
- 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
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.
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:
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 the Grid
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.)
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.
For more information about the Filtering plugin, check out the documentation.