• 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.     body {
    10.       background: #FFF;
    11.     }
    12.  
    13.     zing-grid {
    14.       height: 100%;
    15.       width: 100%;
    16.       margin: 0;
    17.       padding: 0;
    18.     }
    19.  
    20.     zing-grid[loading] {
    21.       height: 229px;
    22.     }
    23.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <zing-grid id="example-grid" data='[
    28.         {
    29.           "firstName": "John",
    30.           "lastName": "Doe",
    31.           "age": 45
    32.         },
    33.         {
    34.           "firstName": "Jane",
    35.           "lastName": "Doe",
    36.           "age": 44
    37.         }
    38.       ]' theme="default" caption="Meet the Doe Family">
    39.   </zing-grid>
    40.   <script>
    41.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    42.     window.addEventListener('load', () => {
    43.       const zingGridRef = document.querySelector('#example-grid');
    44.       zingGridRef.executeOnLoad(function() {
    45.         setInterval(function() {
    46.           const newData = [{
    47.               firstName: 'John Jr.',
    48.               lastName: 'Doe',
    49.               age: Math.floor(15 * Math.random())
    50.             },
    51.             {
    52.               firstName: 'Jane Jr.',
    53.               lastName: 'Doe',
    54.               age: Math.floor(13 * Math.random())
    55.             }
    56.           ];
    57.           zingGridRef.setAttribute('data', JSON.stringify(newData));
    58.         }, 1000);
    59.       });
    60.     });
    61.   </script>
    62. </body>
    63.  
    64. </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>
    11.   <zing-grid id="example-grid" data='[
    12.         {
    13.           "firstName": "John",
    14.           "lastName": "Doe",
    15.           "age": 45
    16.         },
    17.         {
    18.           "firstName": "Jane",
    19.           "lastName": "Doe",
    20.           "age": 44
    21.         }
    22.       ]' theme="default" caption="Meet the Doe Family">
    23.   </zing-grid>
    24. </body>
    25.  
    26. </html>
    1. body {
    2.   background: #FFF;
    3. }
    4.  
    5. zing-grid {
    6.   height: 100%;
    7.   width: 100%;
    8.   margin: 0;
    9.   padding: 0;
    10. }
    1. window.addEventListener('load', () => {
    2.   const zingGridRef = document.querySelector('#example-grid');
    3.   zingGridRef.executeOnLoad(function() {
    4.     setInterval(function() {
    5.       const newData = [{
    6.           firstName: 'John Jr.',
    7.           lastName: 'Doe',
    8.           age: Math.floor(15 * Math.random())
    9.         },
    10.         {
    11.           firstName: 'Jane Jr.',
    12.           lastName: 'Doe',
    13.           age: Math.floor(13 * Math.random())
    14.         }
    15.       ];
    16.       zingGridRef.setAttribute('data', JSON.stringify(newData));
    17.     }, 1000);
    18.   });
    19. });