<!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>
/**
* toggle container just holds a relative position
* since we are going to stack the grids on top of
* one another */
.toggle-container {
position: relative;
}
.zg-body button {
text-align: center;
background: #07C;
color: #FFF;
cursor: pointer;
border-radius: 3px;
font-size: 0.85rem;
padding: 5px 20px;
cursor: pointer;
margin: 15px 0 15px 15px;
position: relative;
}
button:hover {
background: #1b6ead;
}
zing-grid {
/* make sure bottom grid is not interactive */
visibility: hidden;
pointer-events: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all 0.35s linear;
}
zing-grid.active {
visibility: visible;
pointer-events: initial;
opacity: 1;
}
/* we target zg-body first so we don't highlight the header cells */
zg-body zg-row {
cursor: pointer;
}
zing-grid[loading] {
height: 450px;
}
</style>
</head>
<body class="zg-body">
<div class="toggle-container">
<zing-grid id="mainGrid" class="active" caption="Fortune 500 Companies Drilldown (click on row for quarterly sales)">
<zg-data data='[
{
"company": "Walmart",
"stockPrice": 84.54,
"quarterlySales": [123.18, 136.27, null, null],
"priceSuffix": "Billions"
},
{
"company": "Berkshire Hathaway",
"stockPrice": 298300,
"quarterlySales": [133.18, 136.27, null, null],
"priceSuffix": "Billions"
},
{
"company": "Apple",
"stockPrice": 184.22,
"quarterlySales": [153.68, 116.62, null, null],
"priceSuffix": "Billions"
},
{
"company": "Exxon Mobil",
"stockPrice": 84.54,
"quarterlySales": [123.18, 136.27, null, null],
"priceSuffix": "Billions"
}
]'></zg-data>
<zg-colgroup>
<zg-column index="company"></zg-column>
<zg-column index="stockPrice" type="currency"></zg-column>
</zg-colgroup>
</zing-grid>
<zing-grid id="childGrid">
<zg-caption>
<span id="childCaptionText">Default Text</span>
<button onClick="_toggleGrids()"><< Back</button>
</zg-caption>
<zg-colgroup>
<zg-column index="q1"></zg-column>
<zg-column index="q2"></zg-column>
<zg-column index="q3"></zg-column>
<zg-column index="q4"></zg-column>
</zg-colgroup>
</zing-grid>
</div>
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
/**
* @description function to toggle the active class for both grids
*/
function _toggleGrids() {
mainGrid.classList.toggle('active');
childGrid.classList.toggle('active');
}
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// references to grids
const mainGrid = document.querySelector('#mainGrid');
const childGrid = document.querySelector('#childGrid');
// add event listener for card/row click
mainGrid.addEventListener('record:click', function(e) {
console.log(e.detail.ZGData);
// cancel if its a header click
if (e.detail.ZGData.isHeader) {
return;
}
const zgData = e.detail.ZGData.data;
// set up datastructure for childGrid
const childData = [{
q1: zgData.quarterlySales[0],
q2: zgData.quarterlySales[1],
q3: zgData.quarterlySales[2] || 'N/A',
q4: zgData.quarterlySales[3] || 'N/A'
}];
// set caption
document.getElementById('childCaptionText').textContent = `${zgData.company} 2018 Sales in ${zgData.priceSuffix}`;
// set data for childGrid
childGrid.setData(childData);
// update child grid data
_toggleGrids(); // toggle grids
});
});
</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 class="zg-body">
<div class="toggle-container">
<zing-grid id="mainGrid" class="active" caption="Fortune 500 Companies Drilldown (click on row for quarterly sales)">
<zg-data data='[
{
"company": "Walmart",
"stockPrice": 84.54,
"quarterlySales": [123.18, 136.27, null, null],
"priceSuffix": "Billions"
},
{
"company": "Berkshire Hathaway",
"stockPrice": 298300,
"quarterlySales": [133.18, 136.27, null, null],
"priceSuffix": "Billions"
},
{
"company": "Apple",
"stockPrice": 184.22,
"quarterlySales": [153.68, 116.62, null, null],
"priceSuffix": "Billions"
},
{
"company": "Exxon Mobil",
"stockPrice": 84.54,
"quarterlySales": [123.18, 136.27, null, null],
"priceSuffix": "Billions"
}
]'></zg-data>
<zg-colgroup>
<zg-column index="company"></zg-column>
<zg-column index="stockPrice" type="currency"></zg-column>
</zg-colgroup>
</zing-grid>
<zing-grid id="childGrid">
<zg-caption>
<span id="childCaptionText">Default Text</span>
<button onClick="_toggleGrids()"><< Back</button>
</zg-caption>
<zg-colgroup>
<zg-column index="q1"></zg-column>
<zg-column index="q2"></zg-column>
<zg-column index="q3"></zg-column>
<zg-column index="q4"></zg-column>
</zg-colgroup>
</zing-grid>
</div>
</body>
</html>
/**
* toggle container just holds a relative position
* since we are going to stack the grids on top of
* one another */
.toggle-container {
position: relative;
}
.zg-body button {
text-align: center;
background: #07C;
color: #FFF;
cursor: pointer;
border-radius: 3px;
font-size: 0.85rem;
padding: 5px 20px;
cursor: pointer;
margin: 15px 0 15px 15px;
position: relative;
}
button:hover {
background: #1b6ead;
}
zing-grid {
/* make sure bottom grid is not interactive */
visibility: hidden;
pointer-events: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all 0.35s linear;
}
zing-grid.active {
visibility: visible;
pointer-events: initial;
opacity: 1;
}
/* we target zg-body first so we don't highlight the header cells */
zg-body zg-row {
cursor: pointer;
}
/**
* @description function to toggle the active class for both grids
*/
function _toggleGrids() {
mainGrid.classList.toggle('active');
childGrid.classList.toggle('active');
}
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// references to grids
const mainGrid = document.querySelector('#mainGrid');
const childGrid = document.querySelector('#childGrid');
// add event listener for card/row click
mainGrid.addEventListener('record:click', function(e) {
console.log(e.detail.ZGData);
// cancel if its a header click
if (e.detail.ZGData.isHeader) {
return;
}
const zgData = e.detail.ZGData.data;
// set up datastructure for childGrid
const childData = [{
q1: zgData.quarterlySales[0],
q2: zgData.quarterlySales[1],
q3: zgData.quarterlySales[2] || 'N/A',
q4: zgData.quarterlySales[3] || 'N/A'
}];
// set caption
document.getElementById('childCaptionText').textContent = `${zgData.company} 2018 Sales in ${zgData.priceSuffix}`;
// set data for childGrid
childGrid.setData(childData);
// update child grid data
_toggleGrids(); // toggle grids
});
});