Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
How to export CSV from igniteui jquery?
posted

Hi, 

How to export CSV from igniteui jquery?

We referred the below url, and there is only avail export excel(.xlsx) only. Is there any option to enable CSV export?

https://www.igniteui.com/grid/export-feature-rich-grid

Suggest it if anything.

  • 0
    Offline posted

    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.

  • 440
    Offline posted

    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