• 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.     .zg-body zing-grid[loading] {
    10.       min-height: 600px;
    11.     }
    12.  
    13.     /* hide some inner grid elements */
    14.     .zg-body zing-grid[loading] zg-pager {
    15.       visibility: hidden;
    16.     }
    17.  
    18.     .zg-body zg-pager zg-select {
    19.       display: none;
    20.     }
    21.  
    22.     .zg-body zg-load-mask {
    23.       /* set the color to match the gif */
    24.       opacity: .90;
    25.       height: calc(100%);
    26.       /* custom gif for loading */
    27.       background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
    28.       /* Center and scale the image nicely */
    29.       background-position: center;
    30.       background-repeat: repeat;
    31.       background-size: contain;
    32.     }
    33.  
    34.     zing-grid[loading] {
    35.       height: 373px;
    36.     }
    37.   </style>
    38. </head>
    39.  
    40. <body class="zg-body">
    41.   <zing-grid caption="Cursor Based Pagination" pager page-size="4" search>
    42.     <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/cursor-paging/api">
    43.       <!-- where to retrieve data from -->
    44.       <zg-param name="recordPath" value="data"></zg-param>
    45.       <!-- enable server paging -->
    46.       <zg-param name="loadByPage" value="true"></zg-param>
    47.       <!-- enable cursor server paging -->
    48.       <zg-param name="cursor" value="true"></zg-param>
    49.       <!-- return value from cursor endpoint for previous page -->
    50.       <zg-param name="prevIDPath" value="previous_cursor"></zg-param>
    51.       <!-- return value from cursor endpoint for next page -->
    52.       <zg-param name="nextIDPath" value="next_cursor"></zg-param>
    53.       <!-- query param to send back for next/prev cursors -->
    54.       <zg-param name="prevIDKey" value="cursor"></zg-param>
    55.       <!-- query param to send back for next/prev cursors -->
    56.       <zg-param name="nextIDKey" value="cursor"></zg-param>
    57.     </zg-data>
    58.     <zg-colgroup>
    59.       <zg-column index="Date"></zg-column>
    60.       <zg-column index="Close"></zg-column>
    61.     </zg-colgroup>
    62.   </zing-grid>
    63.   <script>
    64.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    65.   </script>
    66. </body>
    67.  
    68. </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 class="zg-body">
    11.   <zing-grid caption="Cursor Based Pagination" pager page-size="4" search>
    12.     <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/cursor-paging/api">
    13.       <!-- where to retrieve data from -->
    14.       <zg-param name="recordPath" value="data"></zg-param>
    15.       <!-- enable server paging -->
    16.       <zg-param name="loadByPage" value="true"></zg-param>
    17.       <!-- enable cursor server paging -->
    18.       <zg-param name="cursor" value="true"></zg-param>
    19.       <!-- return value from cursor endpoint for previous page -->
    20.       <zg-param name="prevIDPath" value="previous_cursor"></zg-param>
    21.       <!-- return value from cursor endpoint for next page -->
    22.       <zg-param name="nextIDPath" value="next_cursor"></zg-param>
    23.       <!-- query param to send back for next/prev cursors -->
    24.       <zg-param name="prevIDKey" value="cursor"></zg-param>
    25.       <!-- query param to send back for next/prev cursors -->
    26.       <zg-param name="nextIDKey" value="cursor"></zg-param>
    27.     </zg-data>
    28.     <zg-colgroup>
    29.       <zg-column index="Date"></zg-column>
    30.       <zg-column index="Close"></zg-column>
    31.     </zg-colgroup>
    32.   </zing-grid>
    33. </body>
    34.  
    35. </html>
    1. .zg-body zing-grid[loading] {
    2.   min-height: 600px;
    3. }
    4.  
    5. /* hide some inner grid elements */
    6. .zg-body zing-grid[loading] zg-pager {
    7.   visibility: hidden;
    8. }
    9.  
    10. .zg-body zg-pager zg-select {
    11.   display: none;
    12. }
    13.  
    14. .zg-body zg-load-mask {
    15.   /* set the color to match the gif */
    16.   opacity: .90;
    17.   height: calc(100%);
    18.   /* custom gif for loading */
    19.   background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
    20.   /* Center and scale the image nicely */
    21.   background-position: center;
    22.   background-repeat: repeat;
    23.   background-size: contain;
    24. }
    1.