Gridx in XPages – 6: Adding a Feature Module (Column Resizing)

In the last few posts, we’ve looked at how to modularize Gridx resources for easy reuse and generate a grid with live data from a REST service. In this post, we’ll see how to load modules for additional features in gridx, starting with the ability to resize columns.

Gridx Series

Gridx in XPages — Entire Series

Modular Design

Gridx was built from the ground up with a modular design. Core modules such as the grid header and body are always automatically loaded. Additional features are similar to Dojo EnhancedGrid plugins in that they are loaded only when specified.

This allows the grid to minimize its footprint by only loading the required resources.

To add a module, include it in the require() statement and add it to the grid object’s module attribute.Let’s take a look with a simple example…

ColumnResizer

The column definitions define a default column size, but the ColumnResizer module allows grid column widths to be re-sized by the user.

When you hover the mouse pointer over a column header border, it will change to an arrow pointing left and right and you can click and drag to re-size.

If you look on the Net/Network tab of your browser’s developer tools, you’ll see that the page now also loads ColumnResizer.js in order to enable this feature.

Example Code

Here’s a working example, building on the example in the last post:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">

<xc:ccGridxResources></xc:ccGridxResources>

<div id="gridX_Here" style="height:300px; width:300px;"></div>

<script>
  require([
    "gridx/Grid",
    "gridx/modules/ColumnResizer",
    "dojo/store/JsonRest",
    "gridx/core/model/cache/Async",
    "dojo/domReady!"
  ], function(Grid, Resizer, JsonRest, Cache) {

    var store = new JsonRest({
      idProperty: '@noteid',
      target: "X_REST.xsp/gridData"
    });

    var columns = [
      {id: 'first', field: 'firstname', name: 'First', width:	'70px'},
      {id: 'last', field: 'lastname', name: 'Last'},
      {id: 'state',field: 'state', name: 'State', width: '40px'}
    ];

    grid = new Grid({
      id:	"my_gridX",
      cacheClass: Cache,
      store: store,
      structure: columns,
      modules: [
      	Resizer
      ]
    });

    //Put it into the DOM tree.
    grid.placeAt('gridX_Here');
    grid.startup();

  });
</script>
</xp:view>

Line 11 shows the module being included in the code.

Line 15 shows that I’m making the module available as Resizer.

Lines 33-35 show the modules attribute being added to the grid with the ColumnResizer module being added (via the name I gave it in line 15, Resizer).

As we add more modules to the grid, they will be added as additional entries in the modules array, so this demonstrates the general structure for adding features.