• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Docs Getting Started</title>
    7. <!--Script Reference[1]-->
    8. <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9. <style>
    10. zing-grid[loading] {
    11. height: 128px;
    12. }
    13. </style>
    14. </head>
    15.  
    16. <body>
    17. <!--Grid Component Placement[2]-->
    18. <zing-grid caption="Data API Assignment" sort search layout="row" viewport-stop>
    19. </zing-grid>
    20. <script>
    21. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    22. // because this Javascript is injected into the document head
    23. window.addEventListener('load', () => {
    24. // content after DOM load
    25. const zgRef = document.querySelector('zing-grid');
    26. const data = [{
    27. name: 'Philip J. Fry',
    28. origin: 'Earth',
    29. },
    30. {
    31. name: 'Turanga Leela',
    32. origin: 'Earth',
    33. },
    34. {
    35. name: 'Bender Bending Rodriguez',
    36. origin: 'Earth',
    37. },
    38. {
    39. name: 'Amy Wong',
    40. origin: 'Mars',
    41. },
    42. {
    43. name: 'Doctor John Zoidberg',
    44. origin: 'Decapod 10',
    45. },
    46. {
    47. name: 'Lord Nibbler',
    48. origin: 'Earth',
    49. }
    50. ];
    51. zgRef.setData(data);
    52. });
    53. </script>
    54. </body>
    55.  
    56. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Docs Getting Started</title>
    7. <!--Script Reference[1]-->
    8. <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12. <!--Grid Component Placement[2]-->
    13. <zing-grid caption="Data API Assignment" sort search layout="row" viewport-stop>
    14. </zing-grid>
    15. </body>
    16.  
    17. </html>
    1.  
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4. // content after DOM load
    5. const zgRef = document.querySelector('zing-grid');
    6. const data = [{
    7. name: 'Philip J. Fry',
    8. origin: 'Earth',
    9. },
    10. {
    11. name: 'Turanga Leela',
    12. origin: 'Earth',
    13. },
    14. {
    15. name: 'Bender Bending Rodriguez',
    16. origin: 'Earth',
    17. },
    18. {
    19. name: 'Amy Wong',
    20. origin: 'Mars',
    21. },
    22. {
    23. name: 'Doctor John Zoidberg',
    24. origin: 'Decapod 10',
    25. },
    26. {
    27. name: 'Lord Nibbler',
    28. origin: 'Earth',
    29. }
    30. ];
    31. zgRef.setData(data);
    32. });