Ignite UI is a JavaScript library that provides a set of advanced UI controls for building modern, responsive web applications. If you want to export data to CSV using Ignite UI with jQuery, you can use the igGrid control to display and manipulate tabular data, and then use JavaScript/jQuery to handle the export functionality.

Hello Karthick,

I have been looking into your question and currently, Ignite UI jQuery does not offer a built-in feature to export the igGrid to a CSV file, however this could be achieved at the application level.

What I propose as an approach is to start by creating a button to handle the click function:

<input type="button" id="exportButton" value="Export to CSV />

$( "#exportButton" ).igButton( {
                labelText: $( "#exportButton" ).val(),
                click: function ( e )
                {  }
});

On the onClick the dataSource and the columns of the grid are retrieved. Also an empty array is created which will contain the parsed data in the correct CSV format:

var ds = $("#grid").igGrid("option", "dataSource");
var cols = $("#grid").igGrid("option", "columns");
var csv = [];

Then the columns are iterated through to get the key value from each one and  then it is pushed to an empty headerRow array. Afterwards the array is flattened with the joint method and the pushed into the the csv array:

var headerRow = [];
$.each(cols, function (index, col) {
               headerRow.push(col.key);
});
csv.push(headerRow.join(","));

The same is done for the rows with the data:

$.each(ds, function (index, row) {
               var csvRow = [];
               $.each(row, function (index, cell) {
                              csvRow.push(cell);
               });
               csv.push(csvRow.join(","));
});

Finally the populated csv array is passed to a function witch is responsible for converting the array into csv file and start downloading it, as the function is external to our package and other functions can be found in the various forums on how it is done:

downloadCSV(csv.join("\n"), "csvExport.csv");

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics