Angular external ui-grid export buttons

Question

I work with Angular UI-GRID, and I need to create external buttons for exporting functions such as Export PDF and Export CSV similar to this image . Do you know how I can do this?

I also need the "Print" button, but I do not see it in the documentation. Is there any print behavior for this grid?

Thanks Ernesto

Answer 1

Having looked at the source code of ui-grid.exporter (this will specifically concern the pdf export, which starts from line 972, but you can also apply it to the case of using csv), you would want to create an external button in your html, and then bind the uiGridExporterService function pdfExport() to the button via ng-click . For code, the pdfExport function takes three parameters: grid, rowTypes, and colTypes. To get the mesh object, use $scope.gridApi.grid , and in the last two you need to set constants - uiGridExporterConstants.ALL , uiGridExporterConstants.SELECTED or uiGridExporterConstants.VISIBLE - depending on what you want to export. Make sure you uiGridExporterService and uiGridExporterConstants in your module.

Check out this plunker. I adapted from ui-grid docs. Matching 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 this helps!

Answer 2

Verify that enableGridMenu is set to false.

and inside 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 csv or exportpdf export 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()" /> 

Answer 3

• on section 206 it exports sir documentation data, the export button is in the upper right corner, of course, you can configure the button. But that is not your main question.
• As far as I know, it has not yet been added to the ui-grid function, but it is possible if you want to dive, and if you convert to pdf or csv, there is a button for printing directly (top right). If you really want this on your page, this can help you.