Scroll view freezes and does not rebind data

8 posts, 0 answers
  1. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 29 Apr 2014 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 29 Apr 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 30 Apr 2014 in reply to Alexander Valchev Link to this post

    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
  5. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 30 Apr 2014 in reply to Yohann Link to this post

    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
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 02 May 2014 Link to this post

    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!
     
  7. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 02 May 2014 in reply to Petur Subev Link to this post

    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

  8. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 02 May 2014 in reply to Yohann Link to this post

    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)
  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 06 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready