Infinite scroll directive

The sfInfiniteScroll provides you with the functionality for infinite scrolling through items. When more data is required, the implementation of the directive invokes a delegate that loads additional items. This directive can be used as an alternative to paging.

The sfInfiniteScroll is a directive with an isolated scope that is defined in a module with the same name:sfInfiniteScroll. For more information, see Isolating the Scope of a Directive.

The following tutorial demonstrates how to add an infinite scroll directive in a widget designer's view. You can use selectors and directives outside of widget designers.

Add infinite scroll directive

To enable AngularJs to link the sfInfiniteScroll directive in your custom designer view, you must load the script of the directive and add a dependency to the module:
Perform the following:

  1. Sitefinity CMS automatically registers the scripts you need and, if no other designer view with explicitly set priority exists, Sitefinity CMS sets your designer view priority 1. In case you need to have full control over the scripts that are loaded or you want to set custom priority, you can alternatively create your own DesignerView.YourView.json file. If you have a JSON file that matches the convention (even if empty), this automatic scripts registration will not occur. In your DesignerView.<YourView>.json file, add a scripts array.
    Use the following code:
  2. In your DesignerView-YourView.js file, right before the definition of your custom view controller, place the following code snippet:

    The code above generates 20 sequential numbers that are added to the items collection each time the element with an infinite scroll is scrolled to the bottom. 
    In a more realistic scenario, this function can call a service and load data asynchronously.

  3. In your DesignerView.<YourView>.cshtml file, place the following tag where you want to render the sfInfiniteScroll directive:

    NOTE: The height of the element must be limited in order for a scroll to be displayed.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?