Untitled

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    </head>
    <body>
    <h1>Lets Connect a Grid to a CSV on the Client</h1>
    <p>In this example we will use the <a href="https://www.papaparse.com/docs#json-to-csv">papaparse</a> library.</p>
    <p>You can click the following button to export the data back to csv and save it.</p>
    <button onClick="_exportDataToCSV()">Export To CSV</button>
    <p>You can also highlight (drag and select) the grid cells and export that selection to a CSV via the context menu (right click
       menu.)</p>

    <zing-grid
      pager
      page-size=15
      selector
      sorter
      context-menu="customMenu"
      editor>
      <zg-caption>
        <div class="caption-container">
          <h2>CSV Export Demo Title</h2>
          <button onClick="_exportDataToCSV()">Export To CSV</button>
        </div>
      </zg-caption>
      <zg-colgroup>
        <zg-column index="0" header="Year"></zg-column>
        <!-- <zg-column index="1" header="IMDB"></zg-column> -->
        <zg-column index="2" header="Title"></zg-column>
        <!-- <zg-column index="3" header="Year"></zg-column>
        <zg-column index="4" header="Budget"></zg-column>
        <zg-column index="5" header="Budget"></zg-column> -->
        <zg-column index="6" header="Budget" type="currency"></zg-column>
        <zg-column index="7" header="Domestic Growth" type="currency"></zg-column>
        <zg-column index="8" header="Internation Growth" type="number"></zg-column>
        <!-- <zg-column index="9" header="Year"></zg-column>
        <zg-column index="10" header="Year"></zg-column>
        <zg-column index="11" header="Year"></zg-column>
        <zg-column index="12" header="Year"></zg-column>
        <zg-column index="13" header="Year"></zg-column>
        <zg-column index="14" header="Year"></zg-column> -->
      </zg-colgroup>
      <zg-menu id="customMenu">
        <zg-menuitem role="exportSelection">Export Selection</zg-menuitem>
      </zg-menu>
    </zing-grid>

    <!-- empty anchor tag for downloading -->
    <a href="" id="downloadAnchor">&nbsp;</a>

    <!-- other script tags at the bottom of the page -->

    </body>
</html>

<script >

  window.onload = function(){
  const menuItem = document.querySelector('zg-menuitem[role="exportSelection"]');
  // global reference to zing-grid on page
  const zgRef = document.querySelector('zing-grid');
  var data = [];
  var dataKeys = [];

      // function for exporting csv
  function _exportDataToCSV() {
    const data = zgRef.getData();
    const csvData = Papa.unparse(data);
    console.log('--- exporting data ----', data, csvData);
    _downloadCSV('export-all.csv', csvData);
  }

  // Parse local CSV file
  Papa.parse('https://raw.githubusercontent.com/fivethirtyeight/data/master/bechdel/movies.csv', {
    download: true, // url to retrieve CSV file
    complete: function(results) {
      console.log("Finished:", results);

      // if results came in correctly
      if (results && results.data) {

        // lets push the results into our new array
        // new format
        for(var i=1; i < results.data.length; i++) {
          data.push(results.data[i]);
          // render first page now
          if(i === 15) zgRef.setData(data);
        }
        // render rest of data after first page
        setTimeout(function() {zgRef.setData(data)}, 500);
      }

      // we could also just delete the first index
      // which contains the header information
    }
  });

  // register event listener for grid selection
  var csvData = null;
  zgRef.addEventListener('grid:select', function(e) {
    const data = e.detail.ZGData.data;
    csvData = Papa.unparse(data);
    console.log('--- exporting selected data ----', data, csvData);
  });

  // use built in anchor tag functionality to download the csv through a blob
  function _downloadCSV(fileName, data) {
    const aRef = document.querySelector('#downloadAnchor');
    var json = JSON.stringify(data),
        blob = new Blob([data], {type: "octet/stream"}),
        url = window.URL.createObjectURL(blob);
    aRef.href = url;
    aRef.download = fileName;
    aRef.click();
    window.URL.revokeObjectURL(url);
  }

  menuItem.addEventListener('click' ,function(e) {
    console.log('--- native menuitem click ---', e);
    if (csvData)_downloadCSV('selection.csv', csvData);
    else alert('You Waited too long to export. Please Select again.')
  });

}
</script>