Angular ui-grid external export buttons

Question

I am new working with the Angular UI-GRID and I need to create external buttons for the exporting features like PDF export and CSV Export similar to this image. Do you have any idea how can I do it ?

Also I need a Print button but I don't see it in the documentation. Is there a Print behavior for this grid ?

Thank you, Ernesto

Answer 1

Taking a look at the ui-grid.exporter source code (this will specifically address pdf export, which starts at ~line 972, but you can apply it to the csv use case as well), you would want to create an external button in your html, then tie the uiGridExporterService's pdfExport() function to the button via ng-click. Per the code, the pdfExport function takes three parameters: grid, rowTypes, and colTypes. To get the grid object, use $scope.gridApi.grid, and the latter two you need to set to constants -- uiGridExporterConstants.ALL, uiGridExporterConstants.SELECTED, or uiGridExporterConstants.VISIBLE -- depending on what you want to export. Make sure you inject uiGridExporterService and uiGridExporterConstants in your module.

Check out this plunker I adapted from the ui-grid docs. The relevant bits:

<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
<button ng-click="exportPdf()">PDF</button>

$scope.exportPdf = function() {
  var grid = $scope.gridApi.grid;
  var rowTypes = uiGridExporterConstants.ALL;
  var colTypes = uiGridExporterConstants.ALL;
  uiGridExporterService.pdfExport(grid, rowTypes, colTypes);
};

Hope that helps!

Answer 2

Make sure you set enableGridMenu to false.

and inside the GridOptions do something like this:

 'exporterCsvFilename' : 'clarification-status.csv',
            exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
            onRegisterApi: function(gridApi){
                vm.gridApi = gridApi;

            },

and then you need to use the export csv or exportpdf functions like this.

vm.exportCsv = function() {
            var grid = vm.gridApi.grid;
            var rowTypes = uiGridExporterConstants.ALL;
            var colTypes = uiGridExporterConstants.ALL;
            uiGridExporterService.csvExport(grid, rowTypes, colTypes);
        };

and inside your html view, you need to call this exportcsv() function as shown below.

<img ng-src="public/images/excel-icon.png" ng-click="vm.exportCsv()" />