Demos Back to Docs

Infinite Scrolling

37 of 124
In ZingGrid, virtual scrolling is called infinite scrolling. This is a flexible performance feature that works well with any remote API or data type; simply define the height attribute in the zing-grid tag.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

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

<body class="zg-body">
  <zing-grid caption="Movies" height="400" page-size="10" layout="row" layout-controls="disabled" viewport-stop>
    <zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">
      <!-- loadByScroll enables infinite scrolling -->
      <zg-param name="loadByScroll" value="true"></zg-param>
      <zg-param name="sortBy" value='"director"'></zg-param>
    </zg-data>
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid 
      caption="Movies" 
      height="400"
      page-size="10"
      layout="row"
      layout-controls="disabled"
      viewport-stop>
       <zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">
          <!-- loadByScroll enables infinite scrolling -->
         	<zg-param name="loadByScroll" value="true"></zg-param>
        	<zg-param name="sortBy" value='"director"'></zg-param>
       </zg-data>
     </zing-grid>
	</body>
</html>
.zg-body {background:#e6e6e6;}

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery