• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body {
    10.       background-color: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid[loading] {
    14.       height: 213px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body class="zg-body">
    20.   <h3>Average Calculated Grid with Custom Renderer</h3>
    21.   <p>Here is a complete grid with the average of each column calculated with a custom renderer applied:</p>
    22.  
    23.   <zing-grid data='[
    24.       { "id": "383", "first": "Maria", "last": "John", "test1": 0.92, "test2": 0.97, "test3": 0.84},
    25.       { "id": "384", "first": "David", "last": "Smith", "test1": 0.86, "test2": 0.79, "test3": 0.86 },
    26.       { "id": "385", "first": "Felicity", "last": "Snow", "test1": 0.84, "test2": 0.66, "test3": 0.76 }
    27.     ]'>
    28.     <zg-colgroup>
    29.       <zg-column index="first"></zg-column>
    30.       <zg-column index="last"></zg-column>
    31.       <zg-column index="test1"></zg-column>
    32.       <zg-column index="test2"></zg-column>
    33.       <zg-column index="test3"></zg-column>
    34.       <zg-column type="aggregate" type-aggregate-value="avg" renderer="aggregateRenderer"></zg-column>
    35.     </zg-colgroup>
    36.   </zing-grid>
    37.   <script>
    38.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    39.     var aggregateRenderer = function(recordData, aggregateData, aggregateValue) {
    40.       console.log('Record Data: ', recordData);
    41.       console.log('Aggregate Data: ', aggregateData);
    42.       console.log('Aggregate Value: ', aggregateValue);
    43.       return `The average of ${aggregateData.join(', ')} for ${recordData.first} ${recordData.last} is ${aggregateValue}.`;
    44.     };
    45.   </script>
    46. </body>
    47.  
    48. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <h3>Average Calculated Grid with Custom Renderer</h3>
    12.   <p>Here is a complete grid with the average of each column calculated with a custom renderer applied:</p>
    13.  
    14.   <zing-grid data='[
    15.       { "id": "383", "first": "Maria", "last": "John", "test1": 0.92, "test2": 0.97, "test3": 0.84},
    16.       { "id": "384", "first": "David", "last": "Smith", "test1": 0.86, "test2": 0.79, "test3": 0.86 },
    17.       { "id": "385", "first": "Felicity", "last": "Snow", "test1": 0.84, "test2": 0.66, "test3": 0.76 }
    18.     ]'>
    19.     <zg-colgroup>
    20.       <zg-column index="first"></zg-column>
    21.       <zg-column index="last"></zg-column>
    22.       <zg-column index="test1"></zg-column>
    23.       <zg-column index="test2"></zg-column>
    24.       <zg-column index="test3"></zg-column>
    25.       <zg-column type="aggregate" type-aggregate-value="avg" renderer="aggregateRenderer"></zg-column>
    26.     </zg-colgroup>
    27.   </zing-grid>
    28. </body>
    29.  
    30. </html>
    1. .zg-body {
    2.   background-color: #e6e6e6;
    3. }
    1. var aggregateRenderer = function(recordData, aggregateData, aggregateValue) {
    2.   console.log('Record Data: ', recordData);
    3.   console.log('Aggregate Data: ', aggregateData);
    4.   console.log('Aggregate Value: ', aggregateValue);
    5.   return `The average of ${aggregateData.join(', ')} for ${recordData.first} ${recordData.last} is ${aggregateValue}.`;
    6. };