Gridx in XPages – 29: Programmatic API for Details on Demand

In the last post, I showed how to add an expandible detail section to each row via Gridx’ Details on Demand feature. In this post, I’ll show how use the provided methods to programmatically expand and collapse the details, as well as how to attach event handlers to run after a detail section is opened or closed.

Gridx Series

Gridx in XPages — Entire Series

Methods

In the last post, I mentioned that there’s a showExpando property of the dod module that can be used to prevent the expand/collapse icon from being displayed. If you’d rather use your own button to expand/collapse the detail row, you can set up your own column with HTML content (button, icon, etc) to do the job programmatically with the built-in methods.

You can run the built-in methods via the dod object or via the grid row, which gets an extended API after loading the dod module.

For each of the methods below, there are 4 different statements that all have the same effect. Two that run the method via the dod module and two that run it via the extended row API. In each case, there’s an example of getting a handle to the row by index (0-based) or by the row ID (which, in my case, is the NoteID of a document in my sample grid). Note that the row API method names are slightly different.

show() – Display the detail section for a row

• grid.dod.show(grid.row(0));
• grid.dod.show(grid.row(‘FCE’));
• grid.row(0).showDetail();
• grid.row(‘FCE’).showDetail();

hide() – Hide the detail section for a row

• grid.dod.hide(grid.row(0));
• grid.dod.hide(grid.row(‘FCE’));
• grid.row(0).hideDetail();
• grid.row(‘FCE’).hideDetail();

toggle() – Toggle the detail section for a row

• grid.dod.toggle(grid.row(0));
• grid.dod.toggle(grid.row(‘FCE’));
• grid.row(‘FCE’).toggleDetail();
• grid.row(0).toggleDetail();

isShown() – Check whether a detail section for a row is displayed

• grid.dod.isShown(grid.row(0));
• grid.dod.isShown(grid.row(‘FCE’));
• grid.row(0).isDetailShown();
• grid.row(‘FCE’).isDetailShown();

Events

In addition to the method to trigger or check the row state, there are two events that allow you to run logic after a detail section is shown or hidden: onShow and onHide.

Here are two simple functions that display a message in the console on the onShow and onHide events, respectively:

function dodShowCallback(){
  console.log('Show Details');
}
	
function dodHideCallback() {
  console.log('Hide Details');
}

They can be added via the onShow and onHide module properties in the grid definition (lines 21 and 22 below):

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,
      onShow: dodShowCallback,
      onHide: dodHideCallback
    }
  ]
});