Ag-grid ExportAsCsv when columns where created dynamically

Question

Is it possible to exportDataAsCsv when columns where created dinamically?

In my component, I create columns where many of them are added 'on the fly' it basically looks like this:

initializeColumnDefs() {
this.columnDefs = [
  {
    headerName: 'Title',
    field: 'title',
    colId: 'title',
    cellRenderer: (params: any) => params.value
  },

];

let p = array.filter(p => p.propId == this.prop.id);
let dict= this.getProperties(this.getLookup(properties.map(p => p.id)));
for (const id of Object.keys(dict)) {
  let propertyGroup = dict[id];

  this.columnDefs.push({
    headerName: propertyGroup.name,
    colId: id,
    field: '',
    valueFormatter: (params: any) => {
      if (!params || !params.data)
        return '';

      let val;
      params.data.values.forEach(v => {
        if (v.propertyId === id)
          val = v.value;
      });
      params.value = val;
      return params.value;
    },
  });
}

}

as you see, the first column is know, and others are added dynamically, it could be one column, it could be ten.

and then in my export method, I try to do similarly:

 export() {
let header = this.columnDefs.map(columnDef => {
  let headerName = columnDef.headerName;
  return headerName;
});
let p = array.filter(p => p.propId == this.prop.id);
let dict= this.getProperties(this.getLookup(properties.map(p => p.id)));
let params: any = {
  fileName: 'export.csv',
  columnSeparator: ',',
  skipHeader: true,
  columnKeys: this.columnDefs.map(c => c.field || c.colId).filter(c => !!c),
  // format cells before exporting
  processCellCallback: function (p) {
    if (p) {
      if (p.column.colId === 'title')
        return p.value;
      else {
        for (const id of Object.keys(dict)) {
          if (p.column.colId === id ) {
            let val: any;
            p.data.values.forEach(v => {
              if (v.propertyId === id)
                val = v.value;
            });
            p.value = val;
            return p.value;
          }
        }
      }
    }
    return p.value ? p.value : '';
  }
};
params.customHeader = header.join(params.columnSeparator) + '\n';
this.grid.api.exportDataAsCsv(params);

}

However, on this part p.data.values.forEach(v => { ... in the export method I get Uncaught TypeError: Cannot read property 'values' of undefined at _loop_4

Fro what I see it looks pretty similar and I'm not sure how to get it working... Has anyone had a problem like this?

Answer 1

initializeColumnDefs() {
this.columnDefs = [
  {
    headerName: 'Title',
    field: 'title',
    colId: 'title',
    cellRenderer: (params: any) => params.value
  },
];
let p = array.filter(p => p.propId == this.prop.id);
let dict= this.getProperties(this.getLookup(properties.map(p => p.id)));
for (const id of Object.keys(dict)) {
  let propertyGroup = dict[id];

  this.columnDefs.push({
    headerName: propertyGroup.name,
    colId: id,
    field: '',
    valueFormatter: (params: any) => {
      if (!params || !params.data)
        return '';

      let val;
      params.data.values.forEach(v => {
        if (v.propertyId === id)
          val = v.value;
      });
      params.value = val;
      return params.value;
    },
 valueGetter: (params: any) => {
          if (!params || !params.data)
            return '';

          let val;
          params.data.values.forEach(v => {
            if (v.propertyId === id)
              val = v.value;
          });

          params.value = val;
          return params.value;
        },
  });
}

I actually found it to be quite a bold mistake, I just needed valueGetter and then I could just omit half of the export and make it like this:

 export() {
let header = this.columnDefs.map(columnDef => {
  let headerName = columnDef.headerName;
  return headerName;
});
let params: any = {
  fileName: 'export.csv',
  columnSeparator: ',',
  skipHeader: true,
  columnKeys: this.columnDefs.map(c => c.field || c.colId).filter(c => !!c),
  // format cells before exporting
  processCellCallback: function (p) {
    if (p) {
      if (p.column.colId === 'organizationId')
        return ConstantService.OrganizationDictionary[p.value].name;
      if (p.column.colId === 'assetId')
        return ConstantService.AssetDictionary[p.value].name;
    }
    return p.value ? p.value : '';
  }
};

// ... }