• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Blank Grid</title>
    7. <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. <style>
    9. zing-grid[loading] {
    10. height: 142px;
    11. }
    12. </style>
    13. </head>
    14.  
    15. <body>
    16. <zing-grid caption="VoltVoyage eBike Users">
    17. <zg-colgroup>
    18. <zg-column index="firstName" type="text"></zg-column>
    19. <zg-column index="lastName" type="text"></zg-column>
    20. <zg-column index="username" type="text"></zg-column>
    21. <zg-column index="email" type="email"></zg-column>
    22. <zg-column index="permissionLevel" type="number"></zg-column>
    23. <zg-column index="startDate" type="date"></zg-column>
    24. <zg-column type="custom" header="Copy Row">
    25. <zg-button button-border handler="copyRow" custom-tooltip="Copy the Row" custom-disabled="lockTopEmployees">Copy</zg-button>
    26. </zg-column>
    27. <zg-column header="Edit Row" type="button" type-button-icon="editrecord" type-button-tooltip="Edit Row" type-button-disabled="lockTopEmployees"></zg-column>
    28. </zg-colgroup>
    29. </zing-grid>
    30. <script>
    31. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    32. /**
    33. * The handler for the copy button, copies the current row
    34. * as a stringified JSON to the clipboard.
    35. * @param {Object} rowData An object of data from the current row
    36. */
    37. function copyRow(rowData) {
    38. let text = JSON.stringify(rowData);
    39. navigator.clipboard.writeText(text).then(() => {
    40. alert('Copied!');
    41. });
    42. }
    43. /**
    44. * Disables the row if the permission level is the max permission
    45. */
    46. function lockTopEmployees(rowData) {
    47. return rowData.permissionLevel === 5;
    48. }
    49. let zgRef = document.querySelector('zing-grid');
    50. zgRef.setData([{
    51. "firstName": "Alice",
    52. "lastName": "Smith",
    53. "username": "asmith",
    54. "email": "asmith@voltvoyage.com",
    55. "permissionLevel": 5,
    56. "startDate": "2022-01-22"
    57. },
    58. {
    59. "firstName": "Yong",
    60. "lastName": "Lee",
    61. "username": "ylee",
    62. "email": "ylee@voltvoyage.com",
    63. "permissionLevel": 1,
    64. "startDate": "2023-02-28"
    65. },
    66. {
    67. "firstName": "Michael",
    68. "lastName": "Brown",
    69. "username": "mbrown",
    70. "email": "mbrown@voltvoyage.com",
    71. "permissionLevel": 2,
    72. "startDate": "2023-03-10"
    73. },
    74. {
    75. "firstName": "Chris",
    76. "lastName": "Jones",
    77. "username": "cjones",
    78. "email": "cjones@voltvoyage.com",
    79. "permissionLevel": 1,
    80. "startDate": "2019-09-23"
    81. },
    82. {
    83. "firstName": "Bella",
    84. "lastName": "Rodriguez",
    85. "username": "brodriguez",
    86. "email": "brodriguez@voltvoyage.com",
    87. "permissionLevel": 2,
    88. "startDate": "2022-08-30"
    89. },
    90. {
    91. "firstName": "John",
    92. "lastName": "Doe",
    93. "username": "jdoe",
    94. "email": "jdoe@voltvoyage.com",
    95. "permissionLevel": 3,
    96. "startDate": "2021-07-14"
    97. },
    98. {
    99. "firstName": "Mark",
    100. "lastName": "Martinez",
    101. "username": "mmartinez",
    102. "email": "mmartinez@voltvoyage.com",
    103. "permissionLevel": 3,
    104. "startDate": "2021-05-17"
    105. },
    106. {
    107. "firstName": "Tina",
    108. "lastName": "Thompson",
    109. "username": "tthompson",
    110. "email": "tthompson@voltvoyage.com",
    111. "permissionLevel": 4,
    112. "startDate": "2020-12-12"
    113. },
    114. {
    115. "firstName": "Kim",
    116. "lastName": "Nguyen",
    117. "username": "knguyen",
    118. "email": "knguyen@voltvoyage.com",
    119. "permissionLevel": 5,
    120. "startDate": "2021-10-03"
    121. },
    122. {
    123. "firstName": "Laura",
    124. "lastName": "White",
    125. "username": "lwhite",
    126. "email": "lwhite@voltvoyage.com",
    127. "permissionLevel": 4,
    128. "startDate": "2020-11-05"
    129. }
    130. ]);
    131. </script>
    132. </body>
    133.  
    134. </html>
    1. <!DOCTYPE html>
    2. <html class="zg-html">
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid: Blank Grid</title>
    7. <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11. <zing-grid caption="VoltVoyage eBike Users">
    12. <zg-colgroup>
    13. <zg-column index="firstName" type="text"></zg-column>
    14. <zg-column index="lastName" type="text"></zg-column>
    15. <zg-column index="username" type="text"></zg-column>
    16. <zg-column index="email" type="email"></zg-column>
    17. <zg-column index="permissionLevel" type="number"></zg-column>
    18. <zg-column index="startDate" type="date"></zg-column>
    19. <zg-column type="custom" header="Copy Row">
    20. <zg-button button-border handler="copyRow" custom-tooltip="Copy the Row" custom-disabled="lockTopEmployees">Copy</zg-button>
    21. </zg-column>
    22. <zg-column header="Edit Row" type="button" type-button-icon="editrecord" type-button-tooltip="Edit Row" type-button-disabled="lockTopEmployees"></zg-column>
    23. </zg-colgroup>
    24. </zing-grid>
    25. </body>
    26.  
    27. </html>
    1.  
    1. /**
    2. * The handler for the copy button, copies the current row
    3. * as a stringified JSON to the clipboard.
    4. * @param {Object} rowData An object of data from the current row
    5. */
    6. function copyRow(rowData) {
    7. let text = JSON.stringify(rowData);
    8. navigator.clipboard.writeText(text).then(() => {
    9. alert('Copied!');
    10. });
    11. }
    12. /**
    13. * Disables the row if the permission level is the max permission
    14. */
    15. function lockTopEmployees(rowData) {
    16. return rowData.permissionLevel === 5;
    17. }
    18. let zgRef = document.querySelector('zing-grid');
    19. zgRef.setData([{
    20. "firstName": "Alice",
    21. "lastName": "Smith",
    22. "username": "asmith",
    23. "email": "asmith@voltvoyage.com",
    24. "permissionLevel": 5,
    25. "startDate": "2022-01-22"
    26. },
    27. {
    28. "firstName": "Yong",
    29. "lastName": "Lee",
    30. "username": "ylee",
    31. "email": "ylee@voltvoyage.com",
    32. "permissionLevel": 1,
    33. "startDate": "2023-02-28"
    34. },
    35. {
    36. "firstName": "Michael",
    37. "lastName": "Brown",
    38. "username": "mbrown",
    39. "email": "mbrown@voltvoyage.com",
    40. "permissionLevel": 2,
    41. "startDate": "2023-03-10"
    42. },
    43. {
    44. "firstName": "Chris",
    45. "lastName": "Jones",
    46. "username": "cjones",
    47. "email": "cjones@voltvoyage.com",
    48. "permissionLevel": 1,
    49. "startDate": "2019-09-23"
    50. },
    51. {
    52. "firstName": "Bella",
    53. "lastName": "Rodriguez",
    54. "username": "brodriguez",
    55. "email": "brodriguez@voltvoyage.com",
    56. "permissionLevel": 2,
    57. "startDate": "2022-08-30"
    58. },
    59. {
    60. "firstName": "John",
    61. "lastName": "Doe",
    62. "username": "jdoe",
    63. "email": "jdoe@voltvoyage.com",
    64. "permissionLevel": 3,
    65. "startDate": "2021-07-14"
    66. },
    67. {
    68. "firstName": "Mark",
    69. "lastName": "Martinez",
    70. "username": "mmartinez",
    71. "email": "mmartinez@voltvoyage.com",
    72. "permissionLevel": 3,
    73. "startDate": "2021-05-17"
    74. },
    75. {
    76. "firstName": "Tina",
    77. "lastName": "Thompson",
    78. "username": "tthompson",
    79. "email": "tthompson@voltvoyage.com",
    80. "permissionLevel": 4,
    81. "startDate": "2020-12-12"
    82. },
    83. {
    84. "firstName": "Kim",
    85. "lastName": "Nguyen",
    86. "username": "knguyen",
    87. "email": "knguyen@voltvoyage.com",
    88. "permissionLevel": 5,
    89. "startDate": "2021-10-03"
    90. },
    91. {
    92. "firstName": "Laura",
    93. "lastName": "White",
    94. "username": "lwhite",
    95. "email": "lwhite@voltvoyage.com",
    96. "permissionLevel": 4,
    97. "startDate": "2020-11-05"
    98. }
    99. ]);