ui-grid using external Pagination and exporting data - angularjs

Question

I am currently using ui-grid implemented with external pagination to display my data. I've run into as issue where I can only export the currently viewed data, however I need to be able to export ALL data as well.
Anyone know a work around to export all data using external pagination?

Answer 1

I ended up using csvExport function included with ui-grid. I added an "Export All" custom menu item and it works great! Here is my code:
gridMenuCustomItems: [
{
title: 'Export All',
action: function ($event) {
$http.get(url).success(function(data) {
$scope.gridOptions.totalItems = data.totalFeatures;
$scope.gridOptions.data = data.features;
$timeout(function()
{
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, myElement );
}, 1000);
});
}
}
]
Hope this helps someone!

Answer 2

Ok, so I took ui-grids server side example and modified their plnkr a bit. I simply created a button outside the ui-grid and that button calls your datasource which converts json into CSV and downloads the file
http://plnkr.co/edit/xK3TYtKANuci0kUgGacQ?p=preview
<button ng-click="exportAllData()">Export Data</button>
then in your controller:
$scope.exportAllData = function()
{
setTimeout(function()
{
$http.get('largeLoad.json').success(function(response)
{
$scope.JSONToCSVConvertor(response, "Data Title", true);
});
},100);
};
$scope.JSONToCSVConvertor = function(JSONData, ReportTitle, ShowLabel)
{
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//Set Report title in first row or line
CSV += ReportTitle + '\r\n\n';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + '\r\n';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
//Generate a file name
var fileName = "MyReport_";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
JSONToCSVConverter() source: http://jsfiddle.net/hybrid13i/JXrwM/