[Docs] zg-card Renderer

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
  <style>
    body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 288px;
    }
  </style>
</head>

<body>
  <!-- Most features can be toggled on the toplevel zing-grid tag -->
  <zing-grid caption="Custom Card Renderer" columns-control filter layout="card" layout-controls pager page-size="4" page-size-options="2,4,8,16" viewport-stop>
    <!-- dataset -->
    <zg-data data='[
      	{ "breed": "Cane Corso", "name": "Ziva"},
      	{ "breed": "Pug", "name": "Doug"},
      	{ "breed": "Corgi", "name": "Jenny"},
      	{ "breed": "Pomeranian", "name": "Koda"},
      	{ "breed": "Great Dane", "name": "Zeus"},
      	{ "breed": "Frenchie", "name": "Bruce"},
      	{ "breed": "Cane Corso", "name": "Sofia"},
      	{ "breed": "Pomeranian", "name": "Snowball"}
      ]'></zg-data>

    <!-- define custom card mode  -->
    <zg-card renderer="cardRenderer">
      <div>
        <h2>[[record.breed]]</h2>
        <span>Name: [[record.name]]</span>
        <hr>
        <select>
          <option value="" disabled selected>Please Choose One</option>
        </select>
      </div>
    </zg-card>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // define custom card renderer and assign content 
    // and event listeners inside function
    function cardRenderer(record, cellDOMRef, cellRef) {
      const dogBreeds = [
        'Cane Corso',
        'Pug',
        'Corgi',
        'Pomeranian',
        'Great Dane',
        'Frenchie',
      ];

      // get reference to select dropdown
      const selectDropdown = cellDOMRef.querySelector('select');

      // sort breeds and populate select dropdown
      dogBreeds.sort().forEach(breed => {
        const breedOption = document.createElement('option');
        breedOption.textContent = breed;
        breedOption.value = breed;
        selectDropdown.appendChild(breedOption);
      });

      // add events in renderer as well
      selectDropdown.addEventListener('change', (e) => {
        const newType = e.target.value;
        alert(`Select dropdown changed to: ${newType}`);
      });
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
</head>

<body>
  <!-- Most features can be toggled on the toplevel zing-grid tag -->
  <zing-grid caption="Custom Card Renderer" columns-control filter layout="card" layout-controls pager page-size="4" page-size-options="2,4,8,16" viewport-stop>
    <!-- dataset -->
    <zg-data data='[
      	{ "breed": "Cane Corso", "name": "Ziva"},
      	{ "breed": "Pug", "name": "Doug"},
      	{ "breed": "Corgi", "name": "Jenny"},
      	{ "breed": "Pomeranian", "name": "Koda"},
      	{ "breed": "Great Dane", "name": "Zeus"},
      	{ "breed": "Frenchie", "name": "Bruce"},
      	{ "breed": "Cane Corso", "name": "Sofia"},
      	{ "breed": "Pomeranian", "name": "Snowball"}
      ]'></zg-data>

    <!-- define custom card mode  -->
    <zg-card renderer="cardRenderer">
      <div>
        <h2>[[record.breed]]</h2>
        <span>Name: [[record.name]]</span>
        <hr>
        <select>
          <option value="" disabled selected>Please Choose One</option>
        </select>
      </div>
    </zg-card>
  </zing-grid>

</body>

</html>

body {
  background: #e6e6e6;
}

// define custom card renderer and assign content 
// and event listeners inside function
function cardRenderer(record, cellDOMRef, cellRef) {
  const dogBreeds = [
    'Cane Corso',
    'Pug',
    'Corgi',
    'Pomeranian',
    'Great Dane',
    'Frenchie',
  ];

  // get reference to select dropdown
  const selectDropdown = cellDOMRef.querySelector('select');

  // sort breeds and populate select dropdown
  dogBreeds.sort().forEach(breed => {
    const breedOption = document.createElement('option');
    breedOption.textContent = breed;
    breedOption.value = breed;
    selectDropdown.appendChild(breedOption);
  });

  // add events in renderer as well
  selectDropdown.addEventListener('change', (e) => {
    const newType = e.target.value;
    alert(`Select dropdown changed to: ${newType}`);
  });
}