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.
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:
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.
NOTE: The height of the element must be limited in order for a scroll to be displayed.
Sign up for our free beginner training. Boost your credentials through advanced courses and certification. Register for Sitefinity training and certification.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important