Virtual Scrolling

In ZingGrid, virtual scrolling is called infinite scrolling. This is a flexible performance feature that directly integrates with Firebase in one line and works well with any remote API.

Infinite Scroll

To enable infinite scrolling, add the height and page-size attributes to your <zing-grid> tag and the name="loadByScroll" attribute to <zg-param> with value="true".

  1. Add the height and page-size attributes to your <zing-grid> tag

    <zing-grid height="400" page-size=10>
  2. Add loadByScroll and name attributes to <zg-param>

    <zg-param
      name="loadByScroll"
      value="true">
    </zg-param>
  3. If you are integrating with Firebase, add adapter and src attributes to <zg-data>

    <zg-data
      src="https://zinggrid-examples.firebaseio.com/movies"
      adapter="firebase"
    >

Altogether, it will look like this:

<zing-grid height="400" page-size=10>
  <zg-data src="https://zinggrid-examples.firebaseio.com/movies">
    <zg-param name="loadByScroll" value="true"></zg-param>
  </zg-data>
</zing-grid>

Infinite Scroll Grid

Here is a complete grid with infinite scroll enabled:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid: