By default the Dojo Data Grid control generates a standard dojo data grid (dojox.grid.DataGrid). But the enhanced grid (dojox.grid.EnhancedGrid) has some cool plugins that can further enhance the functionality. In this post, I’ll show how to get the Dojo Data Grid control to generate an enhanced grid.
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
Default – DataGrid
As you can see in the screen shot below, the Dojo Data Grid control creates a dojox.grid.DataGrid:
EnhancedGrid
In order to take advantage of the enhanced features, we need to get the control to generate an EnhancedGrid instead.
Fortunately, we can do this pretty easily.
1. Include the EnhancedGrid module
Include the dojox.grid.EnhancedGrid module on the page (Resources > Add > Dojo Module…)
2. Set the dojo type
Set the dojo type of the grid control to dojox.grid.EnhancedGrid (Properties > Dojo > Dojo type)
3. Load additional dojo style sheets
Additional style sheets are required to style the enhanced grid.
Without them, it looks like this:
Add these definitions to the this.resources tag on the page:
<xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css"> </xp:styleSheet> <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/EnhancedGrid.css"> </xp:styleSheet>
Now, it looks like this:
Verifying the Grid Type
Now, when you load the page and check it in Firebug, you can see that the grid is an EnhancedGrid.
Up Next
So far, this do much other than change the UI a little, but it opened the door for us to start loading plugins for enhanced functionality. In the next few posts, we’ll take a look at some of the EnhancedGrid plugins.
Tune in next time to see the awesome filtering capabilities that are provided by the EnhancedGrid!
