• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: REST API</title>
      <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
      <style>
        zing-grid[loading] {
          min-height: 400px;
        }
    
        button {
          text-align: center;
          background: #07C;
          color: #FFF;
          cursor: pointer;
          border-radius: 3px;
          border-color: transparent;
          font-size: 0.85rem;
          padding: 5px 20px;
          cursor: pointer;
          margin: 15px 0 15px 15px;
          position: relative;
        }
    
        button:hover {
          background: #1b6ead;
        }
    
        zing-grid[loading] {
          height: 431px;
        }
      </style>
    </head>
    
    <body>
      <zing-grid pager page-size="5" search selector>
        <zg-caption>
          Nobel Prize Winners
          <button onClick="getGridData();">Get Data</button>
        </zg-caption>
        <zg-data>
          <!-- define the main source for the API -->
          <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/nobel-prize-winners.json"></zg-param>
    
          <!-- define the path in the JSON to get the array of results. 
                In this case it is body.results -->
          <zg-param name="recordPath" value="prizes"></zg-param>
        </zg-data>
        <zg-colgroup>
          <zg-column index="year"></zg-column>
          <zg-column index="category"></zg-column>
          <zg-column index="laureates" renderer="renderLaureates">
            <ul>
            </ul>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
      <script>
        ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    
        function renderLaureates(laureates, $cell) {
          let stringHtml = '';
          laureates.forEach(entry => {
            stringHtml += `
    			<li>${entry.firstname} ${entry.surname}</li>
    		`;
          });
    
          return stringHtml;
        }
    
        function getGridData() {
          const zgRef = document.querySelector('zing-grid');
          const gridData = zgRef.getData({
            cols: true,
            rows: true
          });
          console.log('--- Getting Data From Grid: ---', gridData);
          alert('Check console for exported data!');
        }
    
        // search grid on load
        window.addEventListener('load', () => {
          const zgRef = document.querySelector('zing-grid');
          zgRef.addEventListener('grid:select', function(e) {
            const data = e.detail.ZGData.selectedData;
            console.log('--- exporting selected data ----', data);
          });
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: REST API</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    </head>
    
    <body>
      <zing-grid pager page-size="5" search selector>
        <zg-caption>
          Nobel Prize Winners
          <button onClick="getGridData();">Get Data</button>
        </zg-caption>
        <zg-data>
          <!-- define the main source for the API -->
          <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/nobel-prize-winners.json"></zg-param>
    
          <!-- define the path in the JSON to get the array of results. 
                In this case it is body.results -->
          <zg-param name="recordPath" value="prizes"></zg-param>
        </zg-data>
        <zg-colgroup>
          <zg-column index="year"></zg-column>
          <zg-column index="category"></zg-column>
          <zg-column index="laureates" renderer="renderLaureates">
            <ul>
            </ul>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
    </body>
    
    </html>
    zing-grid[loading] {
      min-height: 400px;
    }
    
    button {
      text-align: center;
      background: #07C;
      color: #FFF;
      cursor: pointer;
      border-radius: 3px;
      border-color: transparent;
      font-size: 0.85rem;
      padding: 5px 20px;
      cursor: pointer;
      margin: 15px 0 15px 15px;
      position: relative;
    }
    
    button:hover {
      background: #1b6ead;
    }
    function renderLaureates(laureates, $cell) {
      let stringHtml = '';
      laureates.forEach(entry => {
        stringHtml += `
    			<li>${entry.firstname} ${entry.surname}</li>
    		`;
      });
    
      return stringHtml;
    }
    
    function getGridData() {
      const zgRef = document.querySelector('zing-grid');
      const gridData = zgRef.getData({
        cols: true,
        rows: true
      });
      console.log('--- Getting Data From Grid: ---', gridData);
      alert('Check console for exported data!');
    }
    
    // search grid on load
    window.addEventListener('load', () => {
      const zgRef = document.querySelector('zing-grid');
      zgRef.addEventListener('grid:select', function(e) {
        const data = e.detail.ZGData.selectedData;
        console.log('--- exporting selected data ----', data);
      });
    });