• 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.     zing-grid[loading] {
    11.       height: 698px;
    12.     }
    13.   </style>
    14. </head>
    15.  
    16. <body>
    17.   <!--Grid Component Placement[2]-->
    18.   <zing-grid caption="Our Favorite Characters" sort search lang="us" pager editor-controls page-size="10" page-size-options="5,10" data='[
    19.         {
    20.           "name": "Philip J. Fry",
    21.           "show": "Futurama",
    22.           "origin": "Earth"
    23.         },
    24.         {
    25.           "name": "Rick Sanchez",
    26.           "show": "Rick and Morty",
    27.           "origin": "C-137"
    28.         },
    29.         {
    30.           "name": "Turanga Leela",
    31.           "show": "Futurama",
    32.           "origin": "Earth"
    33.         },
    34.         {
    35.           "name": "Mr. Meeseeks",
    36.           "show": "Rick and Morty",
    37.           "origin": "C-137"
    38.         },
    39.         {
    40.           "name": "Morty Smith",
    41.           "show": "Rick and Morty",
    42.           "origin": "C-137"
    43.         },
    44.         {
    45.           "name": "Bender Bending Rodriguez",
    46.           "show": "Futurama",
    47.           "origin": "Earth"
    48.         },
    49.         {
    50.           "name": "Amy Wong",
    51.           "show": "Futurama",
    52.           "origin": "Earth"
    53.         },
    54.         {
    55.           "name": "Bird Person",
    56.           "show": "Rick and Morty",
    57.           "origin": "C-137"
    58.         },
    59.         {
    60.           "name": "Doctor John Zoidberg",
    61.           "show": "Futurama",
    62.           "origin": "Decapod 10"
    63.         },
    64.         {
    65.           "name": "Summer Smith",
    66.           "show": "Rick and Morty",
    67.           "origin": "C-137"
    68.         },
    69.         {
    70.           "name": "Lord Nibbler",
    71.           "show": "Futurama",
    72.           "origin": "Earth"
    73.         }
    74.       ]'>
    75.   </zing-grid>
    76.   <script>
    77.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    78.     // because this Javascript is injected into the document head
    79.     window.addEventListener('load', () => {
    80.       // content after DOM load
    81.     });
    82.   </script>
    83. </body>
    84.  
    85. </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="Our Favorite Characters" sort search lang="us" pager editor-controls page-size="10" page-size-options="5,10" data='[
    14.         {
    15.           "name": "Philip J. Fry",
    16.           "show": "Futurama",
    17.           "origin": "Earth"
    18.         },
    19.         {
    20.           "name": "Rick Sanchez",
    21.           "show": "Rick and Morty",
    22.           "origin": "C-137"
    23.         },
    24.         {
    25.           "name": "Turanga Leela",
    26.           "show": "Futurama",
    27.           "origin": "Earth"
    28.         },
    29.         {
    30.           "name": "Mr. Meeseeks",
    31.           "show": "Rick and Morty",
    32.           "origin": "C-137"
    33.         },
    34.         {
    35.           "name": "Morty Smith",
    36.           "show": "Rick and Morty",
    37.           "origin": "C-137"
    38.         },
    39.         {
    40.           "name": "Bender Bending Rodriguez",
    41.           "show": "Futurama",
    42.           "origin": "Earth"
    43.         },
    44.         {
    45.           "name": "Amy Wong",
    46.           "show": "Futurama",
    47.           "origin": "Earth"
    48.         },
    49.         {
    50.           "name": "Bird Person",
    51.           "show": "Rick and Morty",
    52.           "origin": "C-137"
    53.         },
    54.         {
    55.           "name": "Doctor John Zoidberg",
    56.           "show": "Futurama",
    57.           "origin": "Decapod 10"
    58.         },
    59.         {
    60.           "name": "Summer Smith",
    61.           "show": "Rick and Morty",
    62.           "origin": "C-137"
    63.         },
    64.         {
    65.           "name": "Lord Nibbler",
    66.           "show": "Futurama",
    67.           "origin": "Earth"
    68.         }
    69.       ]'>
    70.   </zing-grid>
    71. </body>
    72.  
    73. </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.   // content after DOM load
    5. });