Virtual Scrolling

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 parameter 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: