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

<head>
  <meta charset="utf-8">
  <title>ZingGrid: REST API</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.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;
      top: 65px;
      height: calc(100% - 65px);
      /* 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: 380px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid caption="Cursor Based Pagination" pager page-size="4" search data='[{"Date":"2-Mar-17","Close":138.96},{"Date":"1-Mar-17","Close":139.79},{"Date":"28-Feb-17","Close":136.99},{"Date":"27-Feb-17","Close":136.93},{"Date":"24-Feb-17","Close":136.66},{"Date":"23-Feb-17","Close":136.53},{"Date":"22-Feb-17","Close":137.11},{"Date":"21-Feb-17","Close":136.7},{"Date":"17-Feb-17","Close":135.72},{"Date":"16-Feb-17","Close":135.34}]'>
    <!-- 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/dev/zinggrid-dev.min.js"></script>
</head>

<body class="zg-body">
  <zing-grid caption="Cursor Based Pagination" pager page-size="4" search data='[{"Date":"2-Mar-17","Close":138.96},{"Date":"1-Mar-17","Close":139.79},{"Date":"28-Feb-17","Close":136.99},{"Date":"27-Feb-17","Close":136.93},{"Date":"24-Feb-17","Close":136.66},{"Date":"23-Feb-17","Close":136.53},{"Date":"22-Feb-17","Close":137.11},{"Date":"21-Feb-17","Close":136.7},{"Date":"17-Feb-17","Close":135.72},{"Date":"16-Feb-17","Close":135.34}]'>
    <!-- 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;
  top: 65px;
  height: calc(100% - 65px);
  /* 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;
}