• 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: 277px;
    19. }
    20. </style>
    21. </head>
    22.  
    23. <body>
    24. <zing-grid caption="typeCheckboxLabel Demo">
    25. <zg-colgroup>
    26. <zg-column index="complete" type="checkbox" type-checkbox-label="Complete?"></zg-column>
    27. <zg-column index="todo"></zg-column>
    28. </zg-colgroup>
    29. <zg-data data='[
    30. {"complete": 1, "todo": "Wash dishes"},
    31. {"complete": 0, "todo": "Grocery Shop"},
    32. {"complete": 1, "todo": "Do Laundry"}
    33. ]'></zg-data>
    34. </zing-grid>
    35. <script>
    36. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    37. </script>
    38. </body>
    39.  
    40. </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. <zing-grid caption="typeCheckboxLabel Demo">
    12. <zg-colgroup>
    13. <zg-column index="complete" type="checkbox" type-checkbox-label="Complete?"></zg-column>
    14. <zg-column index="todo"></zg-column>
    15. </zg-colgroup>
    16. <zg-data data='[
    17. {"complete": 1, "todo": "Wash dishes"},
    18. {"complete": 0, "todo": "Grocery Shop"},
    19. {"complete": 1, "todo": "Do Laundry"}
    20. ]'></zg-data>
    21. </zing-grid>
    22. </body>
    23.  
    24. </html>
    1. html,
    2. body {
    3. height: 100%;
    4. width: 100%;
    5. margin: 0;
    6. padding: 0;
    7. }
    1.