Ag-Grid detail (child) grids not getting exported

Question

I'm facing an issue where exporting a grid from Ag-Grid only export details of the master grid, the child grid is not exported. Here's a plunkr showing the issue:

https://next.plnkr.co/edit/jVcvWDJ1NKPSepuS

I haven't been able to find any documentation on how to get the child tables to export with the main table data. Is this even a feature of Ag-Grid?

Answer 1

Unfortunately it is the default behavior of ag-grid to not export the detail grids of a master detail grid. The good news: it is totally possible to export the data in detail grids. The bad news: it's just a little complicated. There isn't a simple setting you can do like exportDetailGrids = true. Here is the official documentation on how to do it https://ag-grid.com/angular-grid/excel-export-master-detail/

I will show the basics of how to do it here though (in Angular), along with a bonus not detailed in the documentation. You have to put a property in the HTML like this:

[defaultExportParams]="defaultExportParams"

Then add the property in your .ts file:

private defaultExportParams;

You can define defaultExportParams in the constructor in the same file:

this.defaultExportParams = {
  getCustomContentBelowRow: function (params) {
    return [
      [
        //column header names
        cell(''),
        cell('Call Id', 'header'),
        cell('Direction', 'header'),
        cell('Number', 'header')
      ],
    ].concat(
      params.node.data.callRecords.map(function (record) {
        //values from data
        return [
          cell(''),
          cell(record.callId, 'body'),
          cell(record.direction, 'body'),
          cell(record.number, 'body')
        ];
      }),
      [[]]
    );
  },
  columnWidth: 120 //this is important
};

Here is the cell function:

function cell(text, styleId) {
    return {
        styleId: styleId,
        data: {
            type: /^\d+$/.test(text) ? 'Number' : 'String',
            value: String(text),
        },
    };
}

If your details grids all have the same column structure than you can do it like shown above. If your detail grids have different column structures you can use a decision structure (this is not mentioned in the documentation):

this.defaultExportParams = {
    getCustomContentBelowRow: function (params) {
        if (params.node.data.Group == 'Detail Grid One') {
            //set column titles and data here for detail grid 1
        } else {
            //set column titles and data here for detail grid 2
        },

        columnWidth: 120
    }
};