• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body .controls--container {
    10.       padding: 1rem;
    11.     }
    12.  
    13.  
    14.     zing-grid[loading] {
    15.       height: 93px;
    16.     }
    17.   </style>
    18. </head>
    19.  
    20. <body class="zg-body">
    21.   <div class="inner--container">
    22.     <!-- toggle controls -->
    23.     <div class="controls--container">
    24.       <div>
    25.         <label for="group1">Group By Season: </label>
    26.         <input type="checkbox" checked id="group1" data-group-index="season">
    27.         <br>
    28.         <label for="group2">group By Episode: </label>
    29.         <input type="checkbox" checked id="group2" data-group-index="episode">
    30.         <br>
    31.         <label for="group3">group By Method: </label>
    32.         <input type="checkbox" id="group3" data-group-index="method">
    33.         <br>
    34.         <label for="group3">group By Location: </label>
    35.         <input type="checkbox" id="group4" data-group-index="location">
    36.         <br>
    37.         <label for="group3">group By Allegiance: </label>
    38.         <input type="checkbox" id="group5" data-group-index="allegiance">
    39.       </div>
    40.     </div>
    41.     <zing-grid caption="GroupBy Example" group-by="season,episode" src="https://cdn.zinggrid.com/datasets/got-deaths.json">
    42.     </zing-grid>
    43.   </div>
    44.   <script>
    45.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // element references
    46.     const zgRef = document.querySelector('zing-grid');
    47.     const groupByInputs = document.querySelectorAll('input[type="checkbox"]');
    48.  
    49.     // function declarations
    50.     function _groupByGrid(e) {
    51.       // Determine which indices to group by
    52.       let checked = document.querySelectorAll('[data-group-index');
    53.       let columnIndex = [...checked]
    54.         .map((el) => el.checked ? el.getAttribute('data-group-index') : false)
    55.         .filter((index) => index)
    56.         .join(',');
    57.  
    58.       // API method to actually group
    59.       zgRef.setGroupBy(columnIndex);
    60.     }
    61.  
    62.     // add event listeners
    63.     [...groupByInputs].forEach(groupByInput => {
    64.       groupByInput.addEventListener('change', _groupByGrid);
    65.     });
    66.   </script>
    67. </body>
    68.  
    69. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <div class="inner--container">
    12.     <!-- toggle controls -->
    13.     <div class="controls--container">
    14.       <div>
    15.         <label for="group1">Group By Season: </label>
    16.         <input type="checkbox" checked id="group1" data-group-index="season">
    17.         <br>
    18.         <label for="group2">group By Episode: </label>
    19.         <input type="checkbox" checked id="group2" data-group-index="episode">
    20.         <br>
    21.         <label for="group3">group By Method: </label>
    22.         <input type="checkbox" id="group3" data-group-index="method">
    23.         <br>
    24.         <label for="group3">group By Location: </label>
    25.         <input type="checkbox" id="group4" data-group-index="location">
    26.         <br>
    27.         <label for="group3">group By Allegiance: </label>
    28.         <input type="checkbox" id="group5" data-group-index="allegiance">
    29.       </div>
    30.     </div>
    31.     <zing-grid caption="GroupBy Example" group-by="season,episode" src="https://cdn.zinggrid.com/datasets/got-deaths.json">
    32.     </zing-grid>
    33.   </div>
    34. </body>
    35.  
    36. </html>
    1. .zg-body .controls--container {
    2.   padding: 1rem;
    3. }
    1. // element references
    2. const zgRef = document.querySelector('zing-grid');
    3. const groupByInputs = document.querySelectorAll('input[type="checkbox"]');
    4.  
    5. // function declarations
    6. function _groupByGrid(e) {
    7.   // Determine which indices to group by
    8.   let checked = document.querySelectorAll('[data-group-index');
    9.   let columnIndex = [...checked]
    10.     .map((el) => el.checked ? el.getAttribute('data-group-index') : false)
    11.     .filter((index) => index)
    12.     .join(',');
    13.  
    14.   // API method to actually group
    15.   zgRef.setGroupBy(columnIndex);
    16. }
    17.  
    18. // add event listeners
    19. [...groupByInputs].forEach(groupByInput => {
    20.   groupByInput.addEventListener('change', _groupByGrid);
    21. });