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.
When you have two columns sorted, you’ll see arrows indicating the direction and numbers indicating the sort priority.
When you hover over a column that’s sorted descending, you’ll see an ‘x’ icon that allows you to clear that sort level.
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.
