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.

Advertisements

12 responses to “Gridx in XPages – 8: Column Sorting with a Local Data Store”

  1. srieger says :

    Anyway to get the .nsf?

  2. Mike Davis says :

    This is excellent information and some very cool concepts.

    I got the code to work, but my view contains several hundred documents – however, the local store concept only returned the first 10.

    I did some looking for a ‘count’ parameter as part of all this – and on the REST Service, I did see a count property. There was no value, so I put 50 in there and rebuilt. Sure enough, the grid showed 50 rows.

    My question – how do I get ALL the rows to display?

    Thanks!
    Mike Davis

    • Brad Balassaitis says :

      I generally just sent the count to 10000 (or some other number sufficiently larger than the amount of data I expect). I’m not aware of a way to get the built-in REST services to check the amount of data and just include it all.

  3. vincentdemare says :

    Il have a little problem with the column Sorting
    After I click on the column header, the data are sorted but I haven’t the icon on header column.
    I have this message in the console :
    GET http://srv/database.nsf/xsp/.ibmmodres/images/sprite.png 404 (Not Found).
    Any idea ?

  4. Graeme Gilbertson says :

    Thanks Vincent – will give it a try

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: