• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid[loading] {
    14.       height: 744px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    21.   <zing-grid caption="Column Renderer Function" layout="row" layout-controls="disabled" viewport-stop>
    22.     <!-- dataset -->
    23.     <zg-data data='[
    24.       	{ "breed": "Cane Corso", "name": "Ziva"},
    25.       	{ "breed": "Pug", "name": "Doug"},
    26.       	{ "breed": "Corgi", "name": "Jenny"},
    27.       	{ "breed": "Pomeranian", "name": "Koda"},
    28.       	{ "breed": "Great Dane", "name": "Zeus"},
    29.       	{ "breed": "Frenchie", "name": "Bruce"},
    30.       	{ "breed": "Cane Corso", "name": "Sofia"},
    31.       	{ "breed": "Pomeranian", "name": "Snowball"}
    32.       ]'></zg-data>
    33.     <!-- must define columns for renderer -->
    34.     <zg-colgroup>
    35.       <zg-column index="breed"></zg-column>
    36.       <zg-column index="name" type-select-options=""></zg-column>
    37.       <zg-column index="custom" renderer="noIndexCellRenderer">
    38.         <h3>[[record.name]]</h3>
    39.         <select>
    40.           <option value="" disabled selected>Please Choose One</option>
    41.         </select>
    42.       </zg-column>
    43.     </zg-colgroup>
    44.   </zing-grid>
    45.  
    46.   <script>
    47.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // define custom cell renderer and assign content
    48.     // and event listeners inside function
    49.     function noIndexCellRenderer(stubArgument, cellDOMRef, cellRef) {
    50.       const dogBreeds = [
    51.         'Cane Corso',
    52.         'Pug',
    53.         'Corgi',
    54.         'Pomeranian',
    55.         'Great Dane',
    56.         'Frenchie',
    57.       ];
    58.  
    59.       // get reference to select dropdown
    60.       const selectDropdown = cellDOMRef.querySelector('select');
    61.  
    62.       // sort breeds and populate select dropdown
    63.       dogBreeds.sort().forEach(breed => {
    64.         const breedOption = document.createElement('option');
    65.         breedOption.textContent = breed;
    66.         breedOption.value = breed;
    67.         selectDropdown.appendChild(breedOption);
    68.       });
    69.  
    70.       // add events in renderer as well
    71.       selectDropdown.addEventListener('change', (e) => {
    72.         const newType = e.target.value;
    73.         alert(`Select dropdown changed to: ${newType}`);
    74.       });
    75.     }
    76.   </script>
    77. </body>
    78.  
    79. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    12.   <zing-grid caption="Column Renderer Function" layout="row" layout-controls="disabled" viewport-stop>
    13.     <!-- dataset -->
    14.     <zg-data data='[
    15.       	{ "breed": "Cane Corso", "name": "Ziva"},
    16.       	{ "breed": "Pug", "name": "Doug"},
    17.       	{ "breed": "Corgi", "name": "Jenny"},
    18.       	{ "breed": "Pomeranian", "name": "Koda"},
    19.       	{ "breed": "Great Dane", "name": "Zeus"},
    20.       	{ "breed": "Frenchie", "name": "Bruce"},
    21.       	{ "breed": "Cane Corso", "name": "Sofia"},
    22.       	{ "breed": "Pomeranian", "name": "Snowball"}
    23.       ]'></zg-data>
    24.     <!-- must define columns for renderer -->
    25.     <zg-colgroup>
    26.       <zg-column index="breed"></zg-column>
    27.       <zg-column index="name" type-select-options=""></zg-column>
    28.       <zg-column index="custom" renderer="noIndexCellRenderer">
    29.         <h3>[[record.name]]</h3>
    30.         <select>
    31.           <option value="" disabled selected>Please Choose One</option>
    32.         </select>
    33.       </zg-column>
    34.     </zg-colgroup>
    35.   </zing-grid>
    36.  
    37. </body>
    38.  
    39. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    1. // define custom cell renderer and assign content
    2. // and event listeners inside function
    3. function noIndexCellRenderer(stubArgument, cellDOMRef, cellRef) {
    4.   const dogBreeds = [
    5.     'Cane Corso',
    6.     'Pug',
    7.     'Corgi',
    8.     'Pomeranian',
    9.     'Great Dane',
    10.     'Frenchie',
    11.   ];
    12.  
    13.   // get reference to select dropdown
    14.   const selectDropdown = cellDOMRef.querySelector('select');
    15.  
    16.   // sort breeds and populate select dropdown
    17.   dogBreeds.sort().forEach(breed => {
    18.     const breedOption = document.createElement('option');
    19.     breedOption.textContent = breed;
    20.     breedOption.value = breed;
    21.     selectDropdown.appendChild(breedOption);
    22.   });
    23.  
    24.   // add events in renderer as well
    25.   selectDropdown.addEventListener('change', (e) => {
    26.     const newType = e.target.value;
    27.     alert(`Select dropdown changed to: ${newType}`);
    28.   });
    29. }