• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
    8.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     .caption-container {
    19.       display: flex;
    20.       justify-content: space-between;
    21.       flex-wrap: wrap;
    22.       align-items: baseline;
    23.     }
    24.  
    25.     zing-grid[loading] {
    26.       height: 168px;
    27.     }
    28.   </style>
    29. </head>
    30.  
    31. <body>
    32.   <h1>Lets Connect a Grid to a CSV on the Client</h1>
    33.   <p>In this example we will use the <a href="https://www.papaparse.com/docs#json-to-csv">papaparse</a> library.</p>
    34.   <p>You can click the following button to export the data back to csv and save it.</p>
    35.   <button onClick="_exportDataToCSV()">Export To CSV</button>
    36.   <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>
    37.  
    38.   <zing-grid pager page-size=15 selector sort context-menu="customMenu" editor>
    39.     <zg-caption>
    40.       <div class="caption-container">
    41.         <h2>CSV Export Demo Title</h2>
    42.         <button onClick="_exportDataToCSV()">Export To CSV</button>
    43.       </div>
    44.     </zg-caption>
    45.     <zg-colgroup>
    46.       <zg-column index="0" header="Year"></zg-column>
    47.       <!-- <zg-column index="1" header="IMDB"></zg-column> -->
    48.       <zg-column index="2" header="Title"></zg-column>
    49.       <!-- <zg-column index="3" header="Year"></zg-column>
    50.         <zg-column index="4" header="Budget"></zg-column>
    51.         <zg-column index="5" header="Budget"></zg-column> -->
    52.       <zg-column index="6" header="Budget" type="currency"></zg-column>
    53.       <zg-column index="7" header="Domestic Growth" type="currency"></zg-column>
    54.       <zg-column index="8" header="Internation Growth" type="number"></zg-column>
    55.       <!-- <zg-column index="9" header="Year"></zg-column>
    56.         <zg-column index="10" header="Year"></zg-column>
    57.         <zg-column index="11" header="Year"></zg-column>
    58.         <zg-column index="12" header="Year"></zg-column>
    59.         <zg-column index="13" header="Year"></zg-column>
    60.         <zg-column index="14" header="Year"></zg-column> -->
    61.     </zg-colgroup>
    62.     <zg-menu id="customMenu">
    63.       <zg-menu-item role="exportSelection">Export Selection</zg-menu-item>
    64.     </zg-menu>
    65.   </zing-grid>
    66.  
    67.   <!-- empty anchor tag for downloading -->
    68.   <a href="" id="downloadAnchor">&nbsp;</a>
    69.  
    70.   <!-- other script tags at the bottom of the page -->
    71.  
    72.   <script>
    73.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // function for exporting csv
    74.     function _exportDataToCSV() {
    75.       const data = zgRef.getData();
    76.       const csvData = Papa.unparse(data);
    77.       console.log('--- exporting data ----', data, csvData);
    78.       _downloadCSV('export-all.csv', csvData);
    79.     }
    80.  
    81.  
    82.     // use built in anchor tag functionality to download the csv through a blob
    83.     function _downloadCSV(fileName, data) {
    84.       const aRef = document.querySelector('#downloadAnchor');
    85.       let json = JSON.stringify(data),
    86.         blob = new Blob([data], {
    87.           type: "octet/stream"
    88.         }),
    89.         url = window.URL.createObjectURL(blob);
    90.       aRef.href = url;
    91.       aRef.download = fileName;
    92.       aRef.click();
    93.       window.URL.revokeObjectURL(url);
    94.     }
    95.  
    96.     // Javascript code to execute after DOM content
    97.     const menuItem = document.querySelector('zg-menu-item[role="exportSelection"]');
    98.     // global reference to zing-grid on page
    99.     const zgRef = document.querySelector('zing-grid');
    100.     let data = [];
    101.     let dataKeys = [];
    102.  
    103.  
    104.     // register event listener for grid selection
    105.     let csvData = null;
    106.     zgRef.addEventListener('grid:select', function(e) {
    107.       const data = e.detail.ZGData.data;
    108.       csvData = Papa.unparse(data);
    109.       console.log('--- exporting selected data ----', data, csvData);
    110.     });
    111.  
    112.     menuItem.addEventListener('click', function(e) {
    113.       console.log('--- native menuitem click ---', e);
    114.       if (csvData) _downloadCSV('selection.csv', csvData);
    115.       else alert('No cells selected. Please drag and select some cells to export.')
    116.     });
    117.  
    118.     window.addEventListener('load', () => {
    119.       // Parse local CSV file
    120.       Papa.parse('https://raw.githubusercontent.com/fivethirtyeight/data/master/bechdel/movies.csv', {
    121.         download: true, // url to retrieve CSV file
    122.         complete: function(results) {
    123.           console.log("Finished:", results);
    124.  
    125.           // if results came in correctly
    126.           if (results && results.data) {
    127.  
    128.             // lets push the results into our new array
    129.             // new format
    130.             for (let i = 1; i < results.data.length; i++) {
    131.               data.push(results.data[i]);
    132.               // render first page now
    133.               if (i === 15) zgRef.setData(data);
    134.             }
    135.  
    136.             // render rest of data after first page
    137.             setTimeout(function() {
    138.               zgRef.setData(data)
    139.             }, 500);
    140.           }
    141.  
    142.           // we could also just delete the first index
    143.           // which contains the header information
    144.         }
    145.       });
    146.     });
    147.   </script>
    148. </body>
    149.  
    150. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
    8.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <h1>Lets Connect a Grid to a CSV on the Client</h1>
    13.   <p>In this example we will use the <a href="https://www.papaparse.com/docs#json-to-csv">papaparse</a> library.</p>
    14.   <p>You can click the following button to export the data back to csv and save it.</p>
    15.   <button onClick="_exportDataToCSV()">Export To CSV</button>
    16.   <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>
    17.  
    18.   <zing-grid pager page-size=15 selector sort context-menu="customMenu" editor>
    19.     <zg-caption>
    20.       <div class="caption-container">
    21.         <h2>CSV Export Demo Title</h2>
    22.         <button onClick="_exportDataToCSV()">Export To CSV</button>
    23.       </div>
    24.     </zg-caption>
    25.     <zg-colgroup>
    26.       <zg-column index="0" header="Year"></zg-column>
    27.       <!-- <zg-column index="1" header="IMDB"></zg-column> -->
    28.       <zg-column index="2" header="Title"></zg-column>
    29.       <!-- <zg-column index="3" header="Year"></zg-column>
    30.         <zg-column index="4" header="Budget"></zg-column>
    31.         <zg-column index="5" header="Budget"></zg-column> -->
    32.       <zg-column index="6" header="Budget" type="currency"></zg-column>
    33.       <zg-column index="7" header="Domestic Growth" type="currency"></zg-column>
    34.       <zg-column index="8" header="Internation Growth" type="number"></zg-column>
    35.       <!-- <zg-column index="9" header="Year"></zg-column>
    36.         <zg-column index="10" header="Year"></zg-column>
    37.         <zg-column index="11" header="Year"></zg-column>
    38.         <zg-column index="12" header="Year"></zg-column>
    39.         <zg-column index="13" header="Year"></zg-column>
    40.         <zg-column index="14" header="Year"></zg-column> -->
    41.     </zg-colgroup>
    42.     <zg-menu id="customMenu">
    43.       <zg-menu-item role="exportSelection">Export Selection</zg-menu-item>
    44.     </zg-menu>
    45.   </zing-grid>
    46.  
    47.   <!-- empty anchor tag for downloading -->
    48.   <a href="" id="downloadAnchor">&nbsp;</a>
    49.  
    50.   <!-- other script tags at the bottom of the page -->
    51.  
    52. </body>
    53.  
    54. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .caption-container {
    10.   display: flex;
    11.   justify-content: space-between;
    12.   flex-wrap: wrap;
    13.   align-items: baseline;
    14. }
    1. // function for exporting csv
    2. function _exportDataToCSV() {
    3.   const data = zgRef.getData();
    4.   const csvData = Papa.unparse(data);
    5.   console.log('--- exporting data ----', data, csvData);
    6.   _downloadCSV('export-all.csv', csvData);
    7. }
    8.  
    9.  
    10. // use built in anchor tag functionality to download the csv through a blob
    11. function _downloadCSV(fileName, data) {
    12.   const aRef = document.querySelector('#downloadAnchor');
    13.   let json = JSON.stringify(data),
    14.     blob = new Blob([data], {
    15.       type: "octet/stream"
    16.     }),
    17.     url = window.URL.createObjectURL(blob);
    18.   aRef.href = url;
    19.   aRef.download = fileName;
    20.   aRef.click();
    21.   window.URL.revokeObjectURL(url);
    22. }
    23.  
    24. // Javascript code to execute after DOM content
    25. const menuItem = document.querySelector('zg-menu-item[role="exportSelection"]');
    26. // global reference to zing-grid on page
    27. const zgRef = document.querySelector('zing-grid');
    28. let data = [];
    29. let dataKeys = [];
    30.  
    31.  
    32. // register event listener for grid selection
    33. let csvData = null;
    34. zgRef.addEventListener('grid:select', function(e) {
    35.   const data = e.detail.ZGData.data;
    36.   csvData = Papa.unparse(data);
    37.   console.log('--- exporting selected data ----', data, csvData);
    38. });
    39.  
    40. menuItem.addEventListener('click', function(e) {
    41.   console.log('--- native menuitem click ---', e);
    42.   if (csvData) _downloadCSV('selection.csv', csvData);
    43.   else alert('No cells selected. Please drag and select some cells to export.')
    44. });
    45.  
    46. window.addEventListener('load', () => {
    47.   // Parse local CSV file
    48.   Papa.parse('https://raw.githubusercontent.com/fivethirtyeight/data/master/bechdel/movies.csv', {
    49.     download: true, // url to retrieve CSV file
    50.     complete: function(results) {
    51.       console.log("Finished:", results);
    52.  
    53.       // if results came in correctly
    54.       if (results && results.data) {
    55.  
    56.         // lets push the results into our new array
    57.         // new format
    58.         for (let i = 1; i < results.data.length; i++) {
    59.           data.push(results.data[i]);
    60.           // render first page now
    61.           if (i === 15) zgRef.setData(data);
    62.         }
    63.  
    64.         // render rest of data after first page
    65.         setTimeout(function() {
    66.           zgRef.setData(data)
    67.         }, 500);
    68.       }
    69.  
    70.       // we could also just delete the first index
    71.       // which contains the header information
    72.     }
    73.   });
    74. });