Scroll view freezes and does not rebind data

[Yohann]

I'm setting up the following scrollview. I'm not adding any html data element as in the docs in order to be able to use the kendo template where useWithBlock is set to false for perfs:

var friendsList = response.results;
                var friendsToInvite = [];

                var template = kendo.template( $( '#friendsToInvite-template' ).html(), {useWithBlock:false} );

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


                var scrollview = $("#scrollview").data("kendoMobileScrollView");
                if ( typeof listView === typeof undefined )
                {
                    $("#friendsToInvite").kendoMobileScrollView({
                        template : template,
                        dataSource: friendsToInvite,
                        enablePager: false
                    });
                }else
                {
                    $("#scrollview").data("kendoMobileScrollView").setDataSource(friendsToInvite);
                };

When going to the page the first time, i can see the scroller but it doesn't work: I cannot swipe from a page to another.
Then when I'm trying to rebind the data (because the template is used with different data) I can't see any changes.

Please advice,

Many Thanks

[Alexander Valchev]

Hi Yohann,

The provided information is not sufficient enough in order to determine where exactly the problem comes from.
Could you please provide a more complete code sample or a run-able Kendo UI Dojo test page so I can get a better overview of your current implementation and advice you accordingly?

Thank you in advance for your cooperation.

Regards,
Alexander Valchev
Telerik

 

 

[Yohann]

Hello Alexander,

I edited a jsbin for you to give a look:

http://jsbin.com/lolof/1/edit

As you can see, when going from event 1 to event 2, the scroll view doesn't rebind data  with

$( "#friendsToInvite" ).data( "kendoMobileScrollView" ).setDataSource( friendsToInvite );

Unfortunately, I wasn't able to reproduce the second bug which makes the scroll view freezing the first time a user arrives on the event page. i will investigate on it on my side.

Thanks

[Yohann]

UPDATE:

I found where is the "freeze" bug coming from.

I'm retrieving the events from the server with an AJAX call.
When this is done, I am executing the code provided in the jsfidle, triggered on show.

I think that's where th problem comes from: kendo UI initilize the view before the deferred method when is completed, and, therefore, before I can initialize the scrollview.

I tried to change the html of the scroll view from

<div id="friendsToInvite" style="height:300px"></div>

to

<div id="friendsToInvite" data-role="scrollview" data-auto-bind="false" style="height:300px"></div>

without success. I think I have to re bind the data. Which is something I cannot have working from problem 1 in previous post.

What is the best solution here ? In order to have my scrollview correctly populated once I retrieve the data in my when defered method ?

Many thanks

[Petur Subev]

Hello Yohann,

Regarding the rebinding issue, I do not see when the condition has changed. I updated your example with several logs and it does not seems to enter the friendsToInvite.

http://trykendoui.telerik.com/@pesho/uBeB

The following check that you created always returns true.

 if ( typeof listView === typeof undefined )

Kind Regards,
Petur Subev
Telerik

 

 

[Yohann]

Hello Petur and thank you for your help.

You were right, the condition was always true, I did a terrible job adapting my code to a simple sample for jsbin and I'm sorry.

I actually had it working very nicely. In my previous post, I was taling about the defered method: 
"kendo UI initilize the view before the deferred method "when()" is completed, and, therefore, before I can initialize the scrollview."

So I initialized the scrollview in a init function and then bind the data in the show function. This way, even if I need a deferred method and use the when() method to retrieve my data, it works because the scroll view has been initialized in the view. Great !

Unfortunately, what it seems to be a bug just appeared when I resolved it: 
As you can see in the js editor, the bacl button doesn't work anymore, and when it does, the whole app crashes. It happens on my iPhone, on the simalator, and on the jsbin.

I get he following error:
[Error] TypeError: 'undefined' is not an object (evaluating 'o.length')
    switchWith (kendo.mobile.min.js, line 14)
    _show (kendo.mobile.min.js, line 14)
    o (kendo.mobile.min.js, line 14)
    showView (kendo.mobile.min.js, line 14)
    historyCallback (kendo.mobile.min.js, line 14)
    (anonymous function) (kendo.mobile.min.js, line 14)
    trigger (kendo.mobile.min.js, line 9)
    _urlChanged (kendo.mobile.min.js, line 13)
    i (kendo.mobile.min.js, line 13)
    trigger (kendo.mobile.min.js, line 9)
    _checkUrl (kendo.mobile.min.js, line 13)
    f (jquery.min.js, line 2)
    dispatch (jquery.min.js, line 3)
    handle (jquery.min.js, line 3)

Where does this come from ?

Thank you

[Yohann]

you can find it here:

http://trykendoui.telerik.com/oxav

You will see that the first time you hit the back button it doesn't work and the second time, it crashes (blank page on jsbin, freeze on iphone)

[Petyo]

Hi Yohann,

the problem you encounter is specific to the jsbin/trykendo environment. Running it in a separate window works as expected on my side.

Regards,
Petyo
Telerik