The Details on Demand module of Gridx allows you to expand a row and show additional related information, much like the detail facet of an XPages Data View. This gives you a lot of flexibility to add custom content related to the row, but without requiring it to be visible by default. You could display more information about the current row, look up related information to display, draw a chart, provide a form, etc. In this post, I’ll show how to add it to the grid and set up a simple example.
Gridx Series
Gridx in XPages — Entire Series
Details on Demand
The details are not displayed or loaded initially (hence the “on demand” part of the name). As you expand a row, it executes logic that you provide to create the content for the detail section.
By default, the looks virtually identical even after the Dod module is included; you can see below that the data in the first column now has a bit of a left margin.
When you hover anywhere over the row, you see the expando icon appear on the left.
If you click on the icon, it will expand the row to show the additional content.
Implementation Overview
Since custom content is involved, the Details on Demand feature requires more work that most Gridx modules. As with all modules, you need to require the proper module and add it to the grid, along with a few properties. However, you also need to provide two functions to generate the content to display when a row is expanded.
1. Require the Dod module in the grid
"gridx/modules/Dod"
2. Add the module to the grid and set properties
In this example, it’s using the object syntax to add the module to the grid, so several properties of the Dod module can be set together.
grid = new Grid(
{
id: "my_gridX",
cacheClass: Cache,
store: store,
structure: columns,
vScrollerBuffSize:10,
modules: [
Resizer,
NestedSort,
Filter,
FilterBar,
QuickFilter,
VirtualVScroller,
{
moduleClass: Dod,
defaultShow: false,
useAnimation: true,
showExpando: true,
detailProvider: myDetailProvider
}
]
});
- defaultShow is a boolean value for whether to automatically expand each row
- useAnimation is a boolean value for whether to use a sliding animation when the row is expanded and collapsed
- showExpando is a boolean value for whether to show the expand/collapse icon in the first cell of the row (you could leave it out and expand/collapse rows programmatically)
3. Set up the content provider
The detail provider function is called from the detailProvider attribute of the Dod module when added to the grid.
It receives handles to the grid and the detail node to populate, along with the ID of the row that was expanded. (This can be used to get other data from the same row in the store.)
The function calls another function that you will use to actually put content into the detail node.
function myDetailProvider (grid, rowId, detailNode, rendered) {
getDetailContent(rowId, detailNode);
rendered.callback();
return rendered;
}
It uses a Deferred object to display the detail row when the content-providing function is ready.
4. Add Function to Provide Detail Content
In this example, I’ve passed the rowId and detailNode to the function to provide content. (The detailNode is required — anything else is optional.)
This example simply displays a div with the row ID and some text (as shown in the screen shot above).
Since it is provided a handle to the detail node, it populates it via the innerHTML property of the node.
function getDetailContent(rowId, detailNode){
detailNode.innerHTML = '<div style="margin:20px;">Row ' + rowId + ' detail here</div>';
}
Modify this function however you need to in order to build the content that you need.
