Use an infinite scroll directive

The following article demonstrates how to use Feather's sfInfiniteScroll directive in your custom designer. This directive provides functionality for infinite scrolling through the items, as an alternative to paging. The implementation invokes a delegate when more data is needed. The sfInfiniteScroll is a directive with an isolated scope that is defined in a module with the same name (sfInfiniteScroll).

Adding an infinite scroll directive

1. In your DesignerView.YourView.json file you have to add a scripts array. The content of the file should be similar to:

   {
      "priority": 1,
      "scripts": [
        "client-components/collections/sf-infinite-scroll.js"
        ]
   }

2. In your designerview-yourview.js place the following snippet right before the definition of your custom view controller:

   var designerModule = angular.module('designer');
   angular.module('designer').requires.push('sfInfiniteScroll');

3. In your DesignerView.YourView.cshtml place the following tag where you want to render the sfInfiniteScroll:

   <ul sf-infinite-scroll="loadMore()" style="height: 100px;">
     <li ng-repeat="item in items">{{item}}</li>
   </ul>

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

4. Add the following code in your designer's controller:

designerModule.controller('YourViewCtrl', ['$scope', 'propertyService', function ($scope, propertyService, $log) { $scope.items = [];

$scope.loadMore = function () {
	var count = $scope.items.length;
	for (var i = count; i < count + 20; i++) {
		$scope.items.push(i);
	}
};

$scope.loadMore();

}]); ``` 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 real world scenario, this function can call a service and load data asynchronously.