Gridx in XPages – 10: Nested Sorting

In the last few posts, we looked at implementing column sorting on remote and local data stores along with additional sorting features. In this post, I’ll show how to simply implement nested column sorting.

Gridx Series

Gridx in XPages — Entire Series

The NestedSort Module

The NestedSort module is a great feature of Gridx – all you have to do is add the module to the grid an it will automatically provide the ability to dynamically sort by multiple columns!

All you have to do is add the NestedSort module to the require statement…

require([
  ...
  "gridx/modules/NestedSort",
  ...
], function(Grid, MemoryStore, Cache, Resizer, NestedSort) {

… and then add it to the grid.

grid = new Grid({
  ...
  structure: columns,
  modules: [
    Resizer,
    NestedSort
  ]
});

That’s it!

Once you sort one column and then hover over another column header, you see a 1 in the first sorted column and then you see a 2 in the next column, along with two arrows. The first one will nest this as the second-level sort. The second arrow will remove the existing sort and instead this column.

Gridx 10a - second sort options

When you have two columns sorted, you’ll see arrows indicating the direction and numbers indicating the sort priority.

Gridx 10b - nested sort

When you hover over a column that’s sorted descending, you’ll see an ‘x’ icon that allows you to clear that sort level.

Gridx 10c - nested sort clear or single sort

This is great functionality for virtually no effort!

Data Store Consideration

This works simply on a local data store (which can still be pulled from the server) — to work with a remote data store, the server would have to handle the sorting and provide the data in the proper order.

Live Demo

To test this out for yourself, check out the demo page.

Advertisements

2 responses to “Gridx in XPages – 10: Nested Sorting”

  1. Prashant says :

    Great Stuff Brad,

    Can you share your demo file as well.

    Regards,

    Prashant

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: