• 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: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid[loading] {
    14.       height: 357px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.  
    21.   <h3>`[dialog]` sets ZGDialog to be within the grid dimentions instead of
    22.     the whole page. Double-click ZGCell to open ZGDialog.</h3>
    23.   <zing-grid dialog editor="modal">
    24.     <zg-data data='[
    25.         {
    26.           "name": "Maria",
    27.           "number": 123
    28.         },
    29.         {
    30.           "name": "Juanita",
    31.           "number": 456
    32.         },
    33.         {
    34.           "name": "Felicity",
    35.           "number": 789
    36.         },
    37.         {
    38.           "name": "John",
    39.           "number": 111
    40.         },
    41.         {
    42.           "name": "Jane",
    43.           "number": 222
    44.         },
    45.         {
    46.           "name": "Doe",
    47.           "number": 333
    48.         }
    49.       ]'></zg-data>
    50.   </zing-grid>
    51.  
    52.   <script>
    53.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    54.     // because this Javascript is injected into the document head
    55.     window.addEventListener('load', () => {
    56.       // Javascript code to execute after DOM content
    57.     });
    58.   </script>
    59. </body>
    60.  
    61. </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.  
    12.   <h3>`[dialog]` sets ZGDialog to be within the grid dimentions instead of
    13.     the whole page. Double-click ZGCell to open ZGDialog.</h3>
    14.   <zing-grid dialog editor="modal">
    15.     <zg-data data='[
    16.         {
    17.           "name": "Maria",
    18.           "number": 123
    19.         },
    20.         {
    21.           "name": "Juanita",
    22.           "number": 456
    23.         },
    24.         {
    25.           "name": "Felicity",
    26.           "number": 789
    27.         },
    28.         {
    29.           "name": "John",
    30.           "number": 111
    31.         },
    32.         {
    33.           "name": "Jane",
    34.           "number": 222
    35.         },
    36.         {
    37.           "name": "Doe",
    38.           "number": 333
    39.         }
    40.       ]'></zg-data>
    41.   </zing-grid>
    42.  
    43. </body>
    44.  
    45. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    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. });