<!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: 172px;
}
</style>
</head>
<body>
<zing-grid caption="VoltVoyage eBike Users" batch-edit filter="inline" filterer>
<zg-column index="firstName" filterer="nameFilter"></zg-column>
<zg-column index="lastName" filterer="nameFilter"></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']);
window.nameFilter = {
afterInit(oDOMFilter) {
function forceNameCapitalization(e) {
// Let the user use modifiers without hinderence
let hasModifiers = e.shiftKey || e.metaKey || e.altKey || e.ctrlKey;
// Only modify standard letters
if (/^[a-zA-Z]$/i.test(e.key) && !hasModifiers) {
// Grab the new key since this will be a keydown event
let str = oDOMInput.value + e.key;
let firstChar = str.charAt(0).toUpperCase();
let otherChars = str.slice(1).toLowerCase();
oDOMInput.value = firstChar + otherChars;
// Prevent the browser from double adding a key since we already did that above
e.preventDefault();
}
}
let oDOMInput = oDOMFilter.querySelector('input ');
oDOMInput.addEventListener('keydown', forceNameCapitalization);
},
};
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" batch-edit filter="inline" filterer>
<zg-column index="firstName" filterer="nameFilter"></zg-column>
<zg-column index="lastName" filterer="nameFilter"></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>
window.nameFilter = {
afterInit(oDOMFilter) {
function forceNameCapitalization(e) {
// Let the user use modifiers without hinderence
let hasModifiers = e.shiftKey || e.metaKey || e.altKey || e.ctrlKey;
// Only modify standard letters
if (/^[a-zA-Z]$/i.test(e.key) && !hasModifiers) {
// Grab the new key since this will be a keydown event
let str = oDOMInput.value + e.key;
let firstChar = str.charAt(0).toUpperCase();
let otherChars = str.slice(1).toLowerCase();
oDOMInput.value = firstChar + otherChars;
// Prevent the browser from double adding a key since we already did that above
e.preventDefault();
}
}
let oDOMInput = oDOMFilter.querySelector('input ');
oDOMInput.addEventListener('keydown', forceNameCapitalization);
},
};
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"
}
]);