This is a migrated thread and some comments may be shown as answers.

Kendo Mobile Scroll View multiple items per page for dynamic datasource

1 Answer 260 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Shoshana
Top achievements
Rank 1
Shoshana asked on 25 May 2016, 09:44 PM

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();
        }

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 27 May 2016, 01:02 PM
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:

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ScrollView (Mobile)
Asked by
Shoshana
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or