Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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"> </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 = [];
- // 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);
- });
- // 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);
- }
- // 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement