- <!DOCTYPE html>
- <html class="zg-html">
-
- <head>
- <meta charset="utf-8">
- <title>ZingGrid: Blank Grid</title>
- <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
- <style>
- zing-grid[loading] {
- height: 142px;
- }
- </style>
- </head>
-
- <body>
- <zing-grid caption="VoltVoyage eBike Users">
- <zg-colgroup>
- <zg-column index="firstName" type="text"></zg-column>
- <zg-column index="lastName" type="text"></zg-column>
- <zg-column index="username" type="text"></zg-column>
- <zg-column index="email" type="email"></zg-column>
- <zg-column index="permissionLevel" type="number"></zg-column>
- <zg-column index="startDate" type="date"></zg-column>
- <zg-column type="custom" header="Copy Row">
- <zg-button button-border handler="copyRow" custom-tooltip="Copy the Row" custom-disabled="lockTopEmployees">Copy</zg-button>
- </zg-column>
- <zg-column header="Edit Row" type="button" type-button-icon="editrecord" type-button-tooltip="Edit Row" type-button-disabled="lockTopEmployees"></zg-column>
- </zg-colgroup>
- </zing-grid>
- <script>
- ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
- /**
- * The handler for the copy button, copies the current row
- * as a stringified JSON to the clipboard.
- * @param {Object} rowData An object of data from the current row
- */
- function copyRow(rowData) {
- let text = JSON.stringify(rowData);
- navigator.clipboard.writeText(text).then(() => {
- alert('Copied!');
- });
- }
- /**
- * Disables the row if the permission level is the max permission
- */
- function lockTopEmployees(rowData) {
- return rowData.permissionLevel === 5;
- }
- let zgRef = document.querySelector('zing-grid');
- zgRef.setData([{
- "firstName": "Alice",
- "lastName": "Smith",
- "username": "asmith",
- "email": "asmith@voltvoyage.com",
- "permissionLevel": 5,
- "startDate": "2022-01-22"
- },
- {
- "firstName": "Yong",
- "lastName": "Lee",
- "username": "ylee",
- "email": "ylee@voltvoyage.com",
- "permissionLevel": 1,
- "startDate": "2023-02-28"
- },
- {
- "firstName": "Michael",
- "lastName": "Brown",
- "username": "mbrown",
- "email": "mbrown@voltvoyage.com",
- "permissionLevel": 2,
- "startDate": "2023-03-10"
- },
- {
- "firstName": "Chris",
- "lastName": "Jones",
- "username": "cjones",
- "email": "cjones@voltvoyage.com",
- "permissionLevel": 1,
- "startDate": "2019-09-23"
- },
- {
- "firstName": "Bella",
- "lastName": "Rodriguez",
- "username": "brodriguez",
- "email": "brodriguez@voltvoyage.com",
- "permissionLevel": 2,
- "startDate": "2022-08-30"
- },
- {
- "firstName": "John",
- "lastName": "Doe",
- "username": "jdoe",
- "email": "jdoe@voltvoyage.com",
- "permissionLevel": 3,
- "startDate": "2021-07-14"
- },
- {
- "firstName": "Mark",
- "lastName": "Martinez",
- "username": "mmartinez",
- "email": "mmartinez@voltvoyage.com",
- "permissionLevel": 3,
- "startDate": "2021-05-17"
- },
- {
- "firstName": "Tina",
- "lastName": "Thompson",
- "username": "tthompson",
- "email": "tthompson@voltvoyage.com",
- "permissionLevel": 4,
- "startDate": "2020-12-12"
- },
- {
- "firstName": "Kim",
- "lastName": "Nguyen",
- "username": "knguyen",
- "email": "knguyen@voltvoyage.com",
- "permissionLevel": 5,
- "startDate": "2021-10-03"
- },
- {
- "firstName": "Laura",
- "lastName": "White",
- "username": "lwhite",
- "email": "lwhite@voltvoyage.com",
- "permissionLevel": 4,
- "startDate": "2020-11-05"
- }
- ]);
- </script>
- </body>
-
- </html>
- <!DOCTYPE html>
- <html class="zg-html">
-
- <head>
- <meta charset="utf-8">
- <title>ZingGrid: Blank Grid</title>
- <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
- </head>
-
- <body>
- <zing-grid caption="VoltVoyage eBike Users">
- <zg-colgroup>
- <zg-column index="firstName" type="text"></zg-column>
- <zg-column index="lastName" type="text"></zg-column>
- <zg-column index="username" type="text"></zg-column>
- <zg-column index="email" type="email"></zg-column>
- <zg-column index="permissionLevel" type="number"></zg-column>
- <zg-column index="startDate" type="date"></zg-column>
- <zg-column type="custom" header="Copy Row">
- <zg-button button-border handler="copyRow" custom-tooltip="Copy the Row" custom-disabled="lockTopEmployees">Copy</zg-button>
- </zg-column>
- <zg-column header="Edit Row" type="button" type-button-icon="editrecord" type-button-tooltip="Edit Row" type-button-disabled="lockTopEmployees"></zg-column>
- </zg-colgroup>
- </zing-grid>
- </body>
-
- </html>
- /**
- * The handler for the copy button, copies the current row
- * as a stringified JSON to the clipboard.
- * @param {Object} rowData An object of data from the current row
- */
- function copyRow(rowData) {
- let text = JSON.stringify(rowData);
- navigator.clipboard.writeText(text).then(() => {
- alert('Copied!');
- });
- }
- /**
- * Disables the row if the permission level is the max permission
- */
- function lockTopEmployees(rowData) {
- return rowData.permissionLevel === 5;
- }
- let zgRef = document.querySelector('zing-grid');
- zgRef.setData([{
- "firstName": "Alice",
- "lastName": "Smith",
- "username": "asmith",
- "email": "asmith@voltvoyage.com",
- "permissionLevel": 5,
- "startDate": "2022-01-22"
- },
- {
- "firstName": "Yong",
- "lastName": "Lee",
- "username": "ylee",
- "email": "ylee@voltvoyage.com",
- "permissionLevel": 1,
- "startDate": "2023-02-28"
- },
- {
- "firstName": "Michael",
- "lastName": "Brown",
- "username": "mbrown",
- "email": "mbrown@voltvoyage.com",
- "permissionLevel": 2,
- "startDate": "2023-03-10"
- },
- {
- "firstName": "Chris",
- "lastName": "Jones",
- "username": "cjones",
- "email": "cjones@voltvoyage.com",
- "permissionLevel": 1,
- "startDate": "2019-09-23"
- },
- {
- "firstName": "Bella",
- "lastName": "Rodriguez",
- "username": "brodriguez",
- "email": "brodriguez@voltvoyage.com",
- "permissionLevel": 2,
- "startDate": "2022-08-30"
- },
- {
- "firstName": "John",
- "lastName": "Doe",
- "username": "jdoe",
- "email": "jdoe@voltvoyage.com",
- "permissionLevel": 3,
- "startDate": "2021-07-14"
- },
- {
- "firstName": "Mark",
- "lastName": "Martinez",
- "username": "mmartinez",
- "email": "mmartinez@voltvoyage.com",
- "permissionLevel": 3,
- "startDate": "2021-05-17"
- },
- {
- "firstName": "Tina",
- "lastName": "Thompson",
- "username": "tthompson",
- "email": "tthompson@voltvoyage.com",
- "permissionLevel": 4,
- "startDate": "2020-12-12"
- },
- {
- "firstName": "Kim",
- "lastName": "Nguyen",
- "username": "knguyen",
- "email": "knguyen@voltvoyage.com",
- "permissionLevel": 5,
- "startDate": "2021-10-03"
- },
- {
- "firstName": "Laura",
- "lastName": "White",
- "username": "lwhite",
- "email": "lwhite@voltvoyage.com",
- "permissionLevel": 4,
- "startDate": "2020-11-05"
- }
- ]);