Gridx in XPages – 28: Expandable Details on Demand

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.

Gridx 28A

If you click on the icon, it will expand the row to show the additional content.

Gridx 28B

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.

Advertisements

8 responses to “Gridx in XPages – 28: Expandable Details on Demand”

  1. BumbleBee says :

    Thanks for this post. Can you also tell how you can get other row information from the store. Can it also get any hidden field value in the row?

    • Brad Balassaitis says :

      Check out the end of this post: https://xcellerant.net/gridx-in-xpages-11-grid-api-methods/

      The grid.row(x).data() method gives you an object with the current row data, but there’s also a grid.row(x).item() method that gives you an object from the original data store. I haven’t tried it, but it sounds like that should give you access to the raw data for the entire row in the store.

      • BumbleBee says :

        Thanks Brad. grid.row(x).item() worked. But some times it provides detail of the row above or below when I use the grid.row(x).item() . Say if I select row 1, it gives the value of row 4 etc

      • Brad Balassaitis says :

        Do you happen to have the data sorted or filtered? I wonder if that’s changing the row reference for the store when using the ordinal number.

        The data provider function automatically receives the row ID as a parameter, so use that to retrieve the row instead. grid.row() works with a number or the specific ID of the row, but the ID should get the precise row regardless of order.

        Try grid.row(rowId).item()

      • BumbleBee says :

        Brad, I had singlesort for the rows which I removed and it worked ok , but once in while I see the data gets messed up. Thanks once again for your suggestion.

  2. nonolady says :

    Hello Brad! How to show tree structure(gridx.modules.Tree)? Thank you.

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: