Virtual Scrolling

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

Infinite Scroll

Enable infinite scrolling by adding the height and page-size attributes to your <zing-grid> tag. Then add loadByScroll name attribute to <zg-param>.
  • Add the height and page-size attributes to your <zing-grid> tag

    CloseCopy Copied
    <zing-grid height="400" page-size=10>
  • Add adapter and src attributes to <zg-data>

    CloseCopy Copied
    <zg-data
      src="https://zinggrid-examples.firebaseio.com/movies"
      adapter="firebase"
    >
  • Add loadByScroll and name attributes <zg-param>

    CloseCopy Copied
    <zg-param
      name="loadByScroll"
      value="true">
    </zg-param>

All together, it looks like this:

CloseCopy Copied
<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>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading