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

Question

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.

Bennett Adams · Accepted Answer · 2016-02-24 17:47:23Z

1

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.

answered Feb 24, 2016 at 17:47

Bennett Adams

1,81815 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aquiles Over a year ago

Hello Adams. Thank you for your suggestion! In my particular case I considered an option similar to this one you propose, but I did not want to create a fake column because I have a lot of grids with the similar problem. If I cannot find a solution in a month, I think I will use this approach.

Aquiles · Accepted Answer · 2016-03-02 18:44:13Z

0

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.

answered Mar 2, 2016 at 18:44

Aquiles

8771 gold badge11 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related