How can I remove some columns in pdf export in angular js ui Grid

Question

I am using Angular JS ui Grid

http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex

My requirement is that I want to show e.g. 5 columns, but when I export PDF, I don't want to export certain columns like username.

How can I do that?

Calvo

Answer 1

There is a gridOption to do exactly that: exporterSuppressColumns

I edited the plunker from the UI Grid documentation to demonstrate hiding the "Gender" column in the exported PDF: http://plnkr.co/edit/89ZVlPZcQbHYzgX5l4yq?p=preview

Now whether you select export "all" or export "visible", you will never see the gender column in the output.

  $scope.gridOptions = {
columnDefs: [
  { field: 'name',visible:true },
  { field: 'gender', cellFilter: 'mapGender', exporterPdfAlign: 'right', visible:true, enableHiding: true },
  { field: 'company', visible: false }
],
exporterSuppressColumns: [ 'gender' ],

The documentation is here: http://ui-grid.info/docs/#/api/ui.grid.exporter.api:GridOptions

Triglyph

@Imyers How can I add a second header to the exporterHeaderFilter? – Variform

Just make the exporterSuppressColumns comma delimited, like so: exporterSuppressColumns: [ 'gender','company' ] – Triglyph

Answer 2

exporterSuppressExport: true

Example

{
 name: 'Description', enableCellEdit: true,
 cellTemplate: '<div class="ui-grid-cell-contents"><div ng-class="{\'viewr-dirty\' : row.inlineEdit.entity[col.field].isValueChanged }">{{row.entity[col.field]}}</div></div>'
},

See here for more info http://ui-grid.info/docs/#/api/ui.grid.exporter.api:ColumnDef

Southsoutheast

Answer 3

Now here is a column that contains a button and needs to be excluded from the export

{
    name: null,
    exporterSuppressExport: true, // <--- Here
    field: "fake",
    cellTemplate: '<div class="tac"><a class="btn btn-red btn-xs ml5" ng-if="!row.inlineEdit.isEditModeOn" ng-click="grid.appScope.vm.deleteRow(row, $event)"><i class="fa fa-trash"><md-tooltip md-direction="left">delete</md-tooltip></i></a></div>',
    enableCellEdit: false,
    enableFiltering: false,
    enableSorting: false,
    showSortMenu: false,
    enableColumnMenu: false,
    width: 50,
},

Southsoutheast

Answer 4

You can also just add the option exporterSuppressExport: true to the desired column in your columnDefs like this:

$scope.gridOptions = {
  columnDefs: [
    { field: 'username', exporterSuppressExport: true },
    { field: 'someOtherField' }
  ],
  // other options ...
};

Now only someOtherFieldgets exported.

Distemper