CODEWITHSUNDEEP
angular-ui-grid
Aquiles
Aquiles

Reputation: 877

Exporting CSV from ui-grid with cell display rather than the source value

I have a table done with ui-grid and this table has a column with cellFilter definition like this:

  { field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }

My gridMenu custom item is configured like this:

gridMenuCustomItems: [
        {
            title:'Custom Export',
            action: function ($event) {

              var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);

              var csvContent = uiGridExporterService.formatAsCsv([], exportData, this.grid.options.exporterCsvColumnSeparator);

              uiGridExporterService.downloadFile (this.grid.options.exporterCsvFilename, csvContent, this.grid.options.exporterOlderExcelCompatibility);

            },
            order:0
        } 
    ]

The table is displayed correctly, but when I try to export to CSV, the Company column is exported with empty value. Here is my Plunkr.

Any suggestion will be appretiated

References

I did some research and according to ui-grid Issue #4948 it works good when the Company column is filled with an static catalog. Here is a Plunkr demostrating that.

Upvotes: 1

Views: 1927

Answers (2)

Aquiles
Aquiles

Reputation: 877

I found a solution to the CSV export to be able to display the cell display value. My mistake was using row.grid instead of this.grid at the mapCompany cell filter:

columnDefs: [
  { field: 'name' },
  { field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }
],

The right way to use it is using this:

columnDefs: [
  { field: 'name' },
  { field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
],

Here is my Plunkr.

Upvotes: 0

Bennett Adams
Bennett Adams

Reputation: 1818

As you mentioned, there is an export issue when the values in the column are not static, so I forked your plunker with a solution that creates the company mapping for each data object and adds it as a key-value once you get the company catalog back:

 $http.get('https://api.github.com/users/hadley/orgs')
   .success(function(data) {

     $scope.companyCatalog = data;
     angular.forEach($scope.gridOptions.data, function(item) {
       var compMap = uiGridFactory.getMapCompany(item.company, $scope.companyCatalog);
       item.mappedCo = compMap;
     });
   });

I've kept the original company column but made it invisible (rather than overwriting it), so it exports with the rest of the data in the csv. New column defs:

columnDefs: [
  { field: 'name' },
  { field: 'mappedCo', name: 'Company'},
  { field: 'company', visible: false }
]

Also, in the case that you were getting your data from a server, you would have to ensure that the data and the catalog returned before you run the mapping function. This solution may not work in your particular use case; I don't know.

Upvotes: 1

Related Questions