export cell with 2 data to csv ag grid

Question

I have a grid which contain in some cells 2 and three datas. When i try to export the grid into a csv file these columns don't get exported. I believe that i have to write special code for them when writing columnKeys. Here is my interface :

i tried to use the append (+) operator but no luck. here is my code :

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Grid, GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
import { DealsService } from '../services/deals.service';
import * as moment from 'moment';
@Component({
  selector: 'app-deals',
  templateUrl: './deals.component.html',
  styleUrls: ['./deals.component.scss']
})
export class DealsComponent implements OnInit {
  private gridApi;
  gridOptions = {
    rowHeight :90,
    headerHeight:60,
    defaultColDef: {
      sortable: true
  },
  }
  columnDefs = [

    {headerName: 'Block' ,field:'BLOCKID',width:200, resizable:true,  filter: 'agNumberColumnFilter'} ,

    {headerName: 'Deal' ,field:'DEALID',width:200, resizable:true,    } ,
    {headerName: 'Deal Class' ,field:'DEALCLASS',width:200, resizable:true,  } ,
      {headerName: 'Instr Class' ,field:'INSTRCLASS',width:200, resizable:true,  } ,

     // {headerName: 'Trade \n Start',cellRendererFramework: DateCellRendererComponent ,width:210, resizable:true,  filter: 'agDateColumnFilter' } ,
      {headerName: 'Trade', field : 'TRADEDATE', valueFormatter : this.dateFormatter ,width:150, resizable:true,  filter : 'agDateColumnFilter', filterParams: {          //inRangeInclusive: true,
        comparator: function(filterLocalDateAtMidnight, cellValue) {
        //using moment js
        var dateAsString = moment(cellValue).format('DD/MM/YYYY');
        var dateParts = dateAsString.split("/");
        var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

        if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
        return 0
        }

  if (cellDate < filterLocalDateAtMidnight) {
    return -1;
    }

    if (cellDate > filterLocalDateAtMidnight) {
    return 1;
    }
    }
    }}   ,
    {headerName: 'Start', field : 'STARTDATE', valueFormatter : this.dateFormatter ,width:200, resizable:true,  filter : 'agDateColumnFilter', filterParams: {          //inRangeInclusive: true,
      comparator: function(filterLocalDateAtMidnight, cellValue) {
      //using moment js
      var dateAsString = moment(cellValue).format('DD/MM/YYYY');
      var dateParts = dateAsString.split("/");
      var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

      if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
      return 0
      }

      if (cellDate < filterLocalDateAtMidnight) {
      return -1;
      }

      if (cellDate > filterLocalDateAtMidnight) {
      return 1;
      }
      }
      }}   ,

  {headerName: 'Folder' ,field:'FOLDERSHORTNAME',filter:true ,width:200, resizable:true},
  {headerName: 'Cpty' ,field:'CPTYSHORTNAME',width:130, resizable:true, filter: true} ,
  ,
  {headerName: 'ShortName \n Name', cellRenderer: function(params){  return   params.data.INSTRSHORTNAME + '<br/>' + params.data.INSTRNAME },width:250, resizable:true, sortable: false} ,

  {headerName: 'Quantity \n Settl.Amt',cellRenderer: function(params){  return   params.data.QUANTITY + '<br/>' + params.data.SETTLEAMT + '\n'+ params.data.SETTLECURRENCIESSHORTNAME },width:200, resizable:true, sortable: false} ,
  {headerName: 'Rate \n Fees', cellRenderer: function(params){  return   params.data.FLOATINGRATESSHORTNAME + '<br/>' + params.data.RENTSPREADFIXEDRATE },width:200, resizable:true, sortable: false} ,
  {headerName: 'Category \n Type',cellRenderer: function(params){  return   params.data.DEALCAT + '<br/>' + params.data.DEALTYPE },width:200, resizable:true, sortable: false} ,
  {headerName: 'End', field : 'ENDDATE', valueFormatter : this.dateFormatter ,width:200, resizable:true,  filter : 'agDateColumnFilter', filterParams: {
    //inRangeInclusive: true,
    comparator: function(filterLocalDateAtMidnight, cellValue) {
    //using moment js
    var dateAsString = moment(cellValue).format('DD/MM/YYYY');
    var dateParts = dateAsString.split("/");
    var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

    if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
    return 0
    }

    if (cellDate < filterLocalDateAtMidnight) {
    return -1;
    }

    if (cellDate > filterLocalDateAtMidnight) {
    return 1;
    }
    }
    }}   


];

rowData : any;

constructor(private service:DealsService) {



}
dateFormatter(params){
return moment(params.value).format('DD/MM/YYYY');
}

onBtExport() {
  var params = {
    columnSeparator: ';',
    columnKeys: ['BLOCKID','DEALID','DEALCLASS','INSTRCLASS','TRADEDATE','STARTDATE','FOLDERSHORTNAME','CPTYSHORTNAME','INSTRSHORTNAME' + 'INSTRNAME','QUANTITY'+ 'SETTLEAMT','FLOATINGRATESSHORTNAME'+'RENTSPREADFIXEDRATE','DEALCAT'+'DEALTYPE','ENDDATE']
  };



 this.gridApi.exportDataAsCsv(params);
}
onGridReady(params) {
  this.gridApi = params.api; 
}

ngOnInit() {
this.service.getDealsList().subscribe(data => {
  this.rowData = data;
});    }




}

I much appreciate your help. thank you.

Answer 1

You need to define valueGetters with similar functions as cellRenderer (probably remove <br/>)

As per docs -

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).