Angular UI grid : export hidden columns when user selects Export Visible data

Question

Hi I am using Angular UI grid. I have 3 columns. One of the column is hidden. When user clicks on Export Visible data as CSV or Export Visible data as Pdf the hidden column also needs to be exported. How can I achieve this?

Here is a link to the plunkr http://plnkr.co/edit/Vwq7azXtx0GV7idvrSvq?p=preview

HTML: Here is my code

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
</div>

JS

<script src="app.js"></script>
  </body>
</html> 
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'gender', visible: false},
      { field: 'company' }
    ],
    enableGridMenu: true,
    enableSelectAll: true,
    exporterCsvFilename: 'myFile.csv',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfOrientation: 'portrait',
    exporterPdfPageSize: 'LETTER',
    exporterPdfMaxGridWidth: 500,
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    }
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
  });

}]);

Here column gender is hidden. But when I click on Export Visible data as csv/pdf I want this hidden column to be exported too.

Why don't you choose "Export all data as csv" in the menu instead of "Export visible data as csv"? — Mistalis
I want both the options to return the hidden column values. Export all data as well as export visible data has to export my hidden column — ASR

Don Bottstein Don Bottstein · Accepted Answer · 2017-11-13T19:10:00

I have the same requirement and was able to accomplish this with the following.

$scope.gridOptions = {
    exporterMenuCsv: true,
    exporterMenuPdf: true,
    exporterMenuVisibleData: false, // suppress default menu options

    columnDefs: [
        // define columns
    ],

    onRegisterApi: function (gridApi) {
        const grid = gridApi.grid;

        // add our own export visible data menu option
        // we want to export all columns, not just visible ones
        // add a small delay because the addToGridMenu function
        // may not be defined yet when this code is executed
        $timeout( function() {
            grid.api.core.addToGridMenu(grid, [
                {
                    title: i18nService.getSafeText('gridMenu.exporterVisibleAsCsv'),
                    action: function ($event) {
                        grid.api.exporter.csvExport(uiGridExporterConstants.VISIBLE, uiGridExporterConstants.ALL);
                    },
                    shown: function () {
                        return grid.options.exporterMenuCsv;
                    },
                    order: grid.options.exporterMenuItemOrder + 1
                },
                {
                    title: i18nService.getSafeText('gridMenu.exporterVisibleAsPdf'),
                    action: function ($event) {
                        grid.api.exporter.pdfExport(uiGridExporterConstants.VISIBLE, uiGridExporterConstants.ALL);
                    },
                    shown: function () {
                        return grid.options.exporterMenuPdf;
                    },
                    order: grid.options.exporterMenuItemOrder + 4
                }
            ]);
        }, 200 );
    }
}

The code hides the default "Export visible data..." menu options added by the ui-grid-exporter module and adds new ones. The action function calls the export method specifying uiGridExporterConstants.ALL instead of uiGridExporterConstants.VISIBLE for the column type.

Angular UI grid : export hidden columns when user selects Export Visible data

1 Answers