We are using Angular UI Grid in out project. I need to put current date in file name with exported CSV data. What I'm doing now on "export" button click:
$scope.exportCSV = function () {
$scope.gridOptions.exporterCsvFilename = getDate() + ".csv";
$scope.gridApi.exporter.csvExport("all", "visible");
};
The problem is that filename is configured only once and doesn't change in next clicks. How can I set file name again?
For dynamically changing the file name you need to inject uiGridExporterService service, then you can call the downloadFile function that accepts file name as a first argument.
Example:
var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
app.controller('MainCtrl', ['$scope','uiGridExporterConstants','uiGridExporterService', function ($scope,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);
});
}
}]);
Live example: http://plnkr.co/edit/O44fbDiCe6Pb5vNYRVSU?p=preview
I was able to modify the export file name if I did not include it in the initial gridOptions before the onRegisterApi().
$scope.gridOptions = {
// exporterCsvFilename: 'Do not set here',
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
columnDefs: [
{ field: 'Category' },
{ field: 'Description' },
{ field: 'RateCode' }
],
};
After that I could set it with javascript like this:
$scope.gridOptions.exporterCsvFilename = 'Custom_' + $scope.selectedVersion.VersionNumber + '_2017-06-29.csv';
Another solution is to tell the grid that option data have been updated using the gridApi.core.notifyDataChange after setting the filename. This way we can use csvExport(), etc. instead of rewriting the whole function again like in the accepted answer.
Her is an example for a modified export menu for excel and csv:
angular.module('app').controller('GridCrtl', ['$scope', '$filter', 'uiGridExporterService', 'uiGridExporterConstants', function ($scope, $filter, uiGridExporterService, uiGridExporterConstants) {
$scope.grid = {
exporterMenuExcel: false
, exporterMenuCsv: false
, exporterExcelSheetName: 'Export'
, onRegisterApi: function(gridApiRef) {
gridApi = gridApiRef;
}
, gridMenuCustomItems: [{
{
title: 'CSV Export (visible)'
, action: function() {
$scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".csv"
gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
uiGridExporterService.csvExport(gridApi.grid, uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE);
}
, order: 1
}
,{
title: 'CSV Export (all)'
, action: function() {
$scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".csv"
gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
uiGridExporterService.csvExport(gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL);
}
, order: 2
}
,{
title: 'Excel Export (visible)'
, action: function() {
$scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".xlsx"
gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
uiGridExporterService.excelExport(gridApi.grid, uiGridExporterConstants.VISIBLE, uiGridExporterConstants.VISIBLE);
}
, order: 3
}
,{
title: 'Excel Export (all)'
, action: function() {
$scope.grid.exporterCsvFilename = "example_"+$filter('date')(new Date(),'yyyy-MM-dd_HH-mm-ss')+".xlsx"
gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);
uiGridExporterService.excelExport(gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL);
}
, order: 4
}]
}
};
}]);
