Saturday, February 13, 2016

Custom Csv import for angular UI-Grid


We can have a customized csv import for angular UI-Grid.




Steps involved

1) Disable grid menu for export
2) Use exportservice  service
3) Write custom script

Note: html control is outside the grid


Custom script

app.controller('MainCtrl', ['$scope', '$http','uiGridExporterConstants','uiGridExporterService', function ($scope, $http,uiGridExporterConstants,uiGridExporterService) {
 
  $scope.exportCSV = function(){
     var exportService=uiGridExporterService;
     var grid=$scope.gridApi.grid;
     var fileName=getDate() + ".csv";
    
     exportService.loadAllDataIfNeeded(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE).then(function() {
     var exportColumnHeaders = exportService.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
     var exportData = exportService.getData(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE);
     var csvContent = exportService.formatAsCsv(exportColumnHeaders, exportData, grid.options.exporterCsvColumnSeparator);
         exportService.downloadFile(fileName, csvContent, grid.options.exporterOlderExcelCompatibility);
  });
  
}

you can find the working example over here.
Edit in plunkr


No comments:

Post a Comment