Hello,

I'm fairly new to Kendo ( still testing it for my mobile app ) and i'm trying to display your list of friends (pulled from FB) in a scroll view with their names and pictures. It can go up to 1K + Friends and when switching from a profile to another, the list of friends has to be re populated. I can't have it work, and I'm a bit worried about performances when listing 1000+ friends on the page.

So Basically, I have a ScrollView that I'm trying to rebuild (or at least remove the old data and add new data) when a user get back to the previous page and come back again to this page. It's like a profile page. When you go there for user id = 1 you have some information and a scrollview with his friend's name and pictures, and when I go to another user (id = 2) then I want to change every information on the page, including the information bound in the scrollview.

From what I understand, one can only change the pictures of the scroll view by initiating the view. It doesn't seem to work when data-show is triggered and I have a feeling that we should re-initiate the page completely... Am I right ? Doing the scroll view methods such as SELECTOR.data("kendoMobileScrollView").setDataSource(friendsToInvite) or scrollview.refresh() doesn't seem to work.
Am I doint something wrong or should I re initialize the view everytime a user go back and forth on the different user profiles ? How can I do this ?

here is my HTML:



and My JS:



All that is commented is something I've tried. whithout success.Also, you'll notive that I've filled the scroll view twice: once for the "initialization" with empty data and another one with the data I want to use. The fact that the when() method delay the construction of the scroll view makes it bug. I don't know why.

I am having an intermittent problem with iOS browser, both Safari and Chrome crashing when rotation occurs when using ScrollView.  I have created a simple example of this at http://scrollview.azurewebsites.net/.  This example has a links to pages with varying amounts of ScrollView pages.  On my iPad Air (16gb Wi-Fi) I can usually get the browser to crash ("poof" go away) when using the link to the page with 12 pages and rotating the screen.  On my iPhone (5s 32gb) I can get it to happen less often.  I can't reproduce it on an Android Nexus 7.

I have recorded what I see on my iPad: http://youtu.be/9tDtEfMiMGI

In the example pages I am using above, the only custom JavaScript is what is necessary to get Kendo UI Mobile configured:
(function (global) {
    var mobileSkin = "",
        app = global.app = global.app || {};

    document.addEventListener('deviceready', function () {
        navigator.splashscreen.hide();
        $(document.body).height(window.innerHeight);
    }, false);

    app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout"});

})(window);

I am probably doing something totally wrong.  I would appreciate any guidance anyone can provide.  
Thanks!

I'm not sure if it's a ScrollView issue, please move the thread if this is the wrong sub forum.

When rotating a device after scrolling down a page a bit, Kendo always resets the view to 0,0. We are currently building an App where users are going to read larger pages with some scrollable content, and beta testers have already reported this as being very annoying.

Is there a way to prevent this form happening?

Thanks in advance,
Roman

Hi,

The ScrollView works fin on iOS devices but when i try it on Androids.  The page element can be moved in both horizontal and vertical direction; which is very strange for scrollable element.  Please check the link for more clarification:  https://app.box.com/s/4iutxf9uu7ul8vip4zbb

 What should I do to fix this behavior?

Hi Kendo team!

We are using Kendo scrollview to switch between views. On one page, there is a HTML table with table rows (tr). The scenario is, when we click on a row, It appends another table row beneath it with Kendo chart.
The problem is, If we resize the page, while the chart is still open, it disturbs the scrolling directions. It becomes free to move in any direction. 
Here is the problem video:

http://screencast.com/t/zrk8Jm3CD

Regards.

Hello,

By default, Kendo Scrollview height is according to its content. Is there any way we can set its height to whole page to increase scrollable area?

Regards.

Hello,

I have an asynchrone function that generate a scrollView depending on the data I'm pulling from the server, I want to be able to display different buttons in the Scroll View.

So I am using an if statement in the scrollView template like so:


<div data-role="view" data-layout="overview-layout" data-show="showEvent" data-title="Meet My Friends" id="event">
            <div data-role="content" class="content">

                <div id="eventContent"></div>

                <div>
                    <div id="friendsToInvite" data-role="scrollview" data-source="friendsToInvite" data-template="friendsToInvite-template" data-enable-pager="false"></div>
                </div>
            </div>
        </div>


<script id="friendsToInvite-template" type="text/x-kendo-template">
            <p class="friendName">#= name #</p>
            <div style="width: auto; height: 180px; background: url('https://graph.facebook.com/#= fbId #/picture?type=large')  no-repeat center;"></div>

            #if( invited ) {#
                <p class="friendsButtons"><button class="button2 btn-green" onclick="uninviteFriend(this, #= fbId #, #= eventId #)">Already Invited : Un-invite</button></p>
            #} else {#
                <p class="friendsButtons"><button class="button2 btn-orange" onclick="inviteFriend(this, #= fbId #, #= eventId #)">Invite</button><button class="button2 btn-grey">Dont show me again</button></p>
            #}#
        </script>

And in my show function at some point I have

$.when( Event.getFriendsList( event.id ) ).done( function( friendsList )
    {
        console.log("when");
        if ( friendsList.length > 0 )
        {
            var friendsToInvite = [];

            for ( var i = 0; i < friendsList.length; i++ )
            {
                friendsToInvite.push( { name: friendsList[i]["name"], fbId: friendsList[i]["fbid"], invited: friendsList[i]["invited"], eventId: event.id } );
            };
            console.log( friendsToInvite );
            $( "#friendsToInvite" ).data( "kendoMobileScrollView" ).setDataSource( friendsToInvite );
        }
        else
        {
            console.log("Got to be creative here ...")
        }
    });

My problem is that I have a js error in my console saying that "Uncaught ReferenceError: invited is not defined " This is coming from the if statement.
How can I fix this ? In the doc, it seems that when having if statements in your kendo ui, you need to generate it at the init of the page.

Thanks

I've been exploring the use of a scrollview on the default page of our app. I'm trying to scale the image to 100% of the device width. This can easily be done, however, the height is the hang up. Either my image gets cut off and pager is behind the image if my data-content-height="" is set too low, or the pager appears too low in the screen. There has to be an easier way to do this. I have experimented with using @media queries, but it seems to be a bit quirky and to make it perfect for every device is a very intensive task. Is there a good example of how this is done out there?

Hello,

We have a responsive web design targeting with first. I am currently using the bootstrap 3 carousel control for images, however, we would like to move to the Kendo Mobile ScrollView to use the swipe actions when on mobile.

I have been trying to integrate the mobile ScrollView into the page using MVC wrappers without luck. I'm not looking for syntax help, I just need to know if it can be done, if so, a sample would be great.

I'm fairly new to the Kendo widgets, I noticed there is no MVC wrapper demo for databinding the mobile scrollview? I was hoping to use that as my starting point to learn the syntax. 

I have been messing with this in all sorts of configurations trying to get it to work unsuccessfully, I think I'm missing some core guidance.
Thank you.

My script bundle:

My style bundle:


My layout page:

On my view page:

And I have tried with and without this at the bottom of the page:


Thank you,
Richard

I'm experiencing a weird issue that has a couple of us stumped. We have created a scrollview that pulls some images via a JSON file. The scrollview works well with the images loading correctly, however, on the initial load, the pager does not display at the bottom of the screen. The <ol class="km-pages"> is empty, with no list items. If I navigate off the page and then back onto to it, the pager appears at the bottom of the page as it should. This occurs in Chrome, IE and Firefox, so there is obviously something weird with the code. I have attached the two files as reference. Any help is greatly appreciated.