[Docs] col renderer Function

<!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: 744px;
    }
  </style>
</head>

<body>
  <!-- Most features can be toggled on the toplevel zing-grid tag -->
  <zing-grid caption="Column Renderer Function" layout="row" layout-controls="disabled" 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>
    <!-- must define columns for renderer -->
    <zg-colgroup>
      <zg-column index="breed"></zg-column>
      <zg-column index="name" type-select-options=""></zg-column>
      <zg-column index="custom" renderer="noIndexCellRenderer">
        <h3>[[record.name]]</h3>
        <select>
          <option value="" disabled selected>Please Choose One</option>
        </select>
      </zg-column>
    </zg-colgroup>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // define custom cell renderer and assign content
    // and event listeners inside function
    function noIndexCellRenderer(stubArgument, 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="Column Renderer Function" layout="row" layout-controls="disabled" 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>
    <!-- must define columns for renderer -->
    <zg-colgroup>
      <zg-column index="breed"></zg-column>
      <zg-column index="name" type-select-options=""></zg-column>
      <zg-column index="custom" renderer="noIndexCellRenderer">
        <h3>[[record.name]]</h3>
        <select>
          <option value="" disabled selected>Please Choose One</option>
        </select>
      </zg-column>
    </zg-colgroup>
  </zing-grid>

</body>

</html>

body {
  background: #e6e6e6;
}

// define custom cell renderer and assign content
// and event listeners inside function
function noIndexCellRenderer(stubArgument, 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}`);
  });
}