• 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 {
    14.       overflow: hidden;
    15.     }
    16.  
    17.     zing-grid[loading] {
    18.       height: 709px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body>
    24.   <zing-grid caption="Grid Clicks: 0" data='{
    25.         "entry1": {
    26.           "sign": "Aquarius",
    27.           "date": "January 20 - February 18",
    28.           "element": "Air"
    29.         }, 
    30.         "entry2": {
    31.           "sign": "Pisces",
    32.           "date": "February 19 - March 20",
    33.           "element": "Water"
    34.         }, 
    35.         "entry3": {
    36.           "sign": "Aries",
    37.           "date": "March 19 - May 20",
    38.           "element": "Fire"
    39.         }, 
    40.         "entry4": {
    41.           "sign": "Taurus",
    42.           "date": "April 20 - May 18",
    43.           "element": "Earth"
    44.         }, 
    45.         "entry5": {
    46.           "sign": "Gemini",
    47.           "date": "May 21 - June 20",
    48.           "element": "Air"
    49.         }, 
    50.         "entry6": {
    51.           "sign": "Cancer",
    52.           "date": "June 21 - Jully 22",
    53.           "element": "Water"
    54.         }, 
    55.         "entry7": {
    56.           "sign": "Leo",
    57.           "date": "July 23 - Auguest 22",
    58.           "element": "Fire"
    59.         }, 
    60.         "entry8": {
    61.           "sign": "Virgo",
    62.           "date": "Auguest 23 - September 22",
    63.           "element": "Earch"
    64.         }, 
    65.         "entry9": {
    66.           "sign": "Libra",
    67.           "date": "September 23 - October 22",
    68.           "element": "Air"
    69.         }, 
    70.         "entry10": {
    71.           "sign": "Scorpio",
    72.           "date": "October 23 - November 21",
    73.           "element": "Water"
    74.         }, 
    75.         "entry11": {
    76.           "sign": "Sagittarius",
    77.           "date": "November 22 - December 21",
    78.           "element": "Fire"
    79.         }, 
    80.         "entry12": {
    81.           "sign": "Capricorm",
    82.           "date": "January 22 - January 19",
    83.           "element": "Earth"
    84.         }
    85.       }'>
    86.   </zing-grid>
    87.   <script>
    88.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    89.     // because this Javascript is injected into the document head
    90.     window.addEventListener('load', () => {
    91.       // Javascript code to execute after DOM content
    92.       const zgRef = document.querySelector('zing-grid');
    93.       zgRef.executeOnLoad(() => {
    94.         let counter = 0;
    95.         zgRef.addEventListener('cell:click', () => {
    96.           zgRef.setCaption('Grid Clicks: ' + ++counter);
    97.         });
    98.       });
    99.     });
    100.   </script>
    101. </body>
    102.  
    103. </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.   <zing-grid caption="Grid Clicks: 0" data='{
    12.         "entry1": {
    13.           "sign": "Aquarius",
    14.           "date": "January 20 - February 18",
    15.           "element": "Air"
    16.         }, 
    17.         "entry2": {
    18.           "sign": "Pisces",
    19.           "date": "February 19 - March 20",
    20.           "element": "Water"
    21.         }, 
    22.         "entry3": {
    23.           "sign": "Aries",
    24.           "date": "March 19 - May 20",
    25.           "element": "Fire"
    26.         }, 
    27.         "entry4": {
    28.           "sign": "Taurus",
    29.           "date": "April 20 - May 18",
    30.           "element": "Earth"
    31.         }, 
    32.         "entry5": {
    33.           "sign": "Gemini",
    34.           "date": "May 21 - June 20",
    35.           "element": "Air"
    36.         }, 
    37.         "entry6": {
    38.           "sign": "Cancer",
    39.           "date": "June 21 - Jully 22",
    40.           "element": "Water"
    41.         }, 
    42.         "entry7": {
    43.           "sign": "Leo",
    44.           "date": "July 23 - Auguest 22",
    45.           "element": "Fire"
    46.         }, 
    47.         "entry8": {
    48.           "sign": "Virgo",
    49.           "date": "Auguest 23 - September 22",
    50.           "element": "Earch"
    51.         }, 
    52.         "entry9": {
    53.           "sign": "Libra",
    54.           "date": "September 23 - October 22",
    55.           "element": "Air"
    56.         }, 
    57.         "entry10": {
    58.           "sign": "Scorpio",
    59.           "date": "October 23 - November 21",
    60.           "element": "Water"
    61.         }, 
    62.         "entry11": {
    63.           "sign": "Sagittarius",
    64.           "date": "November 22 - December 21",
    65.           "element": "Fire"
    66.         }, 
    67.         "entry12": {
    68.           "sign": "Capricorm",
    69.           "date": "January 22 - January 19",
    70.           "element": "Earth"
    71.         }
    72.       }'>
    73.   </zing-grid>
    74. </body>
    75.  
    76. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. zing-grid {
    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.   // Javascript code to execute after DOM content
    5.   const zgRef = document.querySelector('zing-grid');
    6.   zgRef.executeOnLoad(() => {
    7.     let counter = 0;
    8.     zgRef.addEventListener('cell:click', () => {
    9.       zgRef.setCaption('Grid Clicks: ' + ++counter);
    10.     });
    11.   });
    12. });