Vahan Hakobyan
Vahan Hakobyan

Reputation: 77

How can I export AgGrid data in case of infinite row model (infinite scrolling) in react

How can I export AgGrid data in case of infinite row model (infinite scrolling) in react. For the normal row models it is being done in this way:

this.gridOptions.api.exportDataAsCsv(params);

What about infinite row model case?

Upvotes: 3

Views: 1588

Answers (1)

Vahan Hakobyan
Vahan Hakobyan

Reputation: 77

Here is the solution that I've implemented. Grid footers, multiple headers is not considered here. This code is for simple grid with headers and rows under it. In case of infinite scrolling and dynamic columns (in some cases columns can be changed).

var LINE_SEPARATOR = '\r\n';
var COLUMN_SEPARATOR = ',';
var fileName = 'export.csv';

let csvString = '';
let columnsToExport = this.gridOptions.api.columnController.getAllDisplayedColumns();

// adding column headers.
columnsToExport.map((column) => {
  csvString+= column.colDef.headerName;
  csvString+= COLUMN_SEPARATOR;
});
csvString+= LINE_SEPARATOR;

// adding content of data currently loaded in the grid.
this.gridOptions.api.forEachNode( function(node) {
  node.columnController.allDisplayedColumns.map((column) => {
    let cellContent = node.valueService.getValue(column, node);
    csvString+= (cellContent != null) ? cellContent : "";
    csvString+= COLUMN_SEPARATOR;
  });
  csvString+= LINE_SEPARATOR;
});

// for Excel, we need \ufeff at the start
var blobObj = new Blob(["\ufeff", csvString], {
    type: "text/csv;charset=utf-8;"
});
// Internet Explorer
if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blobObj, fileName);
}
else {
    // Chrome
    var downloadLink = document.createElement("a");
    downloadLink.href = window.URL.createObjectURL(blobObj);
    downloadLink.download = fileName;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

Upvotes: 1

Related Questions