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