Cannot Have ListView Append Method Working Properly

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

    Posted 24 Apr 2014 Link to this post

    Hello,

    I am trying to append some results pulled from my own endless scroll functionality (couldn't have the official endless scroll working the way I wanted, by basically calling my own js function, if this is doable I would be curious to know how).

    I retrieve the results and sort it with js but I can't append it to my pre existing listview.

    In the first function, I initialize the list view doing so:
    $("#list-container").kendoMobileListView({
                        template : template,
                        dataSource: kendo.data.DataSource.create( { data:results, group:"start" } ),
                        fixedHeaders: false
                    });

    Then, when I retrieve some more results with the exact same structure, I'm trying to do this:

    var template = Handlebars.compile( $( '#eventListTemplate' ).html() );
     
                //Append the new results
     
                var newDataSource = new kendo.data.DataSource( { data:results, group:"start" } );
                // console.log( newDataSource.data()[0] );
                $("#list-container").data("kendoMobileListView").append([ newDataSource.data() ]);

    just like in the documentation ( http://docs.telerik.com/kendo-ui/api/mobile/listview#methods-append ) I'm trying to append [ newDataSource.data()[0] ] but I've tried to append results directly or other kendo Data without any luck unfortunately.

    Could you give me a hand on this matter please ?

    Here is the results data structure:
    results: [{id:1242, name:Redwoods & Wine Country Escape Tour, type:Music,…},…]
    0: {id:1242, name:Redwoods & Wine Country Escape Tour, type:Music,…}
    1: {id:1177, name:Peter Cincotti, type:Music,…}
    2: {id:1183, name:Combichrist, type:Music,…}
    3: {id:1179, name:The Suit, type:Music,…}
    4: {id:1184, name:Matt Andersen, type:Music,…}
    5: {id:1174, name:San Francisco Symphony: Tchaikovsky's Pathetique, type:Music,…}
    6: {id:1182, name:Joel Gion & The Primary Colours (Brian Jonestown Massacre), type:Music,…}
    7: {id:1175, name:Shlohmo, type:Music,…}
    8: {id:1185, name:Jim Jones Revue, type:Music,…}
    9: {id:1241, name:North Beach Food, type:Music,…}
    10: {id:1180, name:Les Nubians @ 8pm, type:Music,…}
    11: {id:1181, name:Les Nubians @ 10pm, type:Music,…}
    12: {id:1186, name:Juana Molina, type:Music,…}
    13: {id:1187, name:Sweet Thunder: Jack Quartet, type:Music,…}
    14: {id:1178, name:The String Cheese Incident, type:Music,…}
    15: {id:1189, name:David Gray, type:Music,…}
    16: {id:1240, name:Big Bang Gala, type:Music,…}

    Many Thanks

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 24 Apr 2014 Link to this post

    Hi Yohann,

    Adding items with append to a grouped ListView is not supported. The best way to add items to the ListView is to use the dataSource.add() method, however add() takes just one argument (not array) and renders the ListView on each iteration. In order to prevent the multiple rendering, I have used the splice() method of the observable array holding the data, so the ListView is rendered just once. Here is the example:

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

    Regards,
    Kiril Nikolov
    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 29 Apr 2014 in reply to Kiril Nikolov Link to this post

    Unfortunately, I can't have it working properly.

    In my init function, I have set up a simple list view :

    var template = kendo.template( $( '#eventListTemplate' ).html(), {useWithBlock:false} );
     
                    // detach events
                    var listView = $("#list-container").data("kendoMobileListView");
                    if ( typeof listView !== typeof undefined ) { listView.destroy(); };
                    $("#list-container").empty();
     
                    $("#list-container").kendoMobileListView({
                        template : template,
                        dataSource: kendo.data.DataSource.create( { data:results, group:"start" } ),
                        fixedHeaders: false
                    });
     
                    // //Scroll up automatically
                    listview = $("#list-container").data("kendoMobileListView");
                    var scroller = listview.scroller();
                    scroller.animatedScrollTo(0, 0);

    Then when I try to change the datasource with splice() as you advised me:
    //Append the new results
    var dataSource = $("#list-container").data('kendoMobileListView').dataSource;
    dataSource.data().splice(0,0, results[0], results[1] );

    I have the app completely bugging. In the source code, I can see it has been appended. But I can't scroll anymore, as if itwas broken. Should I rebuild the scroll view ?

    Otherwise, what is the best way to add parameters programmatically for splice ? Let's say I don't know how many events I will have and I don't know how to do it.

    One last thing, I've noticed that sometimes, results are prepended to the list. How can I have it appended properly depending on the datatime I have passed in the start group when building the list view ?

    Many thanks
     
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 30 Apr 2014 Link to this post

    Hi Yohann,

    About your question regarding the splice function and how to append the elements at the end of the array here is a documentation article about the splice() method that explains it in details:

    http://docs.telerik.com/kendo-ui/api/framework/observablearray#methods-splice

    As for the problem with the listview please edit the example that I gave in order to reproduce the problematic scenario and we will take a look. Do you think that it might be related to the handlebars templates that you are using? 

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 30 Apr 2014 in reply to Kiril Nikolov Link to this post

    Thank you Kiril for your quick answer,

    First thing: The Bug
    I have created a jsbin for you to give a look. when scrolling down and up, you will see the the view crashes and stop responding (try to scroll up and down 10 times and you will see). This is what happens in my real world app (of course there is dynamic data with ajax but the idea is that once someone touches one of the element of day X, it loads and append the elements of day X+1 every time you're doing this.)

    http://jsbin.com/desojo/1/

    Second: The parameters:
    I had read the splice() method in detail but that is not answering my issue.

    When I see, in the docs, and in your example how to use the slice method like so :

    var removed = sports.splice(1, 1, "tennis", "hockey");

    I have to pass every argument one by one into the function. I can't do this when I do not know the exact number of argument.
    For each element I receive from my server, I need to insert it into the splice method.

    So I basically need something like this:
    for ( var i = 0; i < result.length; i++ )
    {
            // pass one more parameter to splice
    };
     
    // in order to have something like this:
    var removed = sports.splice(0, 0, result[0], result[1], ....,result[lastOne] );


    Third: Why are my new results added at the beggining of the list ? how can I have it appended at the end of the list ? so that Thursday comes after Wednesday ?

    I find it a bit too complex to simply try to append some additional data to the end of my results, isn't it a simplier approach similir to append() method in jquery ?

    Thank you very much for your help!
  7. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 30 Apr 2014 Link to this post

    Last thing concerning handlebars: I have switched to kendo templates without blocks and found it EXTREMELY fast. To be honest, it took more than 8 seconds to build one of my most complex view with handlebars (which wasn't acceptable on a user point of view..) and less than a second with Kendo UI templating framework.

    I'll be happy to illustrate this phenomenal gain of performance in a video if you want it as this is truly a huge performance increase :) 
    Awesome work guys
  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 02 May 2014 Link to this post

    Hello Yohann,

    Thank you for getting back to us. I investigated further the case and noticed this code:
    $(".post-conten").on("mousedown touchstart", function(e) {
    ...
    Please note that this will not work in your setup, because Mobile ListView will re-render its content on every splice call. The correct events wiring is:
    $("#list-container").on("mousedown touchstart", ".post-content", function(e) {
    ...
    Check the updated jsBin demo for more information.

    With regards to your last post, I would suggest you check the Performance page, where you can find more information about templates performance.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 02 May 2014 in reply to Georgi Krustev Link to this post

    Thank you Georgi for pointing that out. It is true that I forgot to rebind the events in th jsbin, and your event binding is better than what I did.

    Nevertheless, the problem is not coming form here, when I use the splice() method, ALL the scrollers/listviews crash (even on the other pages of the app) and I am not able to scroll up or down anymore. This is not coming from my code since I do not handle the scrolling function, the listview does.

    So I have investigated further on this matter and found out that actually, the EXACT same code we can find on the jsbin does NOT WORK on the iphone5 with iOS 7.1.0 nor on the ios Simulator (last version, screen 4 inches 32bits). I invite you to try that out and you will see the problem I'm trying to point out.

    Also, I am still trying to solve point 2 and 3 of my previous post in this thread. Happy to open a ticket if needed :)

    Thanks you for your help.
  10. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

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

    PS: I am using the latest version of Phonegap
  11. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 06 May 2014 Link to this post

    Hello Yohann,

    When the listview is in grouped mode, appending or splicing items to the datasource will redraw it (all items will be recreated). This is the relevant source code. Redrawing the listview in or touch* action actually invalidates the current touch sequence (touchend event is never triggered) and the view mobile scroller is left in an invalid state because the DOM element which originated the touch is not present anymore. 

    To work around this problem, you may try using native scrolling for the view - I am not sure if this will help though. 

    I would also like to suggest that you open separate support threads for your other inquiries - thus we will be able to track (and follow up) each issue more efficiently.

    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