Demos Back to Demos

Tech CEO Demos

20 of 25

Create your own cell 'card' template to create unique grid layouts.

In this demo, clicking on the CEO will drill-down to a new detail view with more information on them.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
	 	<script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
	</head>
	<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 Zuckerberg1",
                         "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" type="url">
              <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-colgroup>
          <!-- card layout -->
          <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>

CSS

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

.drilldown--container {position:relative;}

.image-portrait--column  img {
  border-radius:50%;
  width:55px;
  filter: grayscale(50%);
}
.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 */

.bottom--container {
  display:flex;
  flex-direction:column;
}

.bottom--container .row {
  display:flex;
  justify-content:space-around;
  padding:5px;
}

.bottom--container .col {
  flex:1;
  width:32%;
  text-align:center;
}

.bottom--container .header {background:#f5f5f5;}

.header--container {
  display:flex;
  justify-content:space-between;
}

.logo-large img {width:36px;}

.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 */
.drilldown-card {
  display:flex;
  flex-direction:column;
  padding:0;
}

.main--container {display:flex;}

.main--container .left--container {
	width:300px;
  overflow:hidden;
  border-right:4px solid #00b0ff;
}
.main--container .right--container {flex:2;padding:1.5rem;}

#secondaryGrid zg-menu-bar,
#secondaryGrid zg-head
{display:none;}

#secondaryGrid .header--container {
  position:relative;
  z-index:200;
	padding:12px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}

.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;
}

.back-button:focus { background-color: #e25786; }
.back-button:hover { background-color: #eb7fa4; border-color:transparent; }
.back-button:active { background-color: #df4277; }

JS

// 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 = JSON.parse(JSON.stringify(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(JSON.stringify(rowData));

      // swap grids
      topLevelGrid.classList.remove('active');
      secondaryGrid.classList.add('active');
    }
  });
});

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio