Demos Back to Docs

Drill Down on Row Click

117 of 124

Adding the native ZingGrid event row:click will allow you to drill down into row information when clicking on rows.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/N0NI9HV8

Result Full HTML CSS JS

Edit Download

Default Text

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    /**
 * toggle container just holds a relative position 
 * since we are going to stack the grids on top of 
 * one another */
    .toggle-container {
      position: relative;
    }

    .zg-body button {
      text-align: center;
      background: #07C;
      color: #FFF;
      cursor: pointer;
      border-radius: 3px;
      font-size: 0.85rem;
      padding: 5px 20px;
      cursor: pointer;
      margin: 15px 0 15px 15px;
      position: relative;
    }

    button:hover {
      background: #1b6ead;
    }

    zing-grid {
      /* make sure bottom grid is not interactive */
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.35s linear;
    }

    zing-grid.active {
      visibility: visible;
      pointer-events: initial;
      opacity: 1;
    }

    /* we target zg-body first so we don't highlight the header cells */
    zg-body zg-row {
      cursor: pointer;
    }

    zing-grid[loading] {
      height: 450px;
    }
  </style>
</head>

<body class="zg-body">
  <div class="toggle-container">
    <zing-grid id="mainGrid" class="active" caption="Fortune 500 Companies Drilldown (click on row for quarterly sales)">
      <zg-data data='[
          {
            "company": "Walmart",
            "stockPrice": 84.54,
            "quarterlySales": [123.18, 136.27, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Berkshire Hathaway",
            "stockPrice": 298300,
            "quarterlySales": [133.18, 136.27, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Apple",
            "stockPrice": 184.22,
            "quarterlySales": [153.68, 116.62, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Exxon Mobil",
            "stockPrice": 84.54,
            "quarterlySales": [123.18, 136.27, null, null],
            "priceSuffix": "Billions"
          }
        ]'></zg-data>
      <zg-colgroup>
        <zg-column index="company"></zg-column>
        <zg-column index="stockPrice" type="currency"></zg-column>
      </zg-colgroup>
    </zing-grid>

    <zing-grid id="childGrid">
      <zg-caption>
        <span id="childCaptionText">Default Text</span>
        <button onClick="_toggleGrids()"><< Back</button>
      </zg-caption>
      <zg-colgroup>
        <zg-column index="q1"></zg-column>
        <zg-column index="q2"></zg-column>
        <zg-column index="q3"></zg-column>
        <zg-column index="q4"></zg-column>
      </zg-colgroup>
    </zing-grid>
  </div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    /**
     * @description function to toggle the active class for both grids
     */
    function _toggleGrids() {
      mainGrid.classList.toggle('active');
      childGrid.classList.toggle('active');
    }
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      // references to grids
      const mainGrid = document.querySelector('#mainGrid');
      const childGrid = document.querySelector('#childGrid');
      // add event listener for card/row click
      mainGrid.addEventListener('record:click', function(e) {
        console.log(e.detail.ZGData);
        // cancel if its a header click
        if (e.detail.ZGData.isHeader) {
          return;
        }
        const zgData = e.detail.ZGData.data;
        // set up datastructure for childGrid
        const childData = [{
          q1: zgData.quarterlySales[0],
          q2: zgData.quarterlySales[1],
          q3: zgData.quarterlySales[2] || 'N/A',
          q4: zgData.quarterlySales[3] || 'N/A'
        }];
        // set caption
        document.getElementById('childCaptionText').textContent = `${zgData.company} 2018 Sales in ${zgData.priceSuffix}`;
        // set data for childGrid	
        childGrid.setData(childData);
        // update child grid data 
        _toggleGrids(); // toggle grids
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
		<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
	</head>
	<body class="zg-body">
    <div class="toggle-container">
    	<zing-grid
    	  id="mainGrid"
    	  class="active"
    	  caption="Fortune 500 Companies Drilldown (click on row for quarterly sales)">
        <zg-data data='[
          {
            "company": "Walmart",
            "stockPrice": 84.54,
            "quarterlySales": [123.18, 136.27, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Berkshire Hathaway",
            "stockPrice": 298300,
            "quarterlySales": [133.18, 136.27, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Apple",
            "stockPrice": 184.22,
            "quarterlySales": [153.68, 116.62, null, null],
            "priceSuffix": "Billions"
          },
          {
            "company": "Exxon Mobil",
            "stockPrice": 84.54,
            "quarterlySales": [123.18, 136.27, null, null],
            "priceSuffix": "Billions"
          }
        ]'></zg-data>
    	  <zg-colgroup>
    	    <zg-column index="company"></zg-column>
    	    <zg-column index="stockPrice" type="currency"></zg-column>
    	  </zg-colgroup>
    	</zing-grid>
    	
      <zing-grid 
        id="childGrid">
        <zg-caption>
          <span id="childCaptionText">Default Text</span>
        	<button onClick="_toggleGrids()"><< Back</button>
        </zg-caption>
        <zg-colgroup>
          <zg-column index="q1"></zg-column>
          <zg-column index="q2"></zg-column>
          <zg-column index="q3"></zg-column>
          <zg-column index="q4"></zg-column>
        </zg-colgroup>
      </zing-grid>
    </div>
	</body>
</html>

/**
 * toggle container just holds a relative position 
 * since we are going to stack the grids on top of 
 * one another */
.toggle-container {
  position: relative;
}

.zg-body button {
  text-align: center;
  background: #07C;
  color: #FFF;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.85rem;
  padding: 5px 20px;
  cursor: pointer;
  margin: 15px 0 15px 15px;
  position: relative;
}
 
button:hover {
	background: #1b6ead;
}

zing-grid {
  /* make sure bottom grid is not interactive */
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s linear;
}

zing-grid.active {
  visibility: visible;
  pointer-events: initial;
  opacity: 1;
}

/* we target zg-body first so we don't highlight the header cells */
zg-body zg-row {
  cursor: pointer;
}

/**
 * @description function to toggle the active class for both grids
 */
function _toggleGrids() {
  mainGrid.classList.toggle('active');
  childGrid.classList.toggle('active');
}
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  // references to grids
  const mainGrid = document.querySelector('#mainGrid');
  const childGrid = document.querySelector('#childGrid');
  // add event listener for card/row click
  mainGrid.addEventListener('record:click', function(e) {
    console.log(e.detail.ZGData);
    // cancel if its a header click
    if (e.detail.ZGData.isHeader) {
      return;
    }
    const zgData = e.detail.ZGData.data;
    // set up datastructure for childGrid
    const childData = [{
      q1: zgData.quarterlySales[0],
      q2: zgData.quarterlySales[1],
      q3: zgData.quarterlySales[2] || 'N/A',
      q4: zgData.quarterlySales[3] || 'N/A'
    }];
    // set caption
    document.getElementById('childCaptionText').textContent = `${zgData.company} 2018 Sales in ${zgData.priceSuffix}`;
    // set data for childGrid	
    childGrid.setData(childData);
    // update child grid data 
    _toggleGrids(); // toggle grids
  });
});

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

Drill Down on Row Click

Full Code

Related Docs

Related Docs

Demo Gallery