Angular ui-grid external export buttons

12,807

Solution 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!

Solution 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()" />
Share:
12,807
ermamud
Author by

ermamud

Updated on June 15, 2022

Comments

  • ermamud
    ermamud about 2 years

    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

  • Amrit
    Amrit over 6 years
    it gives the error..Can u help with this... angular.js:13236 TypeError: Cannot read property 'indexOf' of undefined at ui-grid.js:18179 at Array.forEach (<anonymous>) at Object.getColumnHeaders (ui-grid.js:18177) at ui-grid.js:18471 at processQueue (angular.js:15552) at angular.js:15568 at Scope.$eval (angular.js:16820) at Scope.$digest (angular.js:16636) at Scope.$apply (angular.js:16928) at HTMLAnchorElement.<anonymous> (angular.js:24551)