• Edit
  • Download
  • <!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}`);
      });
    }