SHARE
TWEET

Untitled

a guest Feb 25th, 2019 167 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta charset="utf-8">
  5.     <title>ZingGrid Demo</title>
  6.         <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
  7.         <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  8.     </head>
  9.     <body>
  10.     <h1>Lets Connect a Grid to a CSV on the Client</h1>
  11.     <p>In this example we will use the <a href="https://www.papaparse.com/docs#json-to-csv">papaparse</a> library.</p>
  12.     <p>You can click the following button to export the data back to csv and save it.</p>
  13.     <button onClick="_exportDataToCSV()">Export To CSV</button>
  14.     <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>
  15.  
  16.     <zing-grid
  17.      pager
  18.      page-size=15
  19.      selector
  20.      sorter
  21.      context-menu="customMenu"
  22.      editor>
  23.       <zg-caption>
  24.         <div class="caption-container">
  25.           <h2>CSV Export Demo Title</h2>
  26.           <button onClick="_exportDataToCSV()">Export To CSV</button>
  27.         </div>
  28.       </zg-caption>
  29.       <zg-colgroup>
  30.         <zg-column index="0" header="Year"></zg-column>
  31.         <!-- <zg-column index="1" header="IMDB"></zg-column> -->
  32.         <zg-column index="2" header="Title"></zg-column>
  33.         <!-- <zg-column index="3" header="Year"></zg-column>
  34.        <zg-column index="4" header="Budget"></zg-column>
  35.        <zg-column index="5" header="Budget"></zg-column> -->
  36.         <zg-column index="6" header="Budget" type="currency"></zg-column>
  37.         <zg-column index="7" header="Domestic Growth" type="currency"></zg-column>
  38.         <zg-column index="8" header="Internation Growth" type="number"></zg-column>
  39.         <!-- <zg-column index="9" header="Year"></zg-column>
  40.        <zg-column index="10" header="Year"></zg-column>
  41.        <zg-column index="11" header="Year"></zg-column>
  42.        <zg-column index="12" header="Year"></zg-column>
  43.        <zg-column index="13" header="Year"></zg-column>
  44.        <zg-column index="14" header="Year"></zg-column> -->
  45.       </zg-colgroup>
  46.       <zg-menu id="customMenu">
  47.         <zg-menuitem role="exportSelection">Export Selection</zg-menuitem>
  48.       </zg-menu>
  49.     </zing-grid>
  50.  
  51.     <!-- empty anchor tag for downloading -->
  52.     <a href="" id="downloadAnchor">&nbsp;</a>
  53.    
  54.     <!-- other script tags at the bottom of the page -->
  55.  
  56.     </body>
  57. </html>
  58.  
  59. <script >
  60.    
  61.   window.onload = function(){
  62.   const menuItem = document.querySelector('zg-menuitem[role="exportSelection"]');
  63.   // global reference to zing-grid on page
  64.   const zgRef = document.querySelector('zing-grid');
  65.   var data = [];
  66.   var dataKeys = [];
  67.  
  68.   // Parse local CSV file
  69.   Papa.parse('https://raw.githubusercontent.com/fivethirtyeight/data/master/bechdel/movies.csv', {
  70.     download: true, // url to retrieve CSV file
  71.     complete: function(results) {
  72.       console.log("Finished:", results);
  73.  
  74.       // if results came in correctly
  75.       if (results && results.data) {
  76.  
  77.         // lets push the results into our new array
  78.         // new format
  79.         for(var i=1; i < results.data.length; i++) {
  80.          data.push(results.data[i]);
  81.          // render first page now
  82.          if(i === 15) zgRef.setData(data);
  83.        }
  84.        // render rest of data after first page
  85.        setTimeout(function() {zgRef.setData(data)}, 500);
  86.      }
  87.  
  88.      // we could also just delete the first index
  89.      // which contains the header information
  90.    }
  91.  });
  92.  
  93.  // register event listener for grid selection
  94.  var csvData = null;
  95.  zgRef.addEventListener('grid:select', function(e) {
  96.    const data = e.detail.ZGData.data;
  97.    csvData = Papa.unparse(data);
  98.    console.log('--- exporting selected data ----', data, csvData);
  99.  });
  100.  
  101.  // function for exporting csv
  102.  function _exportDataToCSV() {
  103.    const data = zgRef.getData();
  104.    const csvData = Papa.unparse(data);
  105.    console.log('--- exporting data ----', data, csvData);
  106.    _downloadCSV('export-all.csv', csvData);
  107.  }
  108.  
  109.  // use built in anchor tag functionality to download the csv through a blob
  110.  function _downloadCSV(fileName, data) {
  111.    const aRef = document.querySelector('#downloadAnchor');
  112.    var json = JSON.stringify(data),
  113.        blob = new Blob([data], {type: "octet/stream"}),
  114.        url = window.URL.createObjectURL(blob);
  115.    aRef.href = url;
  116.    aRef.download = fileName;
  117.    aRef.click();
  118.    window.URL.revokeObjectURL(url);
  119.  }
  120.  
  121.  menuItem.addEventListener('click' ,function(e) {
  122.    console.log('--- native menuitem click ---', e);
  123.    if (csvData)_downloadCSV('selection.csv', csvData);
  124.    else alert('You Waited too long to export. Please Select again.')
  125.  });
  126.  
  127. }
  128. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top