<!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"
}
]);