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

Hi,

how can i prevent the kendo-mobile-scroller from horizontal Scrolling? I tried already to set the Style "overflow-x" to "hidden" but it doesn't help.

With best regards

J. Loewen

For a project we are working on, we have a ScrollView pointing to a local data source (per customer requirements).  This data source needs to be filterable by a few fields, which seems to work properly until we run into a scenario where we need to "clear" our filters.  I've recreated our scenario within the Dojo, the link is below.  I can demonstrate the two issues we are seeing by performing the following:

1. Simply click "Set Filter".  Notice that nothing happens, unless you click "Set Filter" again. If you uncomment this line in setFilter, you will see that pushing the button "works" the first time: 
   // ds.filter({});
    Can you explain why this is the case?
2.  Re-running the example from scratch, you will notice if you click on any of the items, it renames it by fetching it from the data source and then calling ".set()" on that object.  Now, if you hit "Set Filter" and then "Reset Filter", try swiping to the 2nd or 3rd page and then clicking on one of the items.  The item is updated, but the ScrollView switches itself back to the first page.  This only seems to happen *after* filter(filter) has been called on the DataSource the first time and then one of the objects is modified, before filter() is called then it works as expected.  I was looking at the filter() function within the compressed Kendo source, and although I don't understand what "t" is you can clearly see "what" is happening, just not "why": 
   function filter(e){

     var n=this;

     return e===t?n._filter:(n._query({filter:e,page:1}),n.trigger("reset"),t)

   }

That was actually the first time I've seen syntax like that in Javascript, where the second half of a shorthand if/else executes a function call wrapped in parentheses.  Aside from trying to get around these issues, what is the "correct" way to remove filters from a data source?  I didn't see anything in the documentation and there are some pretty varied opinions on the web about how to do this.

Here's a link to the example: http://dojo.telerik.com/egadU/2

We are developing with version 2015.1.429, but I replicated this using 2015.2.624 within the Dojo.

Hi,

I have a scroll view with several embedded mobile views, each with 1 or more mobile list views on them. ​The list views are configured to use AJAX calls to get their data. To ease the scrolling experience, I load all the list view data as soon as the user navigates to the view with the scroller.

All works great, except that the ShowLoading icon will be ​shown as long as any individual list view​ is still busy with the ajax call. This will block the scroller from being used; which i do not want. My user should be able to swipe to other views while listviews are still loading. A progress indicator on the mobile listview itself (kendo.ui.progress) would be clear enough that it is still loading and will not block the scroller.

So my question is, what is the best approach to take here? Ideally, I would like to switch off the showLoading function for AJAX calls completely and use the kendo.ui.progress by default on any ajax call. Can that be centrally configured? I tried several approaches, but none of them seem to work properly.

Best regards,

Ruud

Hi,

 I have created an AngularJS project containing an image gallery. Now I would like to display a Telerik Kendo UI Window widget containing a scrollview in order to create a lightbox-effect. Most of it works fine, but I need to be able to dynamically set the initial page. I know that I can set the k-page option, but I'm not sure how to set this value when the user clicks an image. Please observe the following HTML:

<div class="gallery-content">
    <div class="container">
        <div class="gallery-grid" data-ng-show="item.Files.length">
            <div class="picture" data-ng-repeat="File in item.Files"><a ng-href="#" ng-click="openImageLayer($event, File, $index)"><img data-ng-src="/Admin/Public/GetImage.aspx?Image=/Files/Files/Intranet/{{File.FileName}}&amp;Width=200" /></a></div>
            <a href="#" class="btn-add-new hidein-mobile"><span class="icon icon-add-new"></span></a>
        </div>
    </div>
</div>

<div class="popup-holder" kendo-window="imageLayer" k-title="'Billede'" k-on-open="win1visible = true" k-on-close="win1visible = false" k-visible="false" k-modal="true" k-options="kendoWindowOptions">
    <div kendo-mobile-view="view" k-stretch="true" id="scrollview-home">
        <div kendo-mobile-scroll-view="scrollview"
             k-data-source="photos"
             k-content-height="'100%'"
             k-enable-pager="true"
             k-pager-overlay="true"
             k-options="galleryOptions" k-page="{{page}}">
        </div>
    </div>
</div>

When the user clicks an image, the following function is called:

        $scope.openImageLayer = function ($event, file, index) {
            $event.preventDefault();
            $scope.activeFile = file;
            $scope.page = index;
            console.log($scope.page);
            $scope.imageLayer.open().center();
        }

However, the Scrollview does not observe the $scope.page value. I suspect this is due to the fact that the Scrollview has already been initialized.

Regards,

Peter

We are using a ScrollView bound to a local data source that is configured to show multiple items per page.  I ran into an issue today where it looked like the ScrollView was not refreshing its contents after an item in the data source had been updated via .set().  However, I discovered purely by accident that if you scroll two pages to the right and then scroll back two pages to the left, the ScrollView will have magically picked up your changes and re-rendered the items.  I've put together a Fiddle that demonstrates this behavior:

http://jsfiddle.net/rmaezowx/

If you push the "Make Yellow" button, nothing seems to happen even though the data source has been properly updated.  If you then swipe from the right twice, and then to the left, you will see what I'm talking about.  This looks like a bug in the ScrollView, is there any other workaround besides re-setting the data source (I haven't tried this yet)?