SlickGrid functions for CSV export?

Question

Within a Django application, I'm using SlickGrid to bind some XHR data to a client-side spreadsheet:

 var grid;
 var review_url = '/api/reviews/?t=' + current_tcode;
 $.getJSON(review_url, function(data) {
   grid = new Slick.Grid("#myGrid", data, columns, options);
 });

I'd also like to give the user the option to download the data as a CSV file. What is the best approach to doing this?

1. Simply link to a CSV file that I render myself (with Piston, which I'm already using for the API).
2. Do something clever using SlickGrid to output CSV data on the client side.
3. Something else.

SlickGrid feels fully-featured enough that it might have something in-built to output CSV, but I can't find anything on a quick search.

Answer 1

For export to CSV you may use this function:

$("#exporticon").click(function() {
    var processRow = function (row) {
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|;|\n)/g) >= 0)
                result = '"' + result + '"';
            if (j > 0)
                finalVal += ',';
                finalVal += result;
        }
        return finalVal + '\n';
    };

    var csvFile = '';
    var rows = [];
    var colname = [];
    for (var j = 0, len = grid.getColumns().length; j < len; j++) {
        colname.push(grid.getColumns()[j].name);
    }
    rows.push(colname);
    var singlerow = [];
    for (var i = 0, l = dataView.getLength(); i < l; i++) {
        for (var j = 0, len = grid.getColumns().length; j < len; j++) {
            singlerow.push(grid.getDataItem(i)[grid.getColumns()[j].field]);
        }
        rows.push(singlerow);
        singlerow = [];
    }

    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }

    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, "filename.csv");
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", "filename.csv");
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
});

Answer 2

You may want to look at this: CellExternalCopyManager is a SlickGrid plugin to copy/paste data from/to MS Excel (or compatible)

Answer 3

SlickGrid is purely a component for visualization. Feed it the data, and it will render it as a grid to the user. Heck, it isn't even smart enough to sort the data.

As such, it has no functionality to transform data in any way. So if you want to get the grid data in CSV format you have two options:

Option 1. Render the CSV client-side by generating it directly form the underlying data array. Since you're already returning the data in json format, you should be able to do this pretty easily with something like this.

-or-

Option 2. Render the CSV server-side and make it accessible via url, possible by adding a formatting parameter to your review_url.

I don't know of any functionality in the grid that will help you here, but maybe someone will correct me.