Cannot Have ListView Append Method Working Properly

[Yohann]

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

[Kiril Nikolov]

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

 

 

[Yohann]

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
 

[Kiril Nikolov]

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

 

 

[Yohann]

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!

[Yohann]

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

[Georgi Krustev]

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

 

 

[Yohann]

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.

[Yohann]

PS: I am using the latest version of Phonegap

[Petyo]

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