• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
        <style>
            body {
                background: #e6e6e6;
            }
    
            zing-grid {
                overflow: hidden;
            }
    
            zing-grid[loading] {
                height: 709px;
            }
        </style>
    </head>
    
    <body>
        <zing-grid caption="Grid Clicks: 0" data='{
            "entry1": {
              "sign": "Aquarius",
              "date": "January 20 - February 18",
              "element": "Air"
            }, 
            "entry2": {
              "sign": "Pisces",
              "date": "February 19 - March 20",
              "element": "Water"
            }, 
            "entry3": {
              "sign": "Aries",
              "date": "March 19 - May 20",
              "element": "Fire"
            }, 
            "entry4": {
              "sign": "Taurus",
              "date": "April 20 - May 18",
              "element": "Earth"
            }, 
            "entry5": {
              "sign": "Gemini",
              "date": "May 21 - June 20",
              "element": "Air"
            }, 
            "entry6": {
              "sign": "Cancer",
              "date": "June 21 - Jully 22",
              "element": "Water"
            }, 
            "entry7": {
              "sign": "Leo",
              "date": "July 23 - Auguest 22",
              "element": "Fire"
            }, 
            "entry8": {
              "sign": "Virgo",
              "date": "Auguest 23 - September 22",
              "element": "Earch"
            }, 
            "entry9": {
              "sign": "Libra",
              "date": "September 23 - October 22",
              "element": "Air"
            }, 
            "entry10": {
              "sign": "Scorpio",
              "date": "October 23 - November 21",
              "element": "Water"
            }, 
            "entry11": {
              "sign": "Sagittarius",
              "date": "November 22 - December 21",
              "element": "Fire"
            }, 
            "entry12": {
              "sign": "Capricorm",
              "date": "January 22 - January 19",
              "element": "Earth"
            }
          }'>
        </zing-grid>
        <script>
            // window.onload event for Javascript to run after HTML
            // because this Javascript is injected into the document head
            window.addEventListener('load', () => {
                // Javascript code to execute after DOM content
                const zgRef = document.querySelector('zing-grid');
                zgRef.executeOnLoad(() => {
                    let counter = 0;
                    zgRef.addEventListener('cell:click', () => {
                        zgRef.setCaption('Grid Clicks: ' + ++counter);
                    });
                });
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      </head>
      <body>
         <zing-grid
           caption="Grid Clicks: 0"
           data='{
            "entry1": {
              "sign": "Aquarius",
              "date": "January 20 - February 18",
              "element": "Air"
            }, 
            "entry2": {
              "sign": "Pisces",
              "date": "February 19 - March 20",
              "element": "Water"
            }, 
            "entry3": {
              "sign": "Aries",
              "date": "March 19 - May 20",
              "element": "Fire"
            }, 
            "entry4": {
              "sign": "Taurus",
              "date": "April 20 - May 18",
              "element": "Earth"
            }, 
            "entry5": {
              "sign": "Gemini",
              "date": "May 21 - June 20",
              "element": "Air"
            }, 
            "entry6": {
              "sign": "Cancer",
              "date": "June 21 - Jully 22",
              "element": "Water"
            }, 
            "entry7": {
              "sign": "Leo",
              "date": "July 23 - Auguest 22",
              "element": "Fire"
            }, 
            "entry8": {
              "sign": "Virgo",
              "date": "Auguest 23 - September 22",
              "element": "Earch"
            }, 
            "entry9": {
              "sign": "Libra",
              "date": "September 23 - October 22",
              "element": "Air"
            }, 
            "entry10": {
              "sign": "Scorpio",
              "date": "October 23 - November 21",
              "element": "Water"
            }, 
            "entry11": {
              "sign": "Sagittarius",
              "date": "November 22 - December 21",
              "element": "Fire"
            }, 
            "entry12": {
              "sign": "Capricorm",
              "date": "January 22 - January 19",
              "element": "Earth"
            }
          }'>
        </zing-grid>
    	</body>
    </html>
    body{background:#e6e6e6;}
    
    zing-grid {
    	overflow: hidden;
    }
    // window.onload event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      const zgRef = document.querySelector('zing-grid');
    	zgRef.executeOnLoad(() => {
        let counter = 0;
        zgRef.addEventListener('cell:click', () => {
          zgRef.setCaption('Grid Clicks: ' + ++counter);
        });
      });
    });