SHARE
TWEET

Untitled

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