• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
        <style>
            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;
            }
    
            zing-grid[loading] {
                height: 556px;
            }
        </style>
    </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>
        <script>
            // 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');
                    }
                });
            });
        </script>
    </body>
    
    </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>
    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; }
    // 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');
        }
      });
    });