• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Basic Template</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     select {
    14.       margin-bottom: 1rem;
    15.     }
    16.  
    17.     zing-grid[loading] {
    18.       height: 213px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body>
    24.  
    25.   <zing-grid data='[
    26.       { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
    27.       { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
    28.       { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
    29.     ]'>
    30.     <zg-colgroup>
    31.       <zg-column index="first"></zg-column>
    32.       <zg-column index="last"></zg-column>
    33.     </zg-colgroup>
    34.     <zg-row-details>
    35.       <template>
    36.         <zing-grid data='[[record.tests]]'>
    37.           <zg-colgroup>
    38.             <zg-column index="test1"></zg-column>
    39.             <zg-column index="test2"></zg-column>
    40.             <zg-column index="test3"></zg-column>
    41.           </zg-colgroup>
    42.         </zing-grid>
    43.       </template>
    44.     </zg-row-details>
    45.   </zing-grid>
    46.  
    47.   <script>
    48.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    49.   </script>
    50. </body>
    51.  
    52. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Basic Template</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.  
    12.   <zing-grid data='[
    13.       { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
    14.       { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
    15.       { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
    16.     ]'>
    17.     <zg-colgroup>
    18.       <zg-column index="first"></zg-column>
    19.       <zg-column index="last"></zg-column>
    20.     </zg-colgroup>
    21.     <zg-row-details>
    22.       <template>
    23.         <zing-grid data='[[record.tests]]'>
    24.           <zg-colgroup>
    25.             <zg-column index="test1"></zg-column>
    26.             <zg-column index="test2"></zg-column>
    27.             <zg-column index="test3"></zg-column>
    28.           </zg-colgroup>
    29.         </zing-grid>
    30.       </template>
    31.     </zg-row-details>
    32.   </zing-grid>
    33.  
    34. </body>
    35.  
    36. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. select {
    6.   margin-bottom: 1rem;
    7. }
    1.