ui-grid using external Pagination and exporting data


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?

Problem courtesy of: user2827707


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;
                                                var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                                                $scope.gridApi.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, myElement );
                                            }, 1000);


Hope this helps someone!

Solution courtesy of: user2827707


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


<button ng-click="exportAllData()">Export Data</button>

then in your controller:

$scope.exportAllData = function()
      $scope.JSONToCSVConvertor(response, "Data Title", true);

$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");

  //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

JSONToCSVConverter() source: http://jsfiddle.net/hybrid13i/JXrwM/

Discussion courtesy of: Ronnie

This recipe can be found in it's original form on Stack Over Flow.