<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Blank Grid</title>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
body {
background: #e6e6e6;
}
zing-grid[loading] {
height: 698px;
}
</style>
</head>
<body>
<zing-grid editor-controls layout-controls search pager page-size=10 src="https://jsdocs-9d00d.firebaseio.com/addressBook">
</zing-grid>
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
let myLang = {
lang: 'custom',
columntypes: {
editor: 'custom-Edit',
remover: 'custom-Delete',
selector: 'custom-Select',
},
context: {
copyCell: 'custom-Copy Cell',
pasteCell: 'custom-Paste Cell',
insertRecordLabel: 'custom-Insert New Record',
insertRecordHere: 'custom-Here',
insertRecordEnd: 'custom-End',
insertRecordStart: 'custom-Start',
deleteRow: 'custom-Delete row',
sortColumn: 'custom-Sort Column',
editCell: 'custom-Edit Cell',
editRow: 'custom-Edit Row',
selectCell: 'custom-Select Cell',
selectRow: 'custom-Select Row',
deselect: 'custom-Deselect',
previousPage: 'custom-Go to previous page',
nextPage: 'custom-Go to next page',
firstPage: 'custom-Go to first page',
lastPage: 'custom-Go to last page',
version: 'custom-ZingGrid Version',
save: 'custom-Save',
cancel: 'custom-Cancel',
},
date: {
shortMonth: ['custom-Jan', 'custom-Feb', 'custom-Mar', 'custom-Apr', 'custom-May', 'custom-Jun', 'custom-Jul', 'custom-Aug', 'custom-Sep', 'custom-Oct', 'custom-Nov', 'custom-Dec'],
longMonth: ['custom-January', 'custom-February', 'custom-March', 'custom-April', 'custom-May', 'custom-June', 'custom-July', 'custom-August', 'custom-September', 'custom-October', 'custom-November', 'custom-December'],
twoWeek: ['custom-Su', 'custom-Mo', 'custom-Tu', 'custom-We', 'custom-Th', 'custom-Fr', 'custom-Sa'],
shortWeek: ['custom-Sun', 'custom-Mon', 'custom-Tue', 'custom-Wed', 'custom-Thu', 'custom-Fri', 'custom-Sat'],
longWeek: ['custom-Sunday', 'custom-Monday', 'custom-Tuesday', 'custom-Wednesday', 'custom-Thursday', 'custom-Friday', 'custom-Saturday'],
am: 'custom-am',
pm: 'custom-pm',
startWeek: 0,
startYear: 6,
},
dialog: {
cancel: 'custom-Cancel',
close: 'custom-X',
confirm: 'custom-Confirm',
create: 'custom-Create',
delete: 'custom-Delete',
ok: 'custom-Ok',
recordCreate: {
label: 'custom-Create a new record',
successMsg: 'custom-Successfully added row!',
errorMsg: 'custom-The server encountered an error and the record could not be created.',
},
recordDelete: {
body: 'custom-Are you sure you want to delete this record?',
label: 'custom-Confirm delete',
successMsg: 'custom-Record removed successfully!',
errorMsg: 'custom-The server encountered an error and the record could not be deleted.',
},
recordInfo: {
label: 'custom-Record Info',
},
recordUpdate: {
label: 'custom-Update this record',
successMsg: 'custom-Record updated successfully',
errorMsg: 'custom-The server encountered an error and the record could not be updated.',
},
fieldUpdate: {
label: 'custom-Update this field',
successMsg: 'custom-Field updated successfully',
errorMsg: 'custom-The server encountered an error and the field could not be updated.',
},
removeXSelectedRows: {
body: 'custom-Are you sure you want to delete these records?',
label: 'custom-Remove %v record%p',
successMsg: 'custom-Records removed successfully!',
},
version: {
body: 'custom-',
label: 'custom-Current Version',
},
save: 'custom-Save',
},
iconSet: {
invalidVendor: 'custom-Value added to [%v] does not match allowed vendor list',
invalidVendorMethod: 'custom-Internal Error: There was an issue loading [%v="%v"] icons. Falling back to default icons.',
},
loadMask: {
title: 'custom-loading',
},
pagination: {
page: 'custom-Page',
pageOf: 'custom-of',
rows: 'custom-Rows',
},
tools: {
search: 'custom-Search',
selected: 'custom-%v Item%p Selected',
},
tooltip: {
layoutCard: 'custom-Card Layout',
layoutRow: 'custom-Row Layout',
recordCreate: 'custom-Insert Record',
reload: 'custom-Reload Grid',
},
};
window.addEventListener('load', () => {
// Register Language
ZingGrid.registerLanguage(myLang, 'custom');
// Set custom language to grid
let zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(() => {
zgRef.lang = 'custom';
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<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 editor-controls layout-controls search pager page-size=10 src="https://jsdocs-9d00d.firebaseio.com/addressBook">
</zing-grid>
</body>
</html>
body {
background: #e6e6e6;
}
let myLang = {
lang: 'custom',
columntypes: {
editor: 'custom-Edit',
remover: 'custom-Delete',
selector: 'custom-Select',
},
context: {
copyCell: 'custom-Copy Cell',
pasteCell: 'custom-Paste Cell',
insertRecordLabel: 'custom-Insert New Record',
insertRecordHere: 'custom-Here',
insertRecordEnd: 'custom-End',
insertRecordStart: 'custom-Start',
deleteRow: 'custom-Delete row',
sortColumn: 'custom-Sort Column',
editCell: 'custom-Edit Cell',
editRow: 'custom-Edit Row',
selectCell: 'custom-Select Cell',
selectRow: 'custom-Select Row',
deselect: 'custom-Deselect',
previousPage: 'custom-Go to previous page',
nextPage: 'custom-Go to next page',
firstPage: 'custom-Go to first page',
lastPage: 'custom-Go to last page',
version: 'custom-ZingGrid Version',
save: 'custom-Save',
cancel: 'custom-Cancel',
},
date: {
shortMonth: ['custom-Jan', 'custom-Feb', 'custom-Mar', 'custom-Apr', 'custom-May', 'custom-Jun', 'custom-Jul', 'custom-Aug', 'custom-Sep', 'custom-Oct', 'custom-Nov', 'custom-Dec'],
longMonth: ['custom-January', 'custom-February', 'custom-March', 'custom-April', 'custom-May', 'custom-June', 'custom-July', 'custom-August', 'custom-September', 'custom-October', 'custom-November', 'custom-December'],
twoWeek: ['custom-Su', 'custom-Mo', 'custom-Tu', 'custom-We', 'custom-Th', 'custom-Fr', 'custom-Sa'],
shortWeek: ['custom-Sun', 'custom-Mon', 'custom-Tue', 'custom-Wed', 'custom-Thu', 'custom-Fri', 'custom-Sat'],
longWeek: ['custom-Sunday', 'custom-Monday', 'custom-Tuesday', 'custom-Wednesday', 'custom-Thursday', 'custom-Friday', 'custom-Saturday'],
am: 'custom-am',
pm: 'custom-pm',
startWeek: 0,
startYear: 6,
},
dialog: {
cancel: 'custom-Cancel',
close: 'custom-X',
confirm: 'custom-Confirm',
create: 'custom-Create',
delete: 'custom-Delete',
ok: 'custom-Ok',
recordCreate: {
label: 'custom-Create a new record',
successMsg: 'custom-Successfully added row!',
errorMsg: 'custom-The server encountered an error and the record could not be created.',
},
recordDelete: {
body: 'custom-Are you sure you want to delete this record?',
label: 'custom-Confirm delete',
successMsg: 'custom-Record removed successfully!',
errorMsg: 'custom-The server encountered an error and the record could not be deleted.',
},
recordInfo: {
label: 'custom-Record Info',
},
recordUpdate: {
label: 'custom-Update this record',
successMsg: 'custom-Record updated successfully',
errorMsg: 'custom-The server encountered an error and the record could not be updated.',
},
fieldUpdate: {
label: 'custom-Update this field',
successMsg: 'custom-Field updated successfully',
errorMsg: 'custom-The server encountered an error and the field could not be updated.',
},
removeXSelectedRows: {
body: 'custom-Are you sure you want to delete these records?',
label: 'custom-Remove %v record%p',
successMsg: 'custom-Records removed successfully!',
},
version: {
body: 'custom-',
label: 'custom-Current Version',
},
save: 'custom-Save',
},
iconSet: {
invalidVendor: 'custom-Value added to [%v] does not match allowed vendor list',
invalidVendorMethod: 'custom-Internal Error: There was an issue loading [%v="%v"] icons. Falling back to default icons.',
},
loadMask: {
title: 'custom-loading',
},
pagination: {
page: 'custom-Page',
pageOf: 'custom-of',
rows: 'custom-Rows',
},
tools: {
search: 'custom-Search',
selected: 'custom-%v Item%p Selected',
},
tooltip: {
layoutCard: 'custom-Card Layout',
layoutRow: 'custom-Row Layout',
recordCreate: 'custom-Insert Record',
reload: 'custom-Reload Grid',
},
};
window.addEventListener('load', () => {
// Register Language
ZingGrid.registerLanguage(myLang, 'custom');
// Set custom language to grid
let zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(() => {
zgRef.lang = 'custom';
});
});