<!DOCTYPE html>
<html class="zg-html">
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
.zg-html,
.zg-body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.zg-body .drilldown--container {
position: relative;
}
.zg-body .image-portrait--column img {
border-radius: 50%;
width: 55px;
filter: grayscale(50%);
}
.zg-body .image-portrait--column:hover img,
zg-card:hover img {
filter: none;
}
zing-grid {
position: absolute;
top: 0;
right: 0;
opacity: 0;
pointer-events: none;
transition: opacity .5s ease;
--zg-caption-background: #003749;
--zg-caption-color: #fff;
}
zing-grid.active {
opacity: 1;
pointer-events: initial;
}
zg-button[action="removerecord"] {
--theme-color-primary: #f50057;
}
zg-row:hover {
cursor: pointer;
}
/* CARD STYLING */
.zg-body .bottom--container {
display: flex;
flex-direction: column;
}
.zg-body .bottom--container .row {
display: flex;
justify-content: space-around;
padding: 5px;
}
.zg-body .bottom--container .col {
flex: 1;
width: 32%;
text-align: center;
}
.zg-body .bottom--container .header {
background: #f5f5f5;
}
.zg-body .header--container {
display: flex;
justify-content: space-between;
}
.zg-body .logo-large img {
width: 36px;
}
.zg-body .logo-small {
width: 30px;
}
zg-card:hover {
background: var(--zg-row-body-background_hover);
cursor: pointer;
}
zg-card .image--container {
text-align: center;
}
zg-card .image--container img {
border-radius: 50%;
height: 80px;
filter: grayscale(50%);
}
/* SECONDARY GRID STYLING */
.zg-body .drilldown-card {
display: flex;
flex-direction: column;
padding: 0;
}
.zg-body .main--container {
display: flex;
}
.zg-body .main--container .left--container {
width: 300px;
overflow: hidden;
border-right: 4px solid #00b0ff;
}
.zg-body .main--container .right--container {
flex: 2;
padding: 1.5rem;
}
.zg-body #secondaryGrid zg-menu-bar,
.zg-body #secondaryGrid zg-head {
display: none;
}
.zg-body #secondaryGrid .header--container {
position: relative;
z-index: 200;
padding: 12px;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.zg-body .back-button {
background: #dc1257;
color: #fff;
border: 1px solid transparent;
font-size: .9rem;
box-sizing: border-box;
border-radius: .5rem;
padding: 0 1.4rem;
text-transform: uppercase;
transition: background-color .1s, border-color .1s, color .1s;
user-select: none;
cursor: pointer;
font-weight: 600;
min-height: 40px;
display: inline-flex;
min-width: 130px;
align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
justify-content: center;
line-height: 1.05;
outline: 0;
}
.zg-body .back-button:focus {
background-color: #e25786;
}
.zg-body .back-button:hover {
background-color: #eb7fa4;
border-color: transparent;
}
.zg-body .back-button:active {
background-color: #df4277;
}
zing-grid[loading] {
height: 450px;
}
</style>
</head>
<body class="zg-body">
<div class="drilldown--container">
<div class="wrapper">
<zing-grid id="topLevelGrid" class="active" caption="Tech CEOs" editor layout pager page-size="4" page-size-options="3,4,6" data='[
{
"name": "Mark Zuckerberg",
"company": "Facebook",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/facebook_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/zuckerberg.jpg",
"twitter": "@finkd",
"description": "Mark Elliot Zuckerberg (born May 14, 1984) is an American technology entrepreneur and philanthropist best known for co-founding and leading Facebook as its chairman and chief executive officer."
},
{
"name": "Tim Cook",
"company": "Apple",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/apple_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/cook.jpg",
"twitter": "@tim_cook",
"description": "Timothy Donal Cook is an American business executive, industrial engineer and developer. Cook is the Chief Executive officer of Apple Inc, previously serving as the companys Chief Operating Officer, under its founder Steve Jobs. Cook joined Apple in March 1998 as senior vice president of worldwide operations."
},
{
"name": "Satya Narayana Nadella",
"company": "Microsoft",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/microsoft_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/satya.jpg",
"twitter": "@satyanadella",
"description": "Satya Narayana Nadella (born 19 August 1967) is an Indian American business executive. He is the current Chief Executive Officer (CEO) of Microsoft, succeeding Steve Ballmer in 2014. Before becoming CEO, he was . Executive Vice President of Microsofts cloud and enterprise group, responsible for building and running the company."
},
{
"name": "Sundar Pichai",
"company": "Google",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/google_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/sundar.jpg",
"twitter": "@sundarpichai",
"description": "Pichai is the chief executive officer (CEO) of Google Inc. Formerly the Product Chief of Google, Pichais current role was announced on August 10, 2015, as part of the restructuring process that made Alphabet Inc. into Googles parent company, and he assumed the position on October 2, 2015."
},
{
"name": "Michael Dell",
"company": "Dell",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/dell_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/mdell.jpg",
"twitter": "@MichaelDell",
"description": "Michael Saul Dell (born February 23, 1965) is an American businessman, investor, philanthropist, and author. He is the founder and CEO of Dell Technologies, one of the worlds largest technology infrastructure companies. He is ranked as the 38th richest person in the world by Forbes, with a net worth of US$ 23.5 billion as of dollars on April 5, 2018."
},
{
"name": "Ginni Rometty",
"company": "IBM",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/ibm_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/ginny.jpg",
"twitter": "@ginnirometty",
"description": "Virginia Marie \"Ginni\" Rometty (born July 29, 1957) is an American business executive. She is the current chair, president, and CEO of IBM, and the first woman to head the company. Prior to becoming president and CEO in January 2012, she first joined IBM as a systems engineer in 1981 and subsequently headed global sales, marketing, and strategy. While general manager of IBM’s global services division, in 2002 she helped negotiate IBMs purchase of PricewaterhouseCoopers IT consulting business, becoming known for her work integrating the two companies. Since becoming CEO, she has focused IBM on analytics, cloud computing, and cognitive computing systems."
}
]'>
<!-- row layouts -->
<zg-colgroup>
<zg-column index="selector" type="selector"></zg-column>
<zg-column index="portraitUrl" header=" " type="image" cell-class="image-portrait--column" menu-text="Portrait"></zg-column>
<zg-column index="name"></zg-column>
<zg-column index="logoUrl" header="Logo" type="image" cell-class="logo-large"></zg-column>
<zg-column index="company"></zg-column>
<zg-column index="twitter">
<a href="https://twitter.com/[[index.twitter]]" target="_blank">[[index.twitter]]</a>
</zg-column>
<zg-column index="editor" type="editor"></zg-column>
<zg-column index="remover" type="remover"></zg-column>
<zg-card>
<template>
<!-- top half of card layout -->
<div class="header--container">
<zg-checkbox></zg-checkbox>
<div>
<zg-button role="editrecord"></zg-button>
<zg-button role="removerecord"></zg-button>
</div>
</div>
<!-- middle of card -->
<div class="image--container">
<img src="[[record.portraitUrl]]" alt="CEO N/A">
<h3>[[record.name]]</h3>
</div>
<!-- bottom of card -->
<div class="bottom--container">
<!-- three column grid layout -->
<div class="row header">
<span class="col">Company</span>
<span class="col">Logo</span>
<span class="col">Twitter</span>
</div>
<div class="row">
<span class="col">[[record.company]]</span>
<span class="col">
<img src="[[record.logoUrl]]" class="logo-small" alt="Logo N/A">
</span>
<span class="col">
<a href="https://twitter.com/[[record.twitter]]" target="_blank">[[record.twitter]]</a>
</span>
</div>
</div>
</template>
</zg-card>
</zing-grid>
<zing-grid id="secondaryGrid" caption="Tech CEOs" layout="row" layout-controls="disabled">
<!-- card layout -->
<zg-colgroup>
<zg-column index="custom" cell-class="drilldown-card">
<!-- top half of card layout -->
<div class="header--container">
<div>
<button class="back-button" onclick="_drilldownReturn();">Back</button>
</div>
</div>
<!-- bottom half of card -->
<div class="main--container">
<!-- lef of card -->
<div class="left--container image--container">
<img src="[[record.portraitUrl]]" alt="CEO N/A">
</div>
<!-- bottom of card -->
<div class="right--container">
<h3>[[record.name]]</h3>
<p>[[record.description]]</p>
<div class="bottom--container">
<div class="row header">
<span class="col">Company</span>
<span class="col">Logo</span>
<span class="col">Twitter</span>
</div>
<div class="row">
<span class="col">[[record.company]]</span>
<span class="col">
<img src="[[record.logoUrl]]" class="logo-small" alt="Logo N/A">
</span>
<span class="col">
<a href="https://twitter.com/[[record.twitter]]" target="_blank">[[record.twitter]]</a>
</span>
</div>
</div>
</div>
</div>
</zg-column>
</zg-colgroup>
</zing-grid>
</div>
</div>
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // secondary grid click back
function _drilldownReturn() {
// swap grids
secondaryGrid.classList.remove('active');
topLevelGrid.classList.add('active');
// clear data
secondaryGrid.setData();
};
// 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
ZingGrid.registerMethod(_drilldownReturn);
const topLevelGrid = document.querySelector('#topLevelGrid');
const secondaryGrid = document.querySelector('#secondaryGrid');
// top level row click
if (topLevelGrid)
topLevelGrid.addEventListener('record:click', function(e) {
// if its not a checkbox or anchor tag
if (e.detail.ZGEvent.oDOMTarget.tagName !== 'ZG-CHECKBOX' &&
e.detail.ZGEvent.oDOMTarget.tagName !== 'A') {
// get data
const rowData = [e.detail.ZGData.data];
// remove unwanted properties
delete rowData['sRESTIndex'];
delete rowData['sRecordIndex'];
delete rowData['nOriginalIndex'];
console.log(rowData);
//assign data @fixme can't pass object. Must stringify
secondaryGrid.setData(rowData);
// swap grids
topLevelGrid.classList.remove('active');
secondaryGrid.classList.add('active');
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html class="zg-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="drilldown--container">
<div class="wrapper">
<zing-grid id="topLevelGrid" class="active" caption="Tech CEOs" editor layout pager page-size="4" page-size-options="3,4,6" data='[
{
"name": "Mark Zuckerberg",
"company": "Facebook",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/facebook_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/zuckerberg.jpg",
"twitter": "@finkd",
"description": "Mark Elliot Zuckerberg (born May 14, 1984) is an American technology entrepreneur and philanthropist best known for co-founding and leading Facebook as its chairman and chief executive officer."
},
{
"name": "Tim Cook",
"company": "Apple",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/apple_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/cook.jpg",
"twitter": "@tim_cook",
"description": "Timothy Donal Cook is an American business executive, industrial engineer and developer. Cook is the Chief Executive officer of Apple Inc, previously serving as the companys Chief Operating Officer, under its founder Steve Jobs. Cook joined Apple in March 1998 as senior vice president of worldwide operations."
},
{
"name": "Satya Narayana Nadella",
"company": "Microsoft",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/microsoft_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/satya.jpg",
"twitter": "@satyanadella",
"description": "Satya Narayana Nadella (born 19 August 1967) is an Indian American business executive. He is the current Chief Executive Officer (CEO) of Microsoft, succeeding Steve Ballmer in 2014. Before becoming CEO, he was . Executive Vice President of Microsofts cloud and enterprise group, responsible for building and running the company."
},
{
"name": "Sundar Pichai",
"company": "Google",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/google_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/sundar.jpg",
"twitter": "@sundarpichai",
"description": "Pichai is the chief executive officer (CEO) of Google Inc. Formerly the Product Chief of Google, Pichais current role was announced on August 10, 2015, as part of the restructuring process that made Alphabet Inc. into Googles parent company, and he assumed the position on October 2, 2015."
},
{
"name": "Michael Dell",
"company": "Dell",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/dell_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/mdell.jpg",
"twitter": "@MichaelDell",
"description": "Michael Saul Dell (born February 23, 1965) is an American businessman, investor, philanthropist, and author. He is the founder and CEO of Dell Technologies, one of the worlds largest technology infrastructure companies. He is ranked as the 38th richest person in the world by Forbes, with a net worth of US$ 23.5 billion as of dollars on April 5, 2018."
},
{
"name": "Ginni Rometty",
"company": "IBM",
"logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/ibm_logo.png",
"portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/ginny.jpg",
"twitter": "@ginnirometty",
"description": "Virginia Marie \"Ginni\" Rometty (born July 29, 1957) is an American business executive. She is the current chair, president, and CEO of IBM, and the first woman to head the company. Prior to becoming president and CEO in January 2012, she first joined IBM as a systems engineer in 1981 and subsequently headed global sales, marketing, and strategy. While general manager of IBM’s global services division, in 2002 she helped negotiate IBMs purchase of PricewaterhouseCoopers IT consulting business, becoming known for her work integrating the two companies. Since becoming CEO, she has focused IBM on analytics, cloud computing, and cognitive computing systems."
}
]'>
<!-- row layouts -->
<zg-colgroup>
<zg-column index="selector" type="selector"></zg-column>
<zg-column index="portraitUrl" header=" " type="image" cell-class="image-portrait--column" menu-text="Portrait"></zg-column>
<zg-column index="name"></zg-column>
<zg-column index="logoUrl" header="Logo" type="image" cell-class="logo-large"></zg-column>
<zg-column index="company"></zg-column>
<zg-column index="twitter">
<a href="https://twitter.com/[[index.twitter]]" target="_blank">[[index.twitter]]</a>
</zg-column>
<zg-column index="editor" type="editor"></zg-column>
<zg-column index="remover" type="remover"></zg-column>
<zg-card>
<template>
<!-- top half of card layout -->
<div class="header--container">
<zg-checkbox></zg-checkbox>
<div>
<zg-button role="editrecord"></zg-button>
<zg-button role="removerecord"></zg-button>
</div>
</div>
<!-- middle of card -->
<div class="image--container">
<img src="[[record.portraitUrl]]" alt="CEO N/A">
<h3>[[record.name]]</h3>
</div>
<!-- bottom of card -->
<div class="bottom--container">
<!-- three column grid layout -->
<div class="row header">
<span class="col">Company</span>
<span class="col">Logo</span>
<span class="col">Twitter</span>
</div>
<div class="row">
<span class="col">[[record.company]]</span>
<span class="col">
<img src="[[record.logoUrl]]" class="logo-small" alt="Logo N/A">
</span>
<span class="col">
<a href="https://twitter.com/[[record.twitter]]" target="_blank">[[record.twitter]]</a>
</span>
</div>
</div>
</template>
</zg-card>
</zing-grid>
<zing-grid id="secondaryGrid" caption="Tech CEOs" layout="row" layout-controls="disabled">
<!-- card layout -->
<zg-colgroup>
<zg-column index="custom" cell-class="drilldown-card">
<!-- top half of card layout -->
<div class="header--container">
<div>
<button class="back-button" onclick="_drilldownReturn();">Back</button>
</div>
</div>
<!-- bottom half of card -->
<div class="main--container">
<!-- lef of card -->
<div class="left--container image--container">
<img src="[[record.portraitUrl]]" alt="CEO N/A">
</div>
<!-- bottom of card -->
<div class="right--container">
<h3>[[record.name]]</h3>
<p>[[record.description]]</p>
<div class="bottom--container">
<div class="row header">
<span class="col">Company</span>
<span class="col">Logo</span>
<span class="col">Twitter</span>
</div>
<div class="row">
<span class="col">[[record.company]]</span>
<span class="col">
<img src="[[record.logoUrl]]" class="logo-small" alt="Logo N/A">
</span>
<span class="col">
<a href="https://twitter.com/[[record.twitter]]" target="_blank">[[record.twitter]]</a>
</span>
</div>
</div>
</div>
</div>
</zg-column>
</zg-colgroup>
</zing-grid>
</div>
</div>
</body>
</html>
.zg-html,
.zg-body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.zg-body .drilldown--container {
position: relative;
}
.zg-body .image-portrait--column img {
border-radius: 50%;
width: 55px;
filter: grayscale(50%);
}
.zg-body .image-portrait--column:hover img,
zg-card:hover img {
filter: none;
}
zing-grid {
position: absolute;
top: 0;
right: 0;
opacity: 0;
pointer-events: none;
transition: opacity .5s ease;
--zg-caption-background: #003749;
--zg-caption-color: #fff;
}
zing-grid.active {
opacity: 1;
pointer-events: initial;
}
zg-button[action="removerecord"] {
--theme-color-primary: #f50057;
}
zg-row:hover {
cursor: pointer;
}
/* CARD STYLING */
.zg-body .bottom--container {
display: flex;
flex-direction: column;
}
.zg-body .bottom--container .row {
display: flex;
justify-content: space-around;
padding: 5px;
}
.zg-body .bottom--container .col {
flex: 1;
width: 32%;
text-align: center;
}
.zg-body .bottom--container .header {
background: #f5f5f5;
}
.zg-body .header--container {
display: flex;
justify-content: space-between;
}
.zg-body .logo-large img {
width: 36px;
}
.zg-body .logo-small {
width: 30px;
}
zg-card:hover {
background: var(--zg-row-body-background_hover);
cursor: pointer;
}
zg-card .image--container {
text-align: center;
}
zg-card .image--container img {
border-radius: 50%;
height: 80px;
filter: grayscale(50%);
}
/* SECONDARY GRID STYLING */
.zg-body .drilldown-card {
display: flex;
flex-direction: column;
padding: 0;
}
.zg-body .main--container {
display: flex;
}
.zg-body .main--container .left--container {
width: 300px;
overflow: hidden;
border-right: 4px solid #00b0ff;
}
.zg-body .main--container .right--container {
flex: 2;
padding: 1.5rem;
}
.zg-body #secondaryGrid zg-menu-bar,
.zg-body #secondaryGrid zg-head {
display: none;
}
.zg-body #secondaryGrid .header--container {
position: relative;
z-index: 200;
padding: 12px;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.zg-body .back-button {
background: #dc1257;
color: #fff;
border: 1px solid transparent;
font-size: .9rem;
box-sizing: border-box;
border-radius: .5rem;
padding: 0 1.4rem;
text-transform: uppercase;
transition: background-color .1s, border-color .1s, color .1s;
user-select: none;
cursor: pointer;
font-weight: 600;
min-height: 40px;
display: inline-flex;
min-width: 130px;
align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
justify-content: center;
line-height: 1.05;
outline: 0;
}
.zg-body .back-button:focus {
background-color: #e25786;
}
.zg-body .back-button:hover {
background-color: #eb7fa4;
border-color: transparent;
}
.zg-body .back-button:active {
background-color: #df4277;
}
// secondary grid click back
function _drilldownReturn() {
// swap grids
secondaryGrid.classList.remove('active');
topLevelGrid.classList.add('active');
// clear data
secondaryGrid.setData();
};
// 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
ZingGrid.registerMethod(_drilldownReturn);
const topLevelGrid = document.querySelector('#topLevelGrid');
const secondaryGrid = document.querySelector('#secondaryGrid');
// top level row click
if (topLevelGrid)
topLevelGrid.addEventListener('record:click', function(e) {
// if its not a checkbox or anchor tag
if (e.detail.ZGEvent.oDOMTarget.tagName !== 'ZG-CHECKBOX' &&
e.detail.ZGEvent.oDOMTarget.tagName !== 'A') {
// get data
const rowData = [e.detail.ZGData.data];
// remove unwanted properties
delete rowData['sRESTIndex'];
delete rowData['sRecordIndex'];
delete rowData['nOriginalIndex'];
console.log(rowData);
//assign data @fixme can't pass object. Must stringify
secondaryGrid.setData(rowData);
// swap grids
topLevelGrid.classList.remove('active');
secondaryGrid.classList.add('active');
}
});
});