• 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/zinggrid.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="XML Data Source">
    26. <zg-data>
    27. <zg-param name="recordPath" value="data.person"></zg-param>
    28. <zg-param name="responseType" value="text/xml"></zg-param>
    29. </zg-data>
    30. </zing-grid>
    31.  
    32. <script>
    33. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    34. let gridData = `<data>
    35. <person>
    36. <first><![CDATA[Maria]]></first>
    37. <last><![CDATA[John]]></last>
    38. <number><![CDATA[123]]></number>
    39. </person>
    40. <person>
    41. <first><![CDATA[David]]></first>
    42. <last><![CDATA[Smith]]></last>
    43. <number><![CDATA[456]]></number>
    44. </person>
    45. <person>
    46. <first><![CDATA[Felicity]]></first>
    47. <last><![CDATA[Snow]]></last>
    48. <number><![CDATA[789]]></number>
    49. </person>
    50. </data>`;
    51.  
    52. window.addEventListener('load', () => {
    53. let zgRef = document.querySelector('zing-grid');
    54. zgRef.executeOnLoad(() => {
    55. zgRef.data = gridData;
    56. });
    57. });
    58. </script>
    59. </body>
    60.  
    61. </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/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.  
    12. <zing-grid caption="XML Data Source">
    13. <zg-data>
    14. <zg-param name="recordPath" value="data.person"></zg-param>
    15. <zg-param name="responseType" value="text/xml"></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 = `<data>
    2. <person>
    3. <first><![CDATA[Maria]]></first>
    4. <last><![CDATA[John]]></last>
    5. <number><![CDATA[123]]></number>
    6. </person>
    7. <person>
    8. <first><![CDATA[David]]></first>
    9. <last><![CDATA[Smith]]></last>
    10. <number><![CDATA[456]]></number>
    11. </person>
    12. <person>
    13. <first><![CDATA[Felicity]]></first>
    14. <last><![CDATA[Snow]]></last>
    15. <number><![CDATA[789]]></number>
    16. </person>
    17. </data>`;
    18.  
    19. window.addEventListener('load', () => {
    20. let zgRef = document.querySelector('zing-grid');
    21. zgRef.executeOnLoad(() => {
    22. zgRef.data = gridData;
    23. });
    24. });