<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h4 {
color: #fff;
font-weight: 500;
font-size: 1.15rem;
margin: 0.75rem 0;
text-align: center;
}
zing-grid {
border: 1px #e3e3e3 solid;
margin: 0 0 2rem;
}
button {
background-color: #1EA3ED;
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
font-size: 0.85rem;
font-weight: bold;
height: 2.5rem;
line-height: 1rem;
padding: 0.5rem 0.75rem;
text-transform: uppercase;
}
button:hover {
background-color: #00c6ff;
}
.container--controls {
background: #fff;
border: 1px solid #ededed;
border-radius: 5px;
}
.container--controls>div {
margin: 0 1rem 1rem 1rem;
}
.container--controls h3 {
border-bottom: 0.00624rem #e3e3e3 solid;
padding-bottom: 1rem;
text-align: center;
}
.container--flex {
display: flex;
flex-direction: column;
}
.container--shadow {
box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.13);
}
.container--size {
height: 100%;
width: 10rem;
}
.container--log,
#eventlog {
flex-basis: 100%;
}
.control__item {
display: flex;
flex-direction: column;
margin: 0 0 1rem;
font-size: 1rem;
font-weight: bold;
}
.control__item:last-child {
border-top: 0.00624rem #e3e3e3 solid;
margin-top: auto;
padding-top: 1rem;
}
.demo-container {
box-sizing: border-box;
display: grid;
grid-template-columns: 0fr 4fr;
grid-gap: 2rem;
padding: 2.5rem 3.5rem;
}
.eventlog {
background-color: #232c2f;
border: 1px solid #ededed;
border-radius: 6px;
min-height: 175px;
height: 100%;
overflow: hidden;
}
.eventlog__bar {
background-color: #e6e6e6;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: #3c4244;
font-size: 0.85rem;
font-weight: bold;
height: 1.5rem;
line-height: 1.5rem;
padding: 0.25rem 0.5rem;
text-align: center;
vertical-align: middle;
}
.eventlog__log {
color: #1FFE00;
font-size: 1.15rem;
height: 100%;
padding: 1rem;
white-space: pre-wrap;
word-wrap: break-word;
}
.eventlog__minimize {
border-radius: 1rem;
cursor: pointer;
float: left;
fill: #00394B;
font-size: 0.5rem;
height: 1.2rem;
line-height: 1.2rem;
margin-top: 0.2rem;
width: 1.2rem;
}
.eventlog__minimize:hover {
fill: #778C91;
}
.eventlog__title {
padding-right: 1.7rem;
}
.control__item input[type="text"] {
border: 2px solid rgb(226, 226, 226);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
color: rgb(0, 55, 73);
height: 2.25rem;
font-size: 0.85rem;
font-weight: 600;
padding: 0 0.75rem;
}
#reset-grid {
background-color: #DA205B;
}
#reset-grid:hover {
background-color: #E980A4;
}
@media screen and (max-width:1080px) {
#eventlog {
height: 170px;
}
.container--controls {
grid-column: 1 / span 4;
grid-row: 1;
min-width: 100%;
}
.container--size {
width: inherit;
}
.container {
display: grid;
grid-column: 1 / span 4;
}
input {
max-width: 100%;
}
}
zing-grid[loading] {
height: 360px;
}
</style>
</head>
<body>
<div class="demo-container">
<div class="container container--controls container--shadow">
<!-- caption controls -->
<div class="container--size container--flex">
<h3>Caption API Methods</h3>
<div class="control__item">
<button id="get-caption">Get Caption</button>
</div>
<div class="control__item">
<label for="set-caption">Set Caption</label>
<input type="text" name="set-caption" id="set-caption">
</div>
<div class="control__item">
<button id="reset-grid">Reset Grid/Log</button>
</div>
</div>
</div>
<div class="container container--flex">
<h4>Live demo</h4>
<!-- grid container -->
<div class="container container--demo">
<zing-grid class="container--shadow" id="myGrid" theme="default" caption="Meet The Doe Family" layout="row" data='[
{
"firstName": "John",
"lastName": "Doe",
"age": 45
},
{
"firstName": "Jane",
"lastName": "Doe",
"age": 44
},
{
"firstName": "John Jr.",
"lastName": "Doe",
"age": 15
},
{
"firstName": "Jane Jr.",
"lastName": "Doe",
"age": 13
}
]'></zing-grid>
</div>
<!-- log container -->
<div class="container container--log container--flex">
<div class="eventlog container--shadow">
<div class="eventlog__bar">
<svg class="eventlog__minimize" width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Desktop-(1400px)" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Artboard" transform="translate(-2383.000000, -1404.000000)">
<g id="Group-3" transform="translate(2383.000000, 1404.000000)">
<circle id="Oval" cx="27" cy="27" r="27"></circle>
<g id="collapse-two-arrows-diagonal-symbol" transform="translate(13.000000, 13.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#FFFFFF">
<path d="M11.777317,16.2995357 L3.73773039,16.2995357 C3.24245588,16.2995357 2.8413366,16.6994009 2.8413366,17.1934915 C2.8413366,17.6866808 3.24245588,18.0873525 3.73773039,18.0873525 L9.67756536,18.0873525 L0,27.7361167 L1.26761275,29 L10.9351797,19.3601555 L10.9071275,25.2348716 C10.9071275,25.7280608 11.3082467,26.1287326 11.8035212,26.1287326 C12.2987958,26.1287326 12.699915,25.7289623 12.699915,25.2348716 L12.699915,17.1924952 C12.699915,16.9277529 12.5903595,16.7137767 12.4165016,16.5668874 C12.2526422,16.403772 12.0271814,16.2995357 11.777317,16.2995357 Z M25.2632173,10.9126 L19.3233824,10.9126 L29,1.26378845 L27.7323399,0 L18.0656732,9.63974962 L18.0937729,3.76503347 C18.0937729,3.27184426 17.6926536,2.87112506 17.1973791,2.87112506 C16.7021046,2.87112506 16.3009853,3.27094281 16.3009853,3.76503347 L16.3009853,11.8074099 C16.3009853,12.0721522 16.4105408,12.286081 16.583451,12.4320688 C16.7464101,12.597082 16.971018,12.7013183 17.2218301,12.7013183 L25.2613693,12.7013183 C25.7566438,12.7013183 26.1578105,12.3015006 26.1578105,11.8074099 C26.1586634,11.3133192 25.7575441,10.9126 25.2632173,10.9126 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
<span class="eventlog__title">Console</span>
</div>
<pre class="eventlog__log"></pre>
</div>
</div>
</div>
</div> <!-- end demo container -->
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // GLOBAL REFERENCES
const zingGridRef = document.querySelector('#myGrid');
const eventLogRef = document.querySelector('.eventlog__log');
const resetGridRef = document.querySelector('#reset-grid');
// caption section
const getCaptionRef = document.querySelector('#get-caption');
const setCaptionRef = document.querySelector('#set-caption');
/*
* @descrption clear current event log header and text
*/
const _clearEventLog = () => {
if (eventLogRef) eventLogRef.innerHTML = '';
}
/**
* @description used as replace param in JSON.stringify
*/
function censor(key, value) {
if (typeof(value) == "object") {
return undefined;
}
return value;
}
/*
* @description format data to be displayed in the event box
* @param {*} logData - data to log on the screen
* @param {String} [header] - text to define what is being shown
*/
const _logCustomEvent = (logData, code) => {
if (eventLogRef) {
_clearEventLog();
if (code) {
eventLogRef.innerHTML += `${code}`;
}
if (logData) {
var stringify = JSON.stringify(logData, censor, 2);
if (stringify) {
eventLogRef.innerHTML += stringify;
} else {
eventLogRef.innerHTML += '{{' + logData + '}}';
}
}
}
}
/*
* @description resets grid to default and clears log
*/
const _resetGrid = () => {
var inputs = document.querySelectorAll('.control__item input[type="text"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = '';
}
if (zingGridRef) {
zingGridRef.setCaption('Meet The Doe Family');
_clearEventLog();
}
}
/*
* @description get the current pageSize
*/
const _getCaption = () => {
if (zingGridRef) _logCustomEvent(zingGridRef.getCaption(), '>>> myGrid.getCaption();\n\n');
}
/*
* @description set the grid caption value
* @params {Event} e - native browser 'change' event
*/
const _setCaption = (e) => {
const mCaptionValue = e.target.value;
if (zingGridRef) zingGridRef.setCaption(mCaptionValue);
_logCustomEvent(null, '>>> myGrid.setCaption("' + mCaptionValue + '");')
}
// assign event listeners for inputs
// -----------------------------------
if (resetGridRef) resetGridRef.addEventListener('click', _resetGrid);
// caption events
if (setCaptionRef) setCaptionRef.addEventListener('keyup', _setCaption);
if (getCaptionRef) getCaptionRef.addEventListener('click', _getCaption);
_clearEventLog();
// minimize event for console
const _minimizeLog = () => {
var consoleLog = document.querySelector('.eventlog');
var consoleStyle = window.getComputedStyle(consoleLog, null);
if (consoleStyle['minHeight'] === '0px') {
consoleLog.style.height = '100%';
consoleLog.style.minHeight = '175px';
} else {
consoleLog.style.height = '2rem';
consoleLog.style.minHeight = '0px';
}
}
const consoleMinimize = document.querySelector('.eventlog__minimize');
if (consoleMinimize) consoleMinimize.addEventListener('click', _minimizeLog);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>
<body>
<div class="demo-container">
<div class="container container--controls container--shadow">
<!-- caption controls -->
<div class="container--size container--flex">
<h3>Caption API Methods</h3>
<div class="control__item">
<button id="get-caption">Get Caption</button>
</div>
<div class="control__item">
<label for="set-caption">Set Caption</label>
<input type="text" name="set-caption" id="set-caption">
</div>
<div class="control__item">
<button id="reset-grid">Reset Grid/Log</button>
</div>
</div>
</div>
<div class="container container--flex">
<h4>Live demo</h4>
<!-- grid container -->
<div class="container container--demo">
<zing-grid class="container--shadow" id="myGrid" theme="default" caption="Meet The Doe Family" layout="row" data='[
{
"firstName": "John",
"lastName": "Doe",
"age": 45
},
{
"firstName": "Jane",
"lastName": "Doe",
"age": 44
},
{
"firstName": "John Jr.",
"lastName": "Doe",
"age": 15
},
{
"firstName": "Jane Jr.",
"lastName": "Doe",
"age": 13
}
]'></zing-grid>
</div>
<!-- log container -->
<div class="container container--log container--flex">
<div class="eventlog container--shadow">
<div class="eventlog__bar">
<svg class="eventlog__minimize" width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Desktop-(1400px)" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Artboard" transform="translate(-2383.000000, -1404.000000)">
<g id="Group-3" transform="translate(2383.000000, 1404.000000)">
<circle id="Oval" cx="27" cy="27" r="27"></circle>
<g id="collapse-two-arrows-diagonal-symbol" transform="translate(13.000000, 13.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#FFFFFF">
<path d="M11.777317,16.2995357 L3.73773039,16.2995357 C3.24245588,16.2995357 2.8413366,16.6994009 2.8413366,17.1934915 C2.8413366,17.6866808 3.24245588,18.0873525 3.73773039,18.0873525 L9.67756536,18.0873525 L0,27.7361167 L1.26761275,29 L10.9351797,19.3601555 L10.9071275,25.2348716 C10.9071275,25.7280608 11.3082467,26.1287326 11.8035212,26.1287326 C12.2987958,26.1287326 12.699915,25.7289623 12.699915,25.2348716 L12.699915,17.1924952 C12.699915,16.9277529 12.5903595,16.7137767 12.4165016,16.5668874 C12.2526422,16.403772 12.0271814,16.2995357 11.777317,16.2995357 Z M25.2632173,10.9126 L19.3233824,10.9126 L29,1.26378845 L27.7323399,0 L18.0656732,9.63974962 L18.0937729,3.76503347 C18.0937729,3.27184426 17.6926536,2.87112506 17.1973791,2.87112506 C16.7021046,2.87112506 16.3009853,3.27094281 16.3009853,3.76503347 L16.3009853,11.8074099 C16.3009853,12.0721522 16.4105408,12.286081 16.583451,12.4320688 C16.7464101,12.597082 16.971018,12.7013183 17.2218301,12.7013183 L25.2613693,12.7013183 C25.7566438,12.7013183 26.1578105,12.3015006 26.1578105,11.8074099 C26.1586634,11.3133192 25.7575441,10.9126 25.2632173,10.9126 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
<span class="eventlog__title">Console</span>
</div>
<pre class="eventlog__log"></pre>
</div>
</div>
</div>
</div> <!-- end demo container -->
</body>
</html>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h4 {
color: #fff;
font-weight: 500;
font-size: 1.15rem;
margin: 0.75rem 0;
text-align: center;
}
zing-grid {
border: 1px #e3e3e3 solid;
margin: 0 0 2rem;
}
button {
background-color: #1EA3ED;
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
font-size: 0.85rem;
font-weight: bold;
height: 2.5rem;
line-height: 1rem;
padding: 0.5rem 0.75rem;
text-transform: uppercase;
}
button:hover {
background-color: #00c6ff;
}
.container--controls {
background: #fff;
border: 1px solid #ededed;
border-radius: 5px;
}
.container--controls>div {
margin: 0 1rem 1rem 1rem;
}
.container--controls h3 {
border-bottom: 0.00624rem #e3e3e3 solid;
padding-bottom: 1rem;
text-align: center;
}
.container--flex {
display: flex;
flex-direction: column;
}
.container--shadow {
box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.13);
}
.container--size {
height: 100%;
width: 10rem;
}
.container--log,
#eventlog {
flex-basis: 100%;
}
.control__item {
display: flex;
flex-direction: column;
margin: 0 0 1rem;
font-size: 1rem;
font-weight: bold;
}
.control__item:last-child {
border-top: 0.00624rem #e3e3e3 solid;
margin-top: auto;
padding-top: 1rem;
}
.demo-container {
box-sizing: border-box;
display: grid;
grid-template-columns: 0fr 4fr;
grid-gap: 2rem;
padding: 2.5rem 3.5rem;
}
.eventlog {
background-color: #232c2f;
border: 1px solid #ededed;
border-radius: 6px;
min-height: 175px;
height: 100%;
overflow: hidden;
}
.eventlog__bar {
background-color: #e6e6e6;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: #3c4244;
font-size: 0.85rem;
font-weight: bold;
height: 1.5rem;
line-height: 1.5rem;
padding: 0.25rem 0.5rem;
text-align: center;
vertical-align: middle;
}
.eventlog__log {
color: #1FFE00;
font-size: 1.15rem;
height: 100%;
padding: 1rem;
white-space: pre-wrap;
word-wrap: break-word;
}
.eventlog__minimize {
border-radius: 1rem;
cursor: pointer;
float: left;
fill: #00394B;
font-size: 0.5rem;
height: 1.2rem;
line-height: 1.2rem;
margin-top: 0.2rem;
width: 1.2rem;
}
.eventlog__minimize:hover {
fill: #778C91;
}
.eventlog__title {
padding-right: 1.7rem;
}
.control__item input[type="text"] {
border: 2px solid rgb(226, 226, 226);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
color: rgb(0, 55, 73);
height: 2.25rem;
font-size: 0.85rem;
font-weight: 600;
padding: 0 0.75rem;
}
#reset-grid {
background-color: #DA205B;
}
#reset-grid:hover {
background-color: #E980A4;
}
@media screen and (max-width:1080px) {
#eventlog {
height: 170px;
}
.container--controls {
grid-column: 1 / span 4;
grid-row: 1;
min-width: 100%;
}
.container--size {
width: inherit;
}
.container {
display: grid;
grid-column: 1 / span 4;
}
input {
max-width: 100%;
}
}
// GLOBAL REFERENCES
const zingGridRef = document.querySelector('#myGrid');
const eventLogRef = document.querySelector('.eventlog__log');
const resetGridRef = document.querySelector('#reset-grid');
// caption section
const getCaptionRef = document.querySelector('#get-caption');
const setCaptionRef = document.querySelector('#set-caption');
/*
* @descrption clear current event log header and text
*/
const _clearEventLog = () => {
if (eventLogRef) eventLogRef.innerHTML = '';
}
/**
* @description used as replace param in JSON.stringify
*/
function censor(key, value) {
if (typeof(value) == "object") {
return undefined;
}
return value;
}
/*
* @description format data to be displayed in the event box
* @param {*} logData - data to log on the screen
* @param {String} [header] - text to define what is being shown
*/
const _logCustomEvent = (logData, code) => {
if (eventLogRef) {
_clearEventLog();
if (code) {
eventLogRef.innerHTML += `${code}`;
}
if (logData) {
var stringify = JSON.stringify(logData, censor, 2);
if (stringify) {
eventLogRef.innerHTML += stringify;
} else {
eventLogRef.innerHTML += '{{' + logData + '}}';
}
}
}
}
/*
* @description resets grid to default and clears log
*/
const _resetGrid = () => {
var inputs = document.querySelectorAll('.control__item input[type="text"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = '';
}
if (zingGridRef) {
zingGridRef.setCaption('Meet The Doe Family');
_clearEventLog();
}
}
/*
* @description get the current pageSize
*/
const _getCaption = () => {
if (zingGridRef) _logCustomEvent(zingGridRef.getCaption(), '>>> myGrid.getCaption();\n\n');
}
/*
* @description set the grid caption value
* @params {Event} e - native browser 'change' event
*/
const _setCaption = (e) => {
const mCaptionValue = e.target.value;
if (zingGridRef) zingGridRef.setCaption(mCaptionValue);
_logCustomEvent(null, '>>> myGrid.setCaption("' + mCaptionValue + '");')
}
// assign event listeners for inputs
// -----------------------------------
if (resetGridRef) resetGridRef.addEventListener('click', _resetGrid);
// caption events
if (setCaptionRef) setCaptionRef.addEventListener('keyup', _setCaption);
if (getCaptionRef) getCaptionRef.addEventListener('click', _getCaption);
_clearEventLog();
// minimize event for console
const _minimizeLog = () => {
var consoleLog = document.querySelector('.eventlog');
var consoleStyle = window.getComputedStyle(consoleLog, null);
if (consoleStyle['minHeight'] === '0px') {
consoleLog.style.height = '100%';
consoleLog.style.minHeight = '175px';
} else {
consoleLog.style.height = '2rem';
consoleLog.style.minHeight = '0px';
}
}
const consoleMinimize = document.querySelector('.eventlog__minimize');
if (consoleMinimize) consoleMinimize.addEventListener('click', _minimizeLog);