• Edit
  • Download
    • <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: REST API</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body zing-grid[loading] {
      min-height: 600px;
    }

    /* hide some inner grid elements */
    .zg-body zing-grid[loading] zg-pager {
      visibility: hidden;
    }

    .zg-body zg-pager zg-select {
      display: none;
    }

    .zg-body zg-load-mask {
      /* set the color to match the gif */
      opacity: .90;
      height: calc(100%);
      /* custom gif for loading */
      background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: repeat;
      background-size: contain;
    }

    zing-grid[loading] {
      height: 373px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Cursor Based Pagination" pager page-size="4" search>
    <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/cursor-paging/api">
      <!-- where to retrieve data from -->
      <zg-param name="recordPath" value="data"></zg-param>
      <!-- enable server paging -->
      <zg-param name="loadByPage" value="true"></zg-param>
      <!-- enable cursor server paging -->
      <zg-param name="cursor" value="true"></zg-param>
      <!-- return value from cursor endpoint for previous page -->
      <zg-param name="prevIDPath" value="previous_cursor"></zg-param>
      <!-- return value from cursor endpoint for next page -->
      <zg-param name="nextIDPath" value="next_cursor"></zg-param>
      <!-- query param to send back for next/prev cursors -->
      <zg-param name="prevIDKey" value="cursor"></zg-param>
      <!-- query param to send back for next/prev cursors -->
      <zg-param name="nextIDKey" value="cursor"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="Date"></zg-column>
      <zg-column index="Close"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: REST API</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body class="zg-body">
  <zing-grid caption="Cursor Based Pagination" pager page-size="4" search>
    <zg-data src="https://us-central1-zingsoft-demo-endpoints.cloudfunctions.net/cursor-paging/api">
      <!-- where to retrieve data from -->
      <zg-param name="recordPath" value="data"></zg-param>
      <!-- enable server paging -->
      <zg-param name="loadByPage" value="true"></zg-param>
      <!-- enable cursor server paging -->
      <zg-param name="cursor" value="true"></zg-param>
      <!-- return value from cursor endpoint for previous page -->
      <zg-param name="prevIDPath" value="previous_cursor"></zg-param>
      <!-- return value from cursor endpoint for next page -->
      <zg-param name="nextIDPath" value="next_cursor"></zg-param>
      <!-- query param to send back for next/prev cursors -->
      <zg-param name="prevIDKey" value="cursor"></zg-param>
      <!-- query param to send back for next/prev cursors -->
      <zg-param name="nextIDKey" value="cursor"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="Date"></zg-column>
      <zg-column index="Close"></zg-column>
    </zg-colgroup>
  </zing-grid>
</body>

</html>
    .zg-body zing-grid[loading] {
  min-height: 600px;
}

/* hide some inner grid elements */
.zg-body zing-grid[loading] zg-pager {
  visibility: hidden;
}

.zg-body zg-pager zg-select {
  display: none;
}

.zg-body zg-load-mask {
  /* set the color to match the gif */
  opacity: .90;
  height: calc(100%);
  /* custom gif for loading */
  background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat;
  background-size: contain;
}