Kendo Mobile Scroll View multiple items per page for dynamic datasource

[Shoshana]

Hi,

I have a landing page where I want to show my apps in the mobile scroll view( 5 items per page). Basically for each app, we show the icon and the name . The app object list is coming from a kendo datasource  ( from web API call).

1) My Data-source is dynamic so I cannot rely on a hard coded Index to display the scroll view item , for now I have 9 items and I want to display 5 on the first page and the remaining 4 on the second page ,  is there a work around for this?( see code below, in my case I'll get the null object  exception cannot access appName )

2) In the documentation, it is said that : In order ensure smooth scrolling the pageSize of the DataSource should be 6 times itemsPerPage amount or higher. For example, if itemsPerPage is set to 5, then the pageSize must be 24 (4*6) or higher.

In my case I have a dynamic page size (9 for now) and I display 5 items per page, is there a work around for this?

Is there a complete example for the integration of Kendo mobile scroll view in Angular?

 

HTML

 <section style="text-align: center">
        <div style="max-height: 300px;">
            <script id="scrollview-template" type="text/x-kendo-template">
                <a class="apps #= data[0].icon #" href="#= data[0].href #">
                    <h3>#= data[0].appName #</h3>
                </a>
                <a class="apps #= data[1].icon #" href="#= data[1].href #">
                    <h3>#= data[1].appName #</h3>
                </a>
                <a class="apps #= data[2].icon #" href="#= data[2].href #">
                    <h3>#= data[2].appName #</h3>
                </a>
                <a class="apps #= data[3].icon #" href="#= data[3].href #">
                    <h3>#= data[3].appName #</h3>
                </a>
            </script>

            <div id="landing-apps-list" data-role="view" data-stretch="true" data-ng-init="onInit()">
                <div id="scrollview" ng-data-changing="changing($event)"></div>
                <a data-role="button" ng-click="prev($event)">Prev</a>
                <a data-role="button" ng-click="next($event)">Next</a>
            </div>

 

code in angular controller:

$scope.onInit = function () {
            $("#scrollview").kendoMobileScrollView({
                dataSource: {
                    transport: {
                        read: operatorsService.profile
                    },
                    schema: {
                        data: "apps",
                        parse: function (data) {
                            if (data.languageCode)
                                languageSvc.setLanguage(data.languageCode);
                            return data;
                        }
                    },
                    filterable: true,
                    filter: { field: "isInMainApp", operator: "eq", value: false }
                },
                itemsPerPage: 4,
                template: $("#scrollview-template").html()
             
            });
        };

 $scope.next = function ($event) {
            var scrollview = $("#scrollview").data("kendoMobileScrollView");
            scrollview.next();
        }

        $scope.prev = function ($event) {
            var scrollview = $("#scrollview").data("kendoMobileScrollView");
            scrollview.prev();
        }

[Alexander Valchev]

Hi Shoshana,

1) My Data-source is dynamic so I cannot rely on a hard coded Index to display the scroll view item , for now I have 9 items and I want to display 5 on the first page and the remaining 4 on the second page ,  is there a work around for this?( see code below, in my case I'll get the null object  exception cannot access appName)

This is a valid scenario but has to be handled in the template. The widget does not have control over the template, the developer has to check if such items exists before rendering it.
In the template the developer can use JavaScript to determine if the item exists or not:

• http://docs.telerik.com/kendo-ui/framework/templates/overview#handle-external-templates-and-expressions

2) In the documentation, it is said that : In order ensure smooth scrolling the pageSize of the DataSource should be 6 times itemsPerPage amount or higher. For example, if itemsPerPage is set to 5, then the pageSize must be 24 (4*6) or higher.

This is valid for large data sets. In your case you may set the pageSize according to the formula, the dataSource will fetch all data with one Ajax request and the widget will display the available records.


At present we do not have sample application with ScrollView and AngularJS.

Regards,
Alexander Valchev
Telerik