• Edit
  • Download
    • <!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>
    .zg-body .controls--container {
      padding: 1rem;
    }


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

<body class="zg-body">
  <div class="inner--container">
    <!-- toggle controls -->
    <div class="controls--container">
      <div>
        <label for="group1">Group By Season: </label>
        <input type="checkbox" checked id="group1" data-group-index="season">
        <br>
        <label for="group2">group By Episode: </label>
        <input type="checkbox" checked id="group2" data-group-index="episode">
        <br>
        <label for="group3">group By Method: </label>
        <input type="checkbox" id="group3" data-group-index="method">
        <br>
        <label for="group3">group By Location: </label>
        <input type="checkbox" id="group4" data-group-index="location">
        <br>
        <label for="group3">group By Allegiance: </label>
        <input type="checkbox" id="group5" data-group-index="allegiance">
      </div>
    </div>
    <zing-grid caption="GroupBy Example" group-by="season,episode" src="https://cdn.zinggrid.com/datasets/got-deaths.json">
    </zing-grid>
  </div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // element references
    const zgRef = document.querySelector('zing-grid');
    const groupByInputs = document.querySelectorAll('input[type="checkbox"]');

    // function declarations
    function _groupByGrid(e) {
      // Determine which indices to group by
      let checked = document.querySelectorAll('[data-group-index');
      let columnIndex = [...checked]
        .map((el) => el.checked ? el.getAttribute('data-group-index') : false)
        .filter((index) => index)
        .join(',');

      // API method to actually group
      zgRef.setGroupBy(columnIndex);
    }

    // add event listeners
    [...groupByInputs].forEach(groupByInput => {
      groupByInput.addEventListener('change', _groupByGrid);
    });
  </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="inner--container">
    <!-- toggle controls -->
    <div class="controls--container">
      <div>
        <label for="group1">Group By Season: </label>
        <input type="checkbox" checked id="group1" data-group-index="season">
        <br>
        <label for="group2">group By Episode: </label>
        <input type="checkbox" checked id="group2" data-group-index="episode">
        <br>
        <label for="group3">group By Method: </label>
        <input type="checkbox" id="group3" data-group-index="method">
        <br>
        <label for="group3">group By Location: </label>
        <input type="checkbox" id="group4" data-group-index="location">
        <br>
        <label for="group3">group By Allegiance: </label>
        <input type="checkbox" id="group5" data-group-index="allegiance">
      </div>
    </div>
    <zing-grid caption="GroupBy Example" group-by="season,episode" src="https://cdn.zinggrid.com/datasets/got-deaths.json">
    </zing-grid>
  </div>
</body>

</html>
    .zg-body .controls--container {
  padding: 1rem;
}
    // element references
const zgRef = document.querySelector('zing-grid');
const groupByInputs = document.querySelectorAll('input[type="checkbox"]');

// function declarations
function _groupByGrid(e) {
  // Determine which indices to group by
  let checked = document.querySelectorAll('[data-group-index');
  let columnIndex = [...checked]
    .map((el) => el.checked ? el.getAttribute('data-group-index') : false)
    .filter((index) => index)
    .join(',');

  // API method to actually group
  zgRef.setGroupBy(columnIndex);
}

// add event listeners
[...groupByInputs].forEach(groupByInput => {
  groupByInput.addEventListener('change', _groupByGrid);
});