Gridx in XPages – 8: Column Sorting with a Local Data Store

In the last post, I showed how to implement column sorting in a Gridx grid with using a remote data store (JsonRest). In this post, I’ll show how to use AJAX to pull all the data locally for faster (and simpler) sorting.

Gridx Series

Gridx in XPages — Entire Series

SingleSort

The SingleSort module provides the ability to click on column headers and sort the data. The first click on a column header sorts the data ascending and the second click sorts descending.

When the data is stored locally, all you have to do is add the SingleSort module to the grid and it will handle the sorting automatically. (As opposed to the remote storage where the REST service has to provide the data in sorted order and the underlying view has to support the sort order.)

Making Remote Data Local

Of course, the grid wouldn’t be very useful if we could only display data that was available locally. But storing the data locally makes manipulation (such as sorting) much faster, so it’s worth investigating whether that’s a better fit for your application.

Do get remote data locally, we can use a Dojo AJAX request (xhr.get()) to retrieve data from the REST service. After the data has been retrieved, we can use the load() method to set up our local data store and initialize the grid.

Working Example

Here is the entire source of an XPage that performs a remote lookup via AJAX and implements column sorting.

Line 4 loads the common gridx resources as described in this post.

Line 6 defines where the grid will be placed.

Lines 9-16 include the required modules for the data store and the grid. Note that the data store and the cache module are different when using local storage than remote storage (via JsonRest). Local storage uses a Dojo Memory store and syncrhonous cache, while remote storage uses a JsonRest store an an asynchronous cache.

Lines 25-27 make the AJAX call to the REST service to retrieve the data.

Line 28 defines the load method, which will run after the data has been retrieved. (The rest of the code needs to wait until the data is available.)

Lines 31-34 set up the local Memory store for the data. It uses the data retrieved from the REST service and sets the idProperty attribute to define the column storing a unique ID for each row.

Lines 36-45 initialize the grid. This code is exactly the same as the previous example.

Lines 51-53 define the error handler for the AJAX call. If something went wrong with retrieving the data, then this method would run. It should be used to display an error message.

<?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",
  "dojo/store/Memory",
  "gridx/core/model/cache/Sync",
  "gridx/modules/ColumnResizer",
  "gridx/modules/SingleSort",
  "dojo/domReady!"
], function(Grid, MemoryStore, Cache, Resizer, SingleSort) {

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

  // Make an AJAX call to look up the full data set and store it locally for fast access
  dojo.xhr.get({
    url:"X_REST.xsp/gridData_LocalStore",
    handleAs:"json",
    load: function(restData){
    
      // Load the data into a local memory store
      var store = new MemoryStore({
        data: restData,
        idProperty: '@noteid'
      });
    
      grid = new Grid({
        id: "my_gridX",
        cacheClass: Cache,
        store: store,
        structure: columns,
        modules: [
        	Resizer,
        	SingleSort
        ]
      });

      //Put it into the DOM tree.
      grid.placeAt('gridX_Here');
      grid.startup();
    },
    error: function(msg, args) {
      console.error('Error loading grid data');
    }
  });
});
</script>
</xp:view>

Live Demo

If you’d like to see this in action, I added a new section to my demo database.

There is a page with column sorting with a remote data source and a page with column sorting on a local data source. Both examples work with 1000 rows of data.

I’ll add more to the demo database as I write about additional grid features.