• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: REST API</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     zing-grid[loading] {
    10.       min-height: 400px;
    11.     }
    12.  
    13.     button {
    14.       text-align: center;
    15.       background: #07C;
    16.       color: #FFF;
    17.       cursor: pointer;
    18.       border-radius: 3px;
    19.       border-color: transparent;
    20.       font-size: 0.85rem;
    21.       padding: 5px 20px;
    22.       cursor: pointer;
    23.       margin: 15px 0 15px 15px;
    24.       position: relative;
    25.     }
    26.  
    27.     button:hover {
    28.       background: #1b6ead;
    29.     }
    30.  
    31.     zing-grid[loading] {
    32.       height: 431px;
    33.     }
    34.   </style>
    35. </head>
    36.  
    37. <body>
    38.   <zing-grid pager page-size="5" search>
    39.     <zg-caption>
    40.       Nobel Prize Winners
    41.       <button onClick="getGridData();">Get Data</button>
    42.     </zg-caption>
    43.     <zg-data>
    44.       <!-- define the main source for the API -->
    45.       <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/nobel-prize-winners.json"></zg-param>
    46.  
    47.       <!-- define the path in the JSON to get the array of results. 
    48.             In this case it is body.results -->
    49.       <zg-param name="recordPath" value="prizes"></zg-param>
    50.     </zg-data>
    51.     <zg-colgroup>
    52.       <zg-column index="year"></zg-column>
    53.       <zg-column index="category"></zg-column>
    54.       <zg-column index="laureates" renderer="renderLaureates">
    55.         <ul>
    56.         </ul>
    57.       </zg-column>
    58.     </zg-colgroup>
    59.   </zing-grid>
    60.   <script>
    61.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    62.  
    63.     function renderLaureates(laureates, $cell) {
    64.       let stringHtml = '';
    65.       laureates.forEach(entry => {
    66.         stringHtml += `
    67. 			<li>${entry.firstname} ${entry.surname}</li>
    68. 		`;
    69.       });
    70.  
    71.       return stringHtml;
    72.     }
    73.  
    74.     function getGridData() {
    75.       const zgRef = document.querySelector('zing-grid');
    76.       const gridData = zgRef.getData({
    77.         csv: true,
    78.         headers: true
    79.       });
    80.       console.log('--- Getting Data From Grid: ---', gridData);
    81.       alert('Check console for exported data!');
    82.     }
    83.   </script>
    84. </body>
    85.  
    86. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: REST API</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid pager page-size="5" search>
    12.     <zg-caption>
    13.       Nobel Prize Winners
    14.       <button onClick="getGridData();">Get Data</button>
    15.     </zg-caption>
    16.     <zg-data>
    17.       <!-- define the main source for the API -->
    18.       <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/nobel-prize-winners.json"></zg-param>
    19.  
    20.       <!-- define the path in the JSON to get the array of results. 
    21.             In this case it is body.results -->
    22.       <zg-param name="recordPath" value="prizes"></zg-param>
    23.     </zg-data>
    24.     <zg-colgroup>
    25.       <zg-column index="year"></zg-column>
    26.       <zg-column index="category"></zg-column>
    27.       <zg-column index="laureates" renderer="renderLaureates">
    28.         <ul>
    29.         </ul>
    30.       </zg-column>
    31.     </zg-colgroup>
    32.   </zing-grid>
    33. </body>
    34.  
    35. </html>
    1. zing-grid[loading] {
    2.   min-height: 400px;
    3. }
    4.  
    5. button {
    6.   text-align: center;
    7.   background: #07C;
    8.   color: #FFF;
    9.   cursor: pointer;
    10.   border-radius: 3px;
    11.   border-color: transparent;
    12.   font-size: 0.85rem;
    13.   padding: 5px 20px;
    14.   cursor: pointer;
    15.   margin: 15px 0 15px 15px;
    16.   position: relative;
    17. }
    18.  
    19. button:hover {
    20.   background: #1b6ead;
    21. }
    1. function renderLaureates(laureates, $cell) {
    2.   let stringHtml = '';
    3.   laureates.forEach(entry => {
    4.     stringHtml += `
    5. 			<li>${entry.firstname} ${entry.surname}</li>
    6. 		`;
    7.   });
    8.  
    9.   return stringHtml;
    10. }
    11.  
    12. function getGridData() {
    13.   const zgRef = document.querySelector('zing-grid');
    14.   const gridData = zgRef.getData({
    15.     csv: true,
    16.     headers: true
    17.   });
    18.   console.log('--- Getting Data From Grid: ---', gridData);
    19.   alert('Check console for exported data!');
    20. }