API: Methods and Events

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></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>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load 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"></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:load 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);
    });
  });
});