• 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: 288px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <!-- Most features can be toggled on the toplevel zing-grid tag -->
    21.   <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>
    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.  
    34.     <!-- define custom card mode  -->
    35.     <zg-card renderer="cardRenderer">
    36.       <div>
    37.         <h2>[[record.breed]]</h2>
    38.         <span>Name: [[record.name]]</span>
    39.         <hr>
    40.         <select>
    41.           <option value="" disabled selected>Please Choose One</option>
    42.         </select>
    43.       </div>
    44.     </zg-card>
    45.   </zing-grid>
    46.  
    47.   <script>
    48.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // define custom card renderer and assign content 
    49.     // and event listeners inside function
    50.     function cardRenderer(record, cellDOMRef, cellRef) {
    51.       const dogBreeds = [
    52.         'Cane Corso',
    53.         'Pug',
    54.         'Corgi',
    55.         'Pomeranian',
    56.         'Great Dane',
    57.         'Frenchie',
    58.       ];
    59.  
    60.       // get reference to select dropdown
    61.       const selectDropdown = cellDOMRef.querySelector('select');
    62.  
    63.       // sort breeds and populate select dropdown
    64.       dogBreeds.sort().forEach(breed => {
    65.         const breedOption = document.createElement('option');
    66.         breedOption.textContent = breed;
    67.         breedOption.value = breed;
    68.         selectDropdown.appendChild(breedOption);
    69.       });
    70.  
    71.       // add events in renderer as well
    72.       selectDropdown.addEventListener('change', (e) => {
    73.         const newType = e.target.value;
    74.         alert(`Select dropdown changed to: ${newType}`);
    75.       });
    76.     }
    77.   </script>
    78. </body>
    79.  
    80. </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="Custom Card Renderer" columns-control filter layout="card" layout-controls pager page-size="4" page-size-options="2,4,8,16" 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.  
    25.     <!-- define custom card mode  -->
    26.     <zg-card renderer="cardRenderer">
    27.       <div>
    28.         <h2>[[record.breed]]</h2>
    29.         <span>Name: [[record.name]]</span>
    30.         <hr>
    31.         <select>
    32.           <option value="" disabled selected>Please Choose One</option>
    33.         </select>
    34.       </div>
    35.     </zg-card>
    36.   </zing-grid>
    37.  
    38. </body>
    39.  
    40. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    1. // define custom card renderer and assign content 
    2. // and event listeners inside function
    3. function cardRenderer(record, 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. }