• 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/zinggrid.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.  
    20.  
    21.     .zg-body .button {
    22.       text-align: center;
    23.       background: #07C;
    24.       color: #FFF;
    25.       cursor: pointer;
    26.       border-radius: 3px;
    27.       font-size: 0.85rem;
    28.       padding: 5px 20px;
    29.       cursor: pointer;
    30.       margin: 15px 0 15px 15px;
    31.       position: relative;
    32.       top: 0;
    33.     }
    34.  
    35.     .zg-body .button:hover {
    36.       background: #1b6ead;
    37.     }
    38.  
    39.     zing-grid[loading] {
    40.       min-height: 600px;
    41.     }
    42.  
    43.     /* hide some inner grid elements */
    44.     zing-grid[loading] zg-pager {
    45.       visibility: hidden;
    46.     }
    47.  
    48.  
    49.     zg-load-mask {
    50.       /* set the color to match the gif */
    51.       opacity: .90;
    52.       top: 65px;
    53.       height: calc(100% - 65px);
    54.       /* custom gif for loading */
    55.       background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
    56.       /* Center and scale the image nicely */
    57.       background-position: center;
    58.       background-repeat: repeat;
    59.       background-size: contain;
    60.     }
    61.  
    62.     zing-grid[loading] {
    63.       height: 380px;
    64.     }
    65.   </style>
    66. </head>
    67.  
    68. <body class="zg-body">
    69.   <zing-grid pager page-size="4" layout="row" layout-controls="disabled" viewport-stop>
    70.     <zg-caption>
    71.       ZingGrid Star Wars
    72.       <span class="button" id="reloadBtn">Reload Demo</span>
    73.     </zg-caption>
    74.     <zg-data>
    75.       <!-- define the main source for the API -->
    76.       <zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
    77.  
    78.       <!-- define the path in the JSON to get the array of results. 
    79.             In this case it is body.results -->
    80.       <zg-param name="recordPath" value="results"></zg-param>
    81.  
    82.       <!-- if loadByPage is set to true it will go to the 
    83.           server for each new page of data -->
    84.       <zg-param name="loadByPage" value="true"></zg-param>
    85.  
    86.       <!-- define the "page" query parameter -->
    87.       <zg-param name="pageKey" value="page"></zg-param>
    88.  
    89.       <!-- Need to tell ZG how many records were returned so it knows
    90.             how to divide up the page-size -->
    91.       <zg-param name="countPath" value="count"></zg-param>
    92.  
    93.       <!-- define the path in the result JSON to find next/prev urls -->
    94.       <zg-param name="nextPath" value="next"></zg-param>
    95.       <zg-param name="prevPath" value="previous"></zg-param>
    96.  
    97.     </zg-data>
    98.     <zg-colgroup>
    99.       <zg-column index="name"></zg-column>
    100.       <zg-column index="height"></zg-column>
    101.       <zg-column index="mass"></zg-column>
    102.       <zg-column index="hair_color"></zg-column>
    103.       <zg-column index="eye_color"></zg-column>
    104.       <zg-column index="skin_color"></zg-column>
    105.     </zg-colgroup>
    106.   </zing-grid>
    107.   <script>
    108.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    109.     // because this Javascript is injected into the document head
    110.     window.addEventListener('load', () => {
    111.       // Javascript code to execute after DOM content
    112.       const zgRef = document.querySelector('zing-grid');
    113.       zgRef.executeOnLoad(() => {
    114.         // Add event listener to button
    115.         reloadBtn.addEventListener('click', () => {
    116.           zgRef.refresh();
    117.         });
    118.       });
    119.     });
    120.   </script>
    121. </body>
    122.  
    123. </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/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <zing-grid pager page-size="4" layout="row" layout-controls="disabled" viewport-stop>
    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.     </zg-data>
    40.     <zg-colgroup>
    41.       <zg-column index="name"></zg-column>
    42.       <zg-column index="height"></zg-column>
    43.       <zg-column index="mass"></zg-column>
    44.       <zg-column index="hair_color"></zg-column>
    45.       <zg-column index="eye_color"></zg-column>
    46.       <zg-column index="skin_color"></zg-column>
    47.     </zg-colgroup>
    48.   </zing-grid>
    49. </body>
    50.  
    51. </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.  
    12.  
    13. .zg-body .button {
    14.   text-align: center;
    15.   background: #07C;
    16.   color: #FFF;
    17.   cursor: pointer;
    18.   border-radius: 3px;
    19.   font-size: 0.85rem;
    20.   padding: 5px 20px;
    21.   cursor: pointer;
    22.   margin: 15px 0 15px 15px;
    23.   position: relative;
    24.   top: 0;
    25. }
    26.  
    27. .zg-body .button:hover {
    28.   background: #1b6ead;
    29. }
    30.  
    31. zing-grid[loading] {
    32.   min-height: 600px;
    33. }
    34.  
    35. /* hide some inner grid elements */
    36. zing-grid[loading] zg-pager {
    37.   visibility: hidden;
    38. }
    39.  
    40.  
    41. zg-load-mask {
    42.   /* set the color to match the gif */
    43.   opacity: .90;
    44.   top: 65px;
    45.   height: calc(100% - 65px);
    46.   /* custom gif for loading */
    47.   background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
    48.   /* Center and scale the image nicely */
    49.   background-position: center;
    50.   background-repeat: repeat;
    51.   background-size: contain;
    52. }
    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. });