• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: zg-status basic usage</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     .zg-body .button {
    14.       background: #2B98F0;
    15.       border: none;
    16.       border-radius: 2px;
    17.       color: #fff;
    18.       cursor: pointer;
    19.       font-size: .875rem;
    20.       padding: .5rem .625rem;
    21.       text-transform: uppercase;
    22.     }
    23.  
    24.     .zg-body .button:hover {
    25.       background: #1b6ead;
    26.     }
    27.  
    28.     zing-grid[loading] {
    29.       height: 333px;
    30.     }
    31.   </style>
    32. </head>
    33.  
    34. <body class="zg-body">
    35.   <zing-grid context-menu height=200>
    36.     <zg-caption>Trigger zg-status: <button class="button" id="insertBtn">+ Add Row</button></zg-caption>
    37.     <zg-data data='[
    38.         {
    39.           "name": "Maria",
    40.           "number": 123
    41.         },
    42.         {
    43.           "name": "Juanita",
    44.           "number": 456
    45.         },
    46.         {
    47.           "name": "Felicity",
    48.           "number": 789
    49.         }
    50.       ]'>
    51.     </zg-data>
    52.   </zing-grid>
    53.   <script>
    54.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    55.     // because this Javascript is injected into the document head
    56.     window.addEventListener('load', () => {
    57.       // Javascript code to execute after DOM content
    58.       let zgRef = document.querySelector('zing-grid');
    59.       zgRef.executeOnLoad(function() {
    60.         insertBtn.addEventListener('click', function() {
    61.           zgRef.insertRow();
    62.         });
    63.       });
    64.     });
    65.   </script>
    66. </body>
    67.  
    68. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: zg-status basic usage</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <zing-grid context-menu height=200>
    12.     <zg-caption>Trigger zg-status: <button class="button" id="insertBtn">+ Add Row</button></zg-caption>
    13.     <zg-data data='[
    14.         {
    15.           "name": "Maria",
    16.           "number": 123
    17.         },
    18.         {
    19.           "name": "Juanita",
    20.           "number": 456
    21.         },
    22.         {
    23.           "name": "Felicity",
    24.           "number": 789
    25.         }
    26.       ]'>
    27.     </zg-data>
    28.   </zing-grid>
    29. </body>
    30.  
    31. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. .zg-body .button {
    6.   background: #2B98F0;
    7.   border: none;
    8.   border-radius: 2px;
    9.   color: #fff;
    10.   cursor: pointer;
    11.   font-size: .875rem;
    12.   padding: .5rem .625rem;
    13.   text-transform: uppercase;
    14. }
    15.  
    16. .zg-body .button:hover {
    17.   background: #1b6ead;
    18. }
    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.   let zgRef = document.querySelector('zing-grid');
    6.   zgRef.executeOnLoad(function() {
    7.     insertBtn.addEventListener('click', function() {
    8.       zgRef.insertRow();
    9.     });
    10.   });
    11. });