<!DOCTYPE html>
<html class="zg-html">
<head>
<meta charset="utf-8">
<title>Row Selection</title>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
zg-row {
cursor: pointer;
}
zing-grid>zg-button {
margin: 1rem;
}
zing-grid[loading] {
height: 206px;
}
</style>
</head>
<body>
<zing-grid caption="VoltVoyage eBike Employees">
<zg-button>Delete Selected Rows</zg-button>
<!-- Column with checkbox selector -->
<zg-column type="selector"></zg-column>
<!-- Data from users.json -->
<zg-column index="firstName"><!--test--></zg-column>
<zg-column index="lastName"></zg-column>
<zg-column index="username"></zg-column>
<zg-column index="email"></zg-column>
<zg-column index="permissionLevel"></zg-column>
<zg-column index="startDate"></zg-column>
</zing-grid>
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Grab the zing-grid
let zgRef = document.querySelector('zing-grid');
let selectedRows = [];
// Wait for it to load
zgRef.executeOnLoad(() => {
// First, insert the data
zgRef.setData([{
"firstName": "Alice",
"lastName": "Smith",
"username": "asmith",
"email": "asmith@voltvoyage.com",
"permissionLevel": 5,
"startDate": "2022-01-22",
"id": 0
},
{
"firstName": "Yong",
"lastName": "Lee",
"username": "ylee",
"email": "ylee@voltvoyage.com",
"permissionLevel": 1,
"startDate": "2023-02-28",
"id": 1
},
{
"firstName": "Michael",
"lastName": "Brown",
"username": "mbrown",
"email": "mbrown@voltvoyage.com",
"permissionLevel": 2,
"startDate": "2023-03-10",
"id": 2
},
{
"firstName": "Chris",
"lastName": "Jones",
"username": "cjones",
"email": "cjones@voltvoyage.com",
"permissionLevel": 1,
"startDate": "2019-09-23",
"id": 3
},
{
"firstName": "Bella",
"lastName": "Rodriguez",
"username": "brodriguez",
"email": "brodriguez@voltvoyage.com",
"permissionLevel": 2,
"startDate": "2022-08-30",
"id": 4
},
{
"firstName": "John",
"lastName": "Doe",
"username": "jdoe",
"email": "jdoe@voltvoyage.com",
"permissionLevel": 3,
"startDate": "2021-07-14",
"id": 5
},
{
"firstName": "Mark",
"lastName": "Martinez",
"username": "mmartinez",
"email": "mmartinez@voltvoyage.com",
"permissionLevel": 3,
"startDate": "2021-05-17",
"id": 6
},
{
"firstName": "Tina",
"lastName": "Thompson",
"username": "tthompson",
"email": "tthompson@voltvoyage.com",
"permissionLevel": 4,
"startDate": "2020-12-12",
"id": 7
},
{
"firstName": "Kim",
"lastName": "Nguyen",
"username": "knguyen",
"email": "knguyen@voltvoyage.com",
"permissionLevel": 5,
"startDate": "2021-10-03",
"id": 8
},
{
"firstName": "Laura",
"lastName": "White",
"username": "lwhite",
"email": "lwhite@voltvoyage.com",
"permissionLevel": 4,
"startDate": "2020-11-05",
"id": 9
}
]);
// Grab the delete button
let deleteBtn = document.querySelector('zing-grid>zg-button');
// Grab all of the rows in the body
let rows = [...zgRef.querySelectorAll('zg-body>zg-row')];
// Listen for clicks on the row itself and toggle row selection
rows.forEach((row, i) => {
row.addEventListener('click', () => {
// If the row is already selected, then deselect it
if (row.matches(':has(zg-checkbox[checked])')) {
zgRef.deselectRow(i);
selectedRows.splice(selectedRows.indexOf(i), 1);
} else {
zgRef.selectRow(i);
selectedRows.push(i);
}
});
});
// Delete selected rows when clicked
deleteBtn.addEventListener('click', () => {
zgRef.deselectRows();
selectedRows.sort((a, b) => b - a).forEach((selectedRow) => {
zgRef.removeRow('' + selectedRow, true);
});
selectedRows = [];
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html class="zg-html">
<head>
<meta charset="utf-8">
<title>Row Selection</title>
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>
<body>
<zing-grid caption="VoltVoyage eBike Employees">
<zg-button>Delete Selected Rows</zg-button>
<!-- Column with checkbox selector -->
<zg-column type="selector"></zg-column>
<!-- Data from users.json -->
<zg-column index="firstName"><!--test--></zg-column>
<zg-column index="lastName"></zg-column>
<zg-column index="username"></zg-column>
<zg-column index="email"></zg-column>
<zg-column index="permissionLevel"></zg-column>
<zg-column index="startDate"></zg-column>
</zing-grid>
</body>
</html>
zg-row {
cursor: pointer;
}
zing-grid>zg-button {
margin: 1rem;
}
// Grab the zing-grid
let zgRef = document.querySelector('zing-grid');
let selectedRows = [];
// Wait for it to load
zgRef.executeOnLoad(() => {
// First, insert the data
zgRef.setData([{
"firstName": "Alice",
"lastName": "Smith",
"username": "asmith",
"email": "asmith@voltvoyage.com",
"permissionLevel": 5,
"startDate": "2022-01-22",
"id": 0
},
{
"firstName": "Yong",
"lastName": "Lee",
"username": "ylee",
"email": "ylee@voltvoyage.com",
"permissionLevel": 1,
"startDate": "2023-02-28",
"id": 1
},
{
"firstName": "Michael",
"lastName": "Brown",
"username": "mbrown",
"email": "mbrown@voltvoyage.com",
"permissionLevel": 2,
"startDate": "2023-03-10",
"id": 2
},
{
"firstName": "Chris",
"lastName": "Jones",
"username": "cjones",
"email": "cjones@voltvoyage.com",
"permissionLevel": 1,
"startDate": "2019-09-23",
"id": 3
},
{
"firstName": "Bella",
"lastName": "Rodriguez",
"username": "brodriguez",
"email": "brodriguez@voltvoyage.com",
"permissionLevel": 2,
"startDate": "2022-08-30",
"id": 4
},
{
"firstName": "John",
"lastName": "Doe",
"username": "jdoe",
"email": "jdoe@voltvoyage.com",
"permissionLevel": 3,
"startDate": "2021-07-14",
"id": 5
},
{
"firstName": "Mark",
"lastName": "Martinez",
"username": "mmartinez",
"email": "mmartinez@voltvoyage.com",
"permissionLevel": 3,
"startDate": "2021-05-17",
"id": 6
},
{
"firstName": "Tina",
"lastName": "Thompson",
"username": "tthompson",
"email": "tthompson@voltvoyage.com",
"permissionLevel": 4,
"startDate": "2020-12-12",
"id": 7
},
{
"firstName": "Kim",
"lastName": "Nguyen",
"username": "knguyen",
"email": "knguyen@voltvoyage.com",
"permissionLevel": 5,
"startDate": "2021-10-03",
"id": 8
},
{
"firstName": "Laura",
"lastName": "White",
"username": "lwhite",
"email": "lwhite@voltvoyage.com",
"permissionLevel": 4,
"startDate": "2020-11-05",
"id": 9
}
]);
// Grab the delete button
let deleteBtn = document.querySelector('zing-grid>zg-button');
// Grab all of the rows in the body
let rows = [...zgRef.querySelectorAll('zg-body>zg-row')];
// Listen for clicks on the row itself and toggle row selection
rows.forEach((row, i) => {
row.addEventListener('click', () => {
// If the row is already selected, then deselect it
if (row.matches(':has(zg-checkbox[checked])')) {
zgRef.deselectRow(i);
selectedRows.splice(selectedRows.indexOf(i), 1);
} else {
zgRef.selectRow(i);
selectedRows.push(i);
}
});
});
// Delete selected rows when clicked
deleteBtn.addEventListener('click', () => {
zgRef.deselectRows();
selectedRows.sort((a, b) => b - a).forEach((selectedRow) => {
zgRef.removeRow('' + selectedRow, true);
});
selectedRows = [];
});
});