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

Scroll view freezes and does not rebind data

7 Answers 131 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Yohann
Top achievements
Rank 1
Yohann asked on 29 Apr 2014, 06:26 AM
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

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 29 Apr 2014, 08:35 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yohann
Top achievements
Rank 1
answered on 01 May 2014, 12:52 AM
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
0
Yohann
Top achievements
Rank 1
answered on 01 May 2014, 01:46 AM
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
0
Petur Subev
Telerik team
answered on 02 May 2014, 01:56 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yohann
Top achievements
Rank 1
answered on 02 May 2014, 10:01 PM
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

0
Yohann
Top achievements
Rank 1
answered on 02 May 2014, 10:04 PM
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)
0
Petyo
Telerik team
answered on 06 May 2014, 02:05 PM
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
 
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
Yohann
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Yohann
Top achievements
Rank 1
Petur Subev
Telerik team
Petyo
Telerik team
Share this question
or