I've run into a bit of an issue with a ScrollView and pagination when hooked up to a local data source.  For our application, our customer has dictated requirements around data that must be front-loaded during application startup, one of which is a "client list" which can be several thousand records.  This client list needs to be searchable by various fields.  At least 8 records should be displayed at a time, and the list should be "swipe-able" to allow the user to navigate through the results (filtered or otherwise).  We are brand new to Kendo UI, so I'd like to outline our approach and the problem that we are seeing.

 

We are able to successfully retrieve all of this data at application startup, and once we've retrieved all of our "client" records we set them as the .data property of a Kendo UI DataSource object.  We then have a ScrollView set in data-bound mode that is pointing to this data source.  The documentation says to set the data source page size to 4x the items-per-page of the scrollview, which we have done (32 in our case).  The scroll view renders the data just fine, and even allows us to swipe through 4 pages of data before it stops allowing us to swipe and appears to "bounce" us back to the 3rd page.  According to the debugger, once we swipe to the 4th page our template is invoked through some generated code only every item in the "data" array is marked "undefined" and our template breaks.  I did see somewhere on the forums that paging local data sources for scroll views was not supported at one point but now is (sorry, I can't seem to find that post at the moment).  I've created a Fiddle that reproduces the issue:

http://jsfiddle.net/n1m1dhw6/

We are using Kendo UI 2015.1.429. 

I am using the adaptive usage example in the scroll view.  But I want to add the little pager at the bottom to indicate what page the scroll view is on.  Anyone have a dojo / fiddle example on how to add that?

Updating to kendo v2014.3.1316 breaks ScrollView with customTemplate. Even the example on your demo site is now broken http://demos.telerik.com/kendo-ui/scrollview/custom-template

This produces a Unable to get property 'id' of undefined or null reference error in the web console and kills the scrollview and view processing in mobile application completely. Forcing app restart.
​

Should I be able to attach a click event to an item in the template for a scrollview?

No matter how simplified I make the template,  there is  always an error of "undefined is not a function" arises if I put a click event on any html item in the scrollview template. But the function is definitely in the view model.  In fact of course putting a fake click method to invoke in the    template generates the same error, so it leads me to think that the template is not bound to the viewModel.

<div data-role="view"
            data-title="debug"
            data-model="app.friendsService.viewModel"
            data-stretch="true">        
                    <div 
                    id="toddlersScrollview"
                    data-role="scrollview" 
                    data-items-per-page="6"     
                    data-bind="source:friendsDS" 
                    data-template="allfriends-template"
                    data-enable-pager="false"
                    style="height:200px;">
                    </div>
                </div>

                </div>
                
                <script type="text/x-kendo-template" id="allfriends-template">                  
           <div data-bind="click:onfriendClick"></div>
                </script>
             </div>     
</div>




Viewmodel snippet:

function (global) {
    var friendsViewModel,
        app = global.app = global.app || {};
    friendsViewModel = kendo.data.ObservableObject.extend({ 
        roomid:null,
        childid:null,
        fname:null,
        mname:null,
        friendsDS:null,
        onfriendClick: function(e) {
            console.log("something");
        },
    friendsDS: new kendo.data.DataSource({
            transport: {
                read: {
                     url: "http://someurl.com/v1/room/param/children",
                    dataType: "json",
                    data: function() {
                       var roomid =  app.friendsService.viewModel.get("roomid")
                       return {roomid: roomid};
                    },
                    type: "GET"
                },
                update: {
                    url: "http://acorn.xander.com/api/rooms",
                    type: "PUT"}
            },
            schema: {
                model: { "id":"id",
                    fields: {
                        id: { type: "number" },
                        fname: { type: "string" },
                        mname: { type: "string" },
                        lname: { type: "string" }
                    }
                }
            }
        })
    });       
        app.friendsService = {
        viewModel: new friendsViewModel()
    };

})(window);

Hello!
There is a problem with the control ScrollView on phones Samsung Galaxy 3. Scroll through the pages or does not work or is triggered after the second or third time.
In the debugger when an attempt is turning the message:

Help solve this problem.
Thanks in advance.

Here is a jsbin:
http://jsbin.com/yacexujequ/6/edit

In second view there's a ScrollView which I want to initialize dynamically via a button.
The problem is the ScrollView is unresponsive. You simply can't swipe through pages.
But if I initialize it on view show, it works without a hitch.
Please tell me what am I doing wrong...

I'm attempting to use a ScrollView control on a page that will be accessed by both mobile and desktop browsers. It appears that the ScrollView control works properly on Windows 7: Chrome, Firefox, IE10, and IE11. However when testing with Internet Explorer 8 and 9 the ScrollView control doesn't seem to function at all. Are these supported browsers for this control? If not - is there an alternative option available for similar functionality?

Hi,

I'm trying to implement a gallery feature - the pictures are displayed in a ScrollView and a click on the "Detailview" Button openes a Modalview which contains another Scrollview that is dynamically populated.

It works fine but I've problems with the second page of the ScrollView within the ModalView. It doesn't display the image but all other pages are working.

The strange thing is that this behavior only occurs in certain situations

- If I access the first page the second page is missing (not showing a picture) - all other pages are displayed correctly
- If I access the second page the picture is shown correctly but I can't scroll to the right side (as if there were no more items left) - A scroll to the left page resets the behaviour and all pictures can be scrolled correctly afterwards.
- If I access a page higher than the second one everything works as expected.

To see the described behavior you may find my example here: http://jsbin.com/pocumu/4/edit

I'm really puzzled why this behavior occurs - any help is appreciated.

Hi,

I am using Kendo Mobile v2014.1.528. We have a gallery page with a scrollView. Once the user clicks on an image he's taken to a new page with just that image. The problem is that when the user goes back the scrollView can now be dragged vertically?! I have come a cross an older thread of similar bug, but it was resolved two years ago.

How can I fix this?

Is it possible to dynamically set the height of a ScrollView?

I have a series ListViews inside a ScrollView and would like to set the height of the ScrollView to the height of the ListView.

I have researched this and found it suggested to use  data-stretch=true on the view and data-content-height="100%" on the ScrollView.  When I do this and the ListView contains more items than will display on the screen, it does not scroll vertically.  Example:
http://jsbin.com/fosoj/1/edit?html,output

I can hard code a content height on the ScrollView but it may be larger than necessary and it allows the ListView to scroll off the top of the page.  Example:
http://jsbin.com/hatib/1/edit?html,output

I would appreciate any alternatives.

Thanks,
Kerry