[Data Grid Sample] [Data Grid Sample] Extending DataGrid to Expand/Collapse Row Details

Forge Component
Published on 08:19 (2 hours ago) by OutSystems R&D
15 votes
Published on 08:19 (2 hours ago) by OutSystems R&D

If there is a requirement to add extra details to the rows from the grid, it is possible to extend the default DataGrid behavior.

Following the expected requirements:

  1. Open row details with an "expand" button.
  2. Close row details with a "collapse" button.

The current version of DataGrid allows to set a first column containing the row number and a second column which has a checkbox allowing the selection of that same row.
With this extension you will replace the row number with the symbol "+" and "-", expand and collapse respectively. (Remember that you can always remove the checkboxes from the left)

Once you click on one of the "+" symbol from a row you will open the details from that row.

In this sample, you have the Id, Purchase Order and Part Number from the expanded row. But you can always change the details that you want to present. To see more examples please check the following link - https://www.grapecity.com/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/purejs.
The following image has one of the examples from the previous link and is the same approach that is being used in this sample. (inside GridOS.ComponentUtils.initGrid method)

You can check how to extend the DataGrid in the sample attached in the post, just download the .oml file. As you can see in the previous image, this sample is using 2 extra Web Blocks.

You need to have the WijmoGridDetailJS from wijmo library (wijmo.grid.detail.js) and the rowDetail block. The last one is used because our component is not prepared to use this feature, so some overrides were needed in order to make it available.

Remember that by using this feature, the methods related to adding the expanding buttons from row details, formatting the rows in order to remove the (non-dynamical) height that is set by the developer on the gridContainer as well as the selection of the rows will get overwritten. Specifically, the methods initGrid, formatItems and manageSelection.

Hope this sample is useful if you need to extend DataGrid to have more details about each row with an expand/collapse feature.