Demos Back to Docs

Tech CEO Demo

124 of 124

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.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/1KY63OVI

Result Full HTML CSS JS

Edit Download

[[index.twitter]]

[[record.name]]

[[record.description]]

[[record.company]]

[[record.twitter]]

Full Code

<!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');
            }
        });
});

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

Edit in Studio

Tech CEO Demo

[[record.name]]

[[record.name]]

Full Code

Related Docs

Related Docs

Demo Gallery