• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</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.     zing-grid[loading] {
    14.       height: 172px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.  
    21.   <zing-grid caption="Dynamic Data" layout="row" layout-controls>
    22.   </zing-grid>
    23.  
    24.   <script>
    25.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // function to mimic data changing
    26.     function shuffleData(arr) {
    27.       const newArr = arr.slice()
    28.       for (let i = newArr.length - 1; i > 0; i--) {
    29.         const rand = Math.floor(Math.random() * (i + 1));
    30.         [newArr[i], newArr[rand]] = [newArr[rand], newArr[i]];
    31.       }
    32.       return newArr
    33.     };
    34.  
    35.     // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       // Javascript code to execute after DOM content
    39.       const zgRef = document.querySelector('zing-grid');
    40.       let intervalTimeoutId = setInterval(() => {
    41.         fetch('https://cdn.zinggrid.com/datasets/remote-data-recordpath.json')
    42.           .then(res => res.json())
    43.           .then(data => {
    44.             // in this use case our endpoint is not updating so
    45.             // we fake an endpoint update by manipulating the data
    46.             const newData = shuffleData(data.company.employees);
    47.             // update data
    48.             zgRef.setData(newData);
    49.           })
    50.           .catch(err => console.error('--- Error In Fetch Occurred ---', err));
    51.       }, 1000);
    52.  
    53.     });
    54.   </script>
    55. </body>
    56.  
    57. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.  
    12.   <zing-grid caption="Dynamic Data" layout="row" layout-controls>
    13.   </zing-grid>
    14.  
    15. </body>
    16.  
    17. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    1. // function to mimic data changing
    2. function shuffleData(arr) {
    3.   const newArr = arr.slice()
    4.   for (let i = newArr.length - 1; i > 0; i--) {
    5.     const rand = Math.floor(Math.random() * (i + 1));
    6.     [newArr[i], newArr[rand]] = [newArr[rand], newArr[i]];
    7.   }
    8.   return newArr
    9. };
    10.  
    11. // window:load event for Javascript to run after HTML
    12. // because this Javascript is injected into the document head
    13. window.addEventListener('load', () => {
    14.   // Javascript code to execute after DOM content
    15.   const zgRef = document.querySelector('zing-grid');
    16.   let intervalTimeoutId = setInterval(() => {
    17.     fetch('https://cdn.zinggrid.com/datasets/remote-data-recordpath.json')
    18.       .then(res => res.json())
    19.       .then(data => {
    20.         // in this use case our endpoint is not updating so
    21.         // we fake an endpoint update by manipulating the data
    22.         const newData = shuffleData(data.company.employees);
    23.         // update data
    24.         zgRef.setData(newData);
    25.       })
    26.       .catch(err => console.error('--- Error In Fetch Occurred ---', err));
    27.   }, 1000);
    28.  
    29. });