• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Docs Getting Started</title>
    7.   <!--Script Reference[1]-->
    8.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       width: 100%;
    13.       height: 100%;
    14.       position: relative;
    15.       overflow: hidden;
    16.     }
    17.  
    18.     zing-grid[loading] {
    19.       height: 367px;
    20.     }
    21.   </style>
    22. </head>
    23.  
    24. <body>
    25.   <!--Grid Component Placement[2]-->
    26.   <zing-grid caption="Hello Futurama" sort search pager page-size="3" page-size-options="2,3,6" layout="row" viewport-stop data='[
    27.         {
    28.           "name": "Philip J. Fry",
    29.           "origin": "Earth"
    30.         },
    31.         {
    32.           "name": "Turanga Leela",
    33.           "origin": "Earth"
    34.         },
    35.         {
    36.           "name": "Bender Bending Rodriguez",
    37.           "origin": "Earth"
    38.         },
    39.         {
    40.           "name": "Amy Wong",
    41.           "origin": "Mars"
    42.         },
    43.         {
    44.           "name": "Doctor John Zoidberg",
    45.           "origin": "Decapod 10"
    46.         },
    47.         {
    48.           "name": "Lord Nibbler",
    49.           "origin": "Earth"
    50.         }
    51.       ]'>
    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.       // content after DOM load
    58.     });
    59.   </script>
    60. </body>
    61.  
    62. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Docs Getting Started</title>
    7.   <!--Script Reference[1]-->
    8.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <!--Grid Component Placement[2]-->
    13.   <zing-grid caption="Hello Futurama" sort search pager page-size="3" page-size-options="2,3,6" layout="row" viewport-stop data='[
    14.         {
    15.           "name": "Philip J. Fry",
    16.           "origin": "Earth"
    17.         },
    18.         {
    19.           "name": "Turanga Leela",
    20.           "origin": "Earth"
    21.         },
    22.         {
    23.           "name": "Bender Bending Rodriguez",
    24.           "origin": "Earth"
    25.         },
    26.         {
    27.           "name": "Amy Wong",
    28.           "origin": "Mars"
    29.         },
    30.         {
    31.           "name": "Doctor John Zoidberg",
    32.           "origin": "Decapod 10"
    33.         },
    34.         {
    35.           "name": "Lord Nibbler",
    36.           "origin": "Earth"
    37.         }
    38.       ]'>
    39.   </zing-grid>
    40. </body>
    41.  
    42. </html>
    1. html,
    2. body {
    3.   width: 100%;
    4.   height: 100%;
    5.   position: relative;
    6.   overflow: hidden;
    7. }
    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.   // content after DOM load
    5. });