• 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.     zing-grid[loading] {
    10.       height: 800px;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <div id="yourFirstGrid"></div>
    17.   <script>
    18.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    19.     // because this Javascript is injected into the document head
    20.     window.addEventListener('load', () => {
    21.       // Javascript code to execute after DOM content
    22.  
    23.       const GridConfig = (data) => {
    24.         return {
    25.           editor: true,
    26.           pager: true,
    27.           pageSize: 3,
    28.           data
    29.         }
    30.       }
    31.  
    32.       const dbDocument = [{
    33.           data: [
    34.             [
    35.               "Maria",
    36.               123
    37.             ],
    38.             [
    39.               "David",
    40.               456
    41.             ],
    42.             [
    43.               "Felicity",
    44.               789
    45.             ]
    46.           ]
    47.         },
    48.  
    49.         {
    50.           data: [{
    51.               "name": "Maria",
    52.               "number": 123
    53.             },
    54.             {
    55.               "name": "David",
    56.               "number": 456
    57.             },
    58.             {
    59.               "name": "Felicity",
    60.               "number": 789
    61.             }
    62.           ]
    63.         },
    64.  
    65.         {
    66.           data: {
    67.             "entry1": {
    68.               "name": "Maria",
    69.               "number": 123
    70.             },
    71.             "entry2": {
    72.               "name": "David",
    73.               "number": 456
    74.             },
    75.             "entry3": {
    76.               "name": "Felicity",
    77.               "number": 789
    78.             }
    79.           }
    80.         },
    81.  
    82.         {
    83.           data: [{
    84.               "name": "Maria",
    85.               "number": 123,
    86.               "colors": {
    87.                 "primary": "red",
    88.                 "secondary": "chartreuse"
    89.               }
    90.             },
    91.             {
    92.               "name": "David",
    93.               "number": 456,
    94.               "colors": {
    95.                 "primary": "black",
    96.                 "secondary": "yellow"
    97.               }
    98.             },
    99.             {
    100.               "name": "Felicity",
    101.               "number": 789,
    102.               "colors": {
    103.                 "primary": "blue",
    104.                 "secondary": "orange"
    105.               }
    106.             }
    107.           ]
    108.         }
    109.       ];
    110.  
    111.       // loop through database object
    112.       dbDocument.forEach((curVal) => {
    113.         const gridConfig = GridConfig(curVal.data);
    114.         const gridRef = new ZingGrid(gridConfig);
    115.         document.querySelector('#yourFirstGrid').appendChild(gridRef)
    116.       });
    117.     });
    118.   </script>
    119. </body>
    120.  
    121. </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.   <div id="yourFirstGrid"></div>
    12. </body>
    13.  
    14. </html>
    1.  
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.  
    6.   const GridConfig = (data) => {
    7.     return {
    8.       editor: true,
    9.       pager: true,
    10.       pageSize: 3,
    11.       data
    12.     }
    13.   }
    14.  
    15.   const dbDocument = [{
    16.       data: [
    17.         [
    18.           "Maria",
    19.           123
    20.         ],
    21.         [
    22.           "David",
    23.           456
    24.         ],
    25.         [
    26.           "Felicity",
    27.           789
    28.         ]
    29.       ]
    30.     },
    31.  
    32.     {
    33.       data: [{
    34.           "name": "Maria",
    35.           "number": 123
    36.         },
    37.         {
    38.           "name": "David",
    39.           "number": 456
    40.         },
    41.         {
    42.           "name": "Felicity",
    43.           "number": 789
    44.         }
    45.       ]
    46.     },
    47.  
    48.     {
    49.       data: {
    50.         "entry1": {
    51.           "name": "Maria",
    52.           "number": 123
    53.         },
    54.         "entry2": {
    55.           "name": "David",
    56.           "number": 456
    57.         },
    58.         "entry3": {
    59.           "name": "Felicity",
    60.           "number": 789
    61.         }
    62.       }
    63.     },
    64.  
    65.     {
    66.       data: [{
    67.           "name": "Maria",
    68.           "number": 123,
    69.           "colors": {
    70.             "primary": "red",
    71.             "secondary": "chartreuse"
    72.           }
    73.         },
    74.         {
    75.           "name": "David",
    76.           "number": 456,
    77.           "colors": {
    78.             "primary": "black",
    79.             "secondary": "yellow"
    80.           }
    81.         },
    82.         {
    83.           "name": "Felicity",
    84.           "number": 789,
    85.           "colors": {
    86.             "primary": "blue",
    87.             "secondary": "orange"
    88.           }
    89.         }
    90.       ]
    91.     }
    92.   ];
    93.  
    94.   // loop through database object
    95.   dbDocument.forEach((curVal) => {
    96.     const gridConfig = GridConfig(curVal.data);
    97.     const gridRef = new ZingGrid(gridConfig);
    98.     document.querySelector('#yourFirstGrid').appendChild(gridRef)
    99.   });
    100. });