• 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://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. <style>
    9. html,
    10. body {
    11. height: 100%;
    12. width: 100%;
    13. margin: 0;
    14. padding: 0;
    15. }
    16.  
    17. zing-grid[loading] {
    18. height: 142px;
    19. }
    20. </style>
    21. </head>
    22.  
    23. <body>
    24.  
    25. <zing-grid caption="CSV Data Source">
    26. <zg-data>
    27. <zg-param name="csvHeader" value='true'></zg-param>
    28. <zg-param name="responseType" value='text/csv'></zg-param>
    29. </zg-data>
    30. </zing-grid>
    31.  
    32. <script>
    33. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    34. let gridData = `First,Last,Number
    35. Maria,John,123
    36. David,Smith,456
    37. Felicity,Snow,789`;
    38.  
    39. window.addEventListener('load', () => {
    40. let zgRef = document.querySelector('zing-grid');
    41. zgRef.executeOnLoad(() => {
    42. zgRef.data = gridData;
    43. });
    44. });
    45. </script>
    46. </body>
    47.  
    48. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid Demo</title>
    7. <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.  
    12. <zing-grid caption="CSV Data Source">
    13. <zg-data>
    14. <zg-param name="csvHeader" value='true'></zg-param>
    15. <zg-param name="responseType" value='text/csv'></zg-param>
    16. </zg-data>
    17. </zing-grid>
    18.  
    19. </body>
    20.  
    21. </html>
    1. html,
    2. body {
    3. height: 100%;
    4. width: 100%;
    5. margin: 0;
    6. padding: 0;
    7. }
    1. let gridData = `First,Last,Number
    2. Maria,John,123
    3. David,Smith,456
    4. Felicity,Snow,789`;
    5.  
    6. window.addEventListener('load', () => {
    7. let zgRef = document.querySelector('zing-grid');
    8. zgRef.executeOnLoad(() => {
    9. zgRef.data = gridData;
    10. });
    11. });