Dojo Data Grid – Part 13: Create a Dojo EnhancedGrid

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

Default – DataGrid

As you can see in the screen shot below, the Dojo Data Grid control creates a dojox.grid.DataGrid:

Dojo_13_1_DefaultGridType

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…)
Dojo_13_3_EnhancedGrid_Resource

2. Set the dojo type

Set the dojo type of the grid control to dojox.grid.EnhancedGrid (Properties > Dojo > Dojo type)
Dojo_13_3_DojoType

3. Load additional dojo style sheets

Additional style sheets are required to style the enhanced grid.

Without them, it looks like this:

Dojo_13_4_EnhancedGrid_NoStyleSheets

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/enhanced/resources/claroEnhancedGrid.css">
</xp:styleSheet>

Now, it looks like this:
Dojo_13_5_EnhancedGrid_WithStyleSheets

Verifying the Grid Type

Now, when you load the page and check it in Firebug, you can see that the grid is an EnhancedGrid.

Dojo_13_7_EnhancedGridType

Up Next

So far, this did not 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!

Advertisements

3 responses to “Dojo Data Grid – Part 13: Create a Dojo EnhancedGrid”

  1. Alan Hurt says :

    Curious, do they still actually require that Grid.css be loaded? Outside of XPages, I can load up an Enhanced grid just fine using only the enhancedgrid.css. Although, I was using the claro therme, so maybe the Tundra theme requires it?

    • Brad Balassaitis says :

      If I take out grid.css, the formatting is very different (almost unusable). Grid.css is automatically loaded when using the Dojo Data Grid control by default. It appears that changes when I change the dojo type of the grid.

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: