• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js"></script>
    8.   <style>
    9.     :root {
    10.       --bgColor: #041F35;
    11.       --headerFontColor: #fff;
    12.       --mainFontColor: var(--bgColor, darkblue);
    13.       --rowColor: #777;
    14.  
    15.       --zg-caption-background: var(--bgColor, inherit);
    16.       --zg-caption-color: var(--headerFontColor, white);
    17.       --zing-grid-color: var(--mainFontColor);
    18.  
    19.       --zg-load-mask-color: red;
    20.     }
    21.  
    22.     html,
    23.     body {
    24.       height: 100%;
    25.       width: 100%;
    26.       margin: 0;
    27.       padding: 0;
    28.     }
    29.  
    30.     .button {
    31.       text-align: center;
    32.       background: #07C;
    33.       color: #FFF;
    34.       cursor: pointer;
    35.       border-radius: 3px;
    36.       font-size: 0.85rem;
    37.       padding: 5px 20px;
    38.       cursor: pointer;
    39.       margin: 15px 0 15px 15px;
    40.       position: relative;
    41.       top: 0;
    42.     }
    43.  
    44.     .button:hover {
    45.       background: #1b6ead;
    46.     }
    47.  
    48.     zing-grid[loading] {
    49.       height: 600px;
    50.     }
    51.  
    52.     zing-grid[loading] {
    53.       height: 668px;
    54.     }
    55.   </style>
    56. </head>
    57.  
    58. <body>
    59.   <zing-grid pager page-size="10" search>
    60.     <zg-caption>
    61.       ZingGrid Star Wars
    62.       <span class="button" id="reloadBtn">Reload Demo</span>
    63.     </zg-caption>
    64.     <zg-data>
    65.       <!-- define the main source for the API -->
    66.       <zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
    67.  
    68.       <!-- define the path in the JSON to get the array of results. 
    69.             In this case it is body.results -->
    70.       <zg-param name="recordPath" value="results"></zg-param>
    71.  
    72.       <!-- if loadByPage is set to true it will go to the 
    73.           server for each new page of data -->
    74.       <zg-param name="loadByPage" value="true"></zg-param>
    75.  
    76.       <!-- define the "page" query parameter -->
    77.       <zg-param name="pageKey" value="page"></zg-param>
    78.  
    79.       <!-- Need to tell ZG how many records were returned so it knows
    80.             how to divide up the page-size -->
    81.       <zg-param name="countPath" value="count"></zg-param>
    82.  
    83.       <!-- define the path in the result JSON to find next/prev urls -->
    84.       <zg-param name="nextPath" value="next"></zg-param>
    85.       <zg-param name="prevPath" value="previous"></zg-param>
    86.  
    87.       <!-- Need to tell ZG how mto search the API -->
    88.       <zg-param name="searchKey" value="search"></zg-param>
    89.     </zg-data>
    90.     <zg-colgroup>
    91.       <zg-column index="name"></zg-column>
    92.       <zg-column index="height"></zg-column>
    93.       <zg-column index="mass"></zg-column>
    94.       <zg-column index="hair_color"></zg-column>
    95.       <zg-column index="eye_color"></zg-column>
    96.       <zg-column index="skin_color"></zg-column>
    97.     </zg-colgroup>
    98.   </zing-grid>
    99.   <script>
    100.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    101.     // because this Javascript is injected into the document head
    102.     window.addEventListener('load', () => {
    103.       // Javascript code to execute after DOM content
    104.       const zgRef = document.querySelector('zing-grid');
    105.       zgRef.executeOnLoad(() => {
    106.         // Add event listener to button
    107.         reloadBtn.addEventListener('click', () => {
    108.           zgRef.refresh();
    109.         });
    110.       });
    111.     });
    112.   </script>
    113. </body>
    114.  
    115. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid pager page-size="10" search>
    12.     <zg-caption>
    13.       ZingGrid Star Wars
    14.       <span class="button" id="reloadBtn">Reload Demo</span>
    15.     </zg-caption>
    16.     <zg-data>
    17.       <!-- define the main source for the API -->
    18.       <zg-param name="src" value="https://swapi.py4e.com/api/people/"></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="results"></zg-param>
    23.  
    24.       <!-- if loadByPage is set to true it will go to the 
    25.           server for each new page of data -->
    26.       <zg-param name="loadByPage" value="true"></zg-param>
    27.  
    28.       <!-- define the "page" query parameter -->
    29.       <zg-param name="pageKey" value="page"></zg-param>
    30.  
    31.       <!-- Need to tell ZG how many records were returned so it knows
    32.             how to divide up the page-size -->
    33.       <zg-param name="countPath" value="count"></zg-param>
    34.  
    35.       <!-- define the path in the result JSON to find next/prev urls -->
    36.       <zg-param name="nextPath" value="next"></zg-param>
    37.       <zg-param name="prevPath" value="previous"></zg-param>
    38.  
    39.       <!-- Need to tell ZG how mto search the API -->
    40.       <zg-param name="searchKey" value="search"></zg-param>
    41.     </zg-data>
    42.     <zg-colgroup>
    43.       <zg-column index="name"></zg-column>
    44.       <zg-column index="height"></zg-column>
    45.       <zg-column index="mass"></zg-column>
    46.       <zg-column index="hair_color"></zg-column>
    47.       <zg-column index="eye_color"></zg-column>
    48.       <zg-column index="skin_color"></zg-column>
    49.     </zg-colgroup>
    50.   </zing-grid>
    51. </body>
    52.  
    53. </html>
    1. :root {
    2.   --bgColor: #041F35;
    3.   --headerFontColor: #fff;
    4.   --mainFontColor: var(--bgColor, darkblue);
    5.   --rowColor: #777;
    6.  
    7.   --zg-caption-background: var(--bgColor, inherit);
    8.   --zg-caption-color: var(--headerFontColor, white);
    9.   --zing-grid-color: var(--mainFontColor);
    10.  
    11.   --zg-load-mask-color: red;
    12. }
    13.  
    14. html,
    15. body {
    16.   height: 100%;
    17.   width: 100%;
    18.   margin: 0;
    19.   padding: 0;
    20. }
    21.  
    22. .button {
    23.   text-align: center;
    24.   background: #07C;
    25.   color: #FFF;
    26.   cursor: pointer;
    27.   border-radius: 3px;
    28.   font-size: 0.85rem;
    29.   padding: 5px 20px;
    30.   cursor: pointer;
    31.   margin: 15px 0 15px 15px;
    32.   position: relative;
    33.   top: 0;
    34. }
    35.  
    36. .button:hover {
    37.   background: #1b6ead;
    38. }
    39.  
    40. zing-grid[loading] {
    41.   height: 600px;
    42. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.   const zgRef = document.querySelector('zing-grid');
    6.   zgRef.executeOnLoad(() => {
    7.     // Add event listener to button
    8.     reloadBtn.addEventListener('click', () => {
    9.       zgRef.refresh();
    10.     });
    11.   });
    12. });