• 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.     /**
    10.  * toggle container just holds a relative position 
    11.  * since we are going to stack the grids on top of 
    12.  * one another */
    13.     .toggle-container {
    14.       position: relative;
    15.     }
    16.  
    17.     .zg-body button {
    18.       text-align: center;
    19.       background: #07C;
    20.       color: #FFF;
    21.       cursor: pointer;
    22.       border-radius: 3px;
    23.       font-size: 0.85rem;
    24.       padding: 5px 20px;
    25.       cursor: pointer;
    26.       margin: 15px 0 15px 15px;
    27.       position: relative;
    28.     }
    29.  
    30.     button:hover {
    31.       background: #1b6ead;
    32.     }
    33.  
    34.     zing-grid {
    35.       /* make sure bottom grid is not interactive */
    36.       visibility: hidden;
    37.       pointer-events: none;
    38.       opacity: 0;
    39.       position: absolute;
    40.       top: 0;
    41.       left: 0;
    42.       transition: all 0.35s linear;
    43.     }
    44.  
    45.     zing-grid.active {
    46.       visibility: visible;
    47.       pointer-events: initial;
    48.       opacity: 1;
    49.     }
    50.  
    51.     /* we target zg-body first so we don't highlight the header cells */
    52.     zg-body zg-row {
    53.       cursor: pointer;
    54.     }
    55.  
    56.     zing-grid[loading] {
    57.       height: 450px;
    58.     }
    59.   </style>
    60. </head>
    61.  
    62. <body class="zg-body">
    63.   <div class="toggle-container">
    64.     <zing-grid id="mainGrid" class="active" caption="Fortune 500 Companies Drilldown (click on row for quarterly sales)">
    65.       <zg-data data='[
    66.           {
    67.             "company": "Walmart",
    68.             "stockPrice": 84.54,
    69.             "quarterlySales": [123.18, 136.27, null, null],
    70.             "priceSuffix": "Billions"
    71.           },
    72.           {
    73.             "company": "Berkshire Hathaway",
    74.             "stockPrice": 298300,
    75.             "quarterlySales": [133.18, 136.27, null, null],
    76.             "priceSuffix": "Billions"
    77.           },
    78.           {
    79.             "company": "Apple",
    80.             "stockPrice": 184.22,
    81.             "quarterlySales": [153.68, 116.62, null, null],
    82.             "priceSuffix": "Billions"
    83.           },
    84.           {
    85.             "company": "Exxon Mobil",
    86.             "stockPrice": 84.54,
    87.             "quarterlySales": [123.18, 136.27, null, null],
    88.             "priceSuffix": "Billions"
    89.           }
    90.         ]'></zg-data>
    91.       <zg-colgroup>
    92.         <zg-column index="company"></zg-column>
    93.         <zg-column index="stockPrice" type="currency"></zg-column>
    94.       </zg-colgroup>
    95.     </zing-grid>
    96.  
    97.     <zing-grid id="childGrid">
    98.       <zg-caption>
    99.         <span id="childCaptionText">Default Text</span>
    100.         <button onClick="_toggleGrids()">&lt;&lt; Back</button>
    101.       </zg-caption>
    102.       <zg-colgroup>
    103.         <zg-column index="q1"></zg-column>
    104.         <zg-column index="q2"></zg-column>
    105.         <zg-column index="q3"></zg-column>
    106.         <zg-column index="q4"></zg-column>
    107.       </zg-colgroup>
    108.     </zing-grid>
    109.   </div>
    110.   <script>
    111.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    112.     /**
    113.      * @description function to toggle the active class for both grids
    114.      */
    115.     function _toggleGrids() {
    116.       mainGrid.classList.toggle('active');
    117.       childGrid.classList.toggle('active');
    118.     }
    119.     // window:load event for Javascript to run after HTML
    120.     // because this Javascript is injected into the document head
    121.     window.addEventListener('load', () => {
    122.       // Javascript code to execute after DOM content
    123.       // references to grids
    124.       const mainGrid = document.querySelector('#mainGrid');
    125.       const childGrid = document.querySelector('#childGrid');
    126.       // add event listener for card/row click
    127.       mainGrid.addEventListener('record:click', function(e) {
    128.         console.log(e.detail.ZGData);
    129.         // cancel if its a header click
    130.         if (e.detail.ZGData.isHeader) {
    131.           return;
    132.         }
    133.         const zgData = e.detail.ZGData.data;
    134.         // set up datastructure for childGrid
    135.         const childData = [{
    136.           q1: zgData.quarterlySales[0],
    137.           q2: zgData.quarterlySales[1],
    138.           q3: zgData.quarterlySales[2] || 'N/A',
    139.           q4: zgData.quarterlySales[3] || 'N/A'
    140.         }];
    141.         // set caption
    142.         document.getElementById('childCaptionText').textContent = `${zgData.company} 2018 Sales in ${zgData.priceSuffix}`;
    143.         // set data for childGrid	
    144.         childGrid.setData(childData);
    145.         // update child grid data 
    146.         _toggleGrids(); // toggle grids
    147.       });
    148.     });
    149.   </script>
    150. </body>
    151.  
    152. </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="toggle-container">
    12.     <zing-grid id="mainGrid" class="active" caption="Fortune 500 Companies Drilldown (click on row for quarterly sales)">
    13.       <zg-data data='[
    14.           {
    15.             "company": "Walmart",
    16.             "stockPrice": 84.54,
    17.             "quarterlySales": [123.18, 136.27, null, null],
    18.             "priceSuffix": "Billions"
    19.           },
    20.           {
    21.             "company": "Berkshire Hathaway",
    22.             "stockPrice": 298300,
    23.             "quarterlySales": [133.18, 136.27, null, null],
    24.             "priceSuffix": "Billions"
    25.           },
    26.           {
    27.             "company": "Apple",
    28.             "stockPrice": 184.22,
    29.             "quarterlySales": [153.68, 116.62, null, null],
    30.             "priceSuffix": "Billions"
    31.           },
    32.           {
    33.             "company": "Exxon Mobil",
    34.             "stockPrice": 84.54,
    35.             "quarterlySales": [123.18, 136.27, null, null],
    36.             "priceSuffix": "Billions"
    37.           }
    38.         ]'></zg-data>
    39.       <zg-colgroup>
    40.         <zg-column index="company"></zg-column>
    41.         <zg-column index="stockPrice" type="currency"></zg-column>
    42.       </zg-colgroup>
    43.     </zing-grid>
    44.  
    45.     <zing-grid id="childGrid">
    46.       <zg-caption>
    47.         <span id="childCaptionText">Default Text</span>
    48.         <button onClick="_toggleGrids()">&lt;&lt; Back</button>
    49.       </zg-caption>
    50.       <zg-colgroup>
    51.         <zg-column index="q1"></zg-column>
    52.         <zg-column index="q2"></zg-column>
    53.         <zg-column index="q3"></zg-column>
    54.         <zg-column index="q4"></zg-column>
    55.       </zg-colgroup>
    56.     </zing-grid>
    57.   </div>
    58. </body>
    59.  
    60. </html>
    1. /**
    2.  * toggle container just holds a relative position 
    3.  * since we are going to stack the grids on top of 
    4.  * one another */
    5. .toggle-container {
    6.   position: relative;
    7. }
    8.  
    9. .zg-body button {
    10.   text-align: center;
    11.   background: #07C;
    12.   color: #FFF;
    13.   cursor: pointer;
    14.   border-radius: 3px;
    15.   font-size: 0.85rem;
    16.   padding: 5px 20px;
    17.   cursor: pointer;
    18.   margin: 15px 0 15px 15px;
    19.   position: relative;
    20. }
    21.  
    22. button:hover {
    23.   background: #1b6ead;
    24. }
    25.  
    26. zing-grid {
    27.   /* make sure bottom grid is not interactive */
    28.   visibility: hidden;
    29.   pointer-events: none;
    30.   opacity: 0;
    31.   position: absolute;
    32.   top: 0;
    33.   left: 0;
    34.   transition: all 0.35s linear;
    35. }
    36.  
    37. zing-grid.active {
    38.   visibility: visible;
    39.   pointer-events: initial;
    40.   opacity: 1;
    41. }
    42.  
    43. /* we target zg-body first so we don't highlight the header cells */
    44. zg-body zg-row {
    45.   cursor: pointer;
    46. }
    1. /**
    2.  * @description function to toggle the active class for both grids
    3.  */
    4. function _toggleGrids() {
    5.   mainGrid.classList.toggle('active');
    6.   childGrid.classList.toggle('active');
    7. }
    8. // window:load event for Javascript to run after HTML
    9. // because this Javascript is injected into the document head
    10. window.addEventListener('load', () => {
    11.   // Javascript code to execute after DOM content
    12.   // references to grids
    13.   const mainGrid = document.querySelector('#mainGrid');
    14.   const childGrid = document.querySelector('#childGrid');
    15.   // add event listener for card/row click
    16.   mainGrid.addEventListener('record:click', function(e) {
    17.     console.log(e.detail.ZGData);
    18.     // cancel if its a header click
    19.     if (e.detail.ZGData.isHeader) {
    20.       return;
    21.     }
    22.     const zgData = e.detail.ZGData.data;
    23.     // set up datastructure for childGrid
    24.     const childData = [{
    25.       q1: zgData.quarterlySales[0],
    26.       q2: zgData.quarterlySales[1],
    27.       q3: zgData.quarterlySales[2] || 'N/A',
    28.       q4: zgData.quarterlySales[3] || 'N/A'
    29.     }];
    30.     // set caption
    31.     document.getElementById('childCaptionText').textContent = `${zgData.company} 2018 Sales in ${zgData.priceSuffix}`;
    32.     // set data for childGrid	
    33.     childGrid.setData(childData);
    34.     // update child grid data 
    35.     _toggleGrids(); // toggle grids
    36.   });
    37. });