Export data in ag-grid for cell renderer

Question

I'm using ag-grid and I have a column definition as following :

{
    headerName: "Color",
    valueGetter: function (params) {
        return JSON.parse(params.data.color).name;
    },
    field: 'color',
    cellRenderer: function (params) {
        if (angular.isDefined(params.data) && angular.isDefined(params.data.color)) {
            var color = JSON.parse(params.data.color);
            return '<div style="width: 50px; height: 18px; background-color:' + color.htmlValue + ';"></div>';
        }
    },
    suppressMenu: true,
    suppressSorting: true
}

When I export the grid in CSV format, I get undefined for the color column, which is a cell renderer, I searched for a solution for this and I found this in the official documentation :

The raw values, and not the result of cell renderer, will get used, meaning:

• Cell Renderers will NOT be used.
• Value Getters will be used.
• Cell Formatters will NOT be used (use processCellCallback instead).

As you can see I'm already using a valueGetter but I always get undefined in the exported data for the color column.

How can I solve this ?

Answer 1

You could solve it by using processCellCallback when exporting to CSV. This way you can see and control exactly what is going to be exported.

Besides the column definition, you can pass other parameters to your grid options.

From ag-grid docs: What gets exported

• The raw values, and not the result of cell renderer, will get used, meaning:

  • ...
  • Cell Formatters will NOT be used (use processCellCallback instead).

So, let's say that you have your column definition in a variable called columnDefs. Now you pass that to your gridOptions.

const gridOptions = {
  columnDefs: columnDefs,
}

The latter code should work. So, now you want to handle the clicking on CSV Export on the context menu (You can also do it with a custom button if you may).

Export to CSV:

Now you have to add the provided getContextMenuItems function to you gridOptions object. For more info: Configuring the Context Menu

const gridOptions = {
  columnDefs: columnDefs,
  getContextMenuItems() {
    return [
      {
        name: 'CSV Export',
        action: function(params) {
          gridOptions.api.exportDataAsCsv({
            processCellCallback: function(cell) {
              // Manipulate the value however you need.
              return cell.value;
            },
          });
        },
      },
    ];
  },
};

The idea is to get the CSV Export and programmatically add what you need to happen in the action. On the action, what you need is to call the exportDataAsCsv function from the gridOptions.api. Now (I know this is a ton of information) one of the options you have is to include your processCellCallback function where you can make sure you pass the cell value. Doing so is very useful because you can manipulate the value however you may need (e.g. Adding a $ sign to a number that is supposed to be money).

Custom button:

There is not much to say in the case you need a custom button. The only thing you would need to do is make sure you call the exportDataAsCsv on the gridOptions.api when onclick event is fired.

Something like:

onClick() {
  gridOptions.api.exportDataAsCsv({
    processCellCallback: ...
  });
}

Answer 2

As another answer mentions, the ag-grid docs specifically state "Cell Renderers will NOT be used": https://www.ag-grid.com/javascript-grid-excel/#what-gets-exported

I did a workaround that calls the cellRenderer from the processCellCallback function, like this:

processCellCallback: function (cell) {
    var cellVal = cell.value;
    if(_.get(cell, 'column.colDef.cellRenderer')) {
        cellVal = cell.column.colDef.cellRenderer({value: cell.value});
    }
    return cellVal;
}