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

Cannibal

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!

Diarchy

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) – Pumpkinseed

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()" />

Ribbonfish

Answer 3

1. it's on section 206 exporting data of the documentation sir, the button export is on the right top corner, of course you can customize the button. But your main question is not about it.
2. As far as i know it's not yet added to ui-grid feature, but it's possible if you want dive in, and if you convert to pdf or csv there is print button right there (right top). If you really want it on your page this might help you.

Scion