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

VirtualViewSize feature

13 Answers 116 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 30 Jan 2014, 03:41 PM
So I was excited when I saw references to this on the forums, as It's been something I've wanted for a while now (pagination for local data). Unfortunately I've run into issues getting this working on an existing app.

Please correct me if I'm wrong but all I should need to do is add the property to the listview declaration and have the full results as the data property of the datasource no?

The result I'm getting it all the <LI>s are stacked on top of each other. (Yes i'm using the latest Kendo files)

Heres the HTML snippet of my view

<div id="items-view" data-role="view" data-title="Blocks & Items" data-layout="default-layout" data-init="app.items.init" data-show="app.items.showView">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            <ul class="ul-content">
                 
            </ul>
        </li>
    </ul>
</div>

Heres the javascript for it:

var data = app.items.filterLimit(1000, app.items.data);
 
$("#items-view ul.ul-content").kendoMobileListView({
    dataSource: new kendo.data.DataSource({
        data: data
    }),
    template: "<li>#: name #</li>",
    endlessScroll: true,
    virtualViewSize: 50
});

data variable is a giant json array of items. somewhere in the 500 count range. It's correct, It's the same data i was using previous (looping over and manually appending LI's)

Is there another step that I am missing perhaps? Or am I crazy and this should be working? I'll attach a screenshot of what it's doing....

13 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 31 Jan 2014, 08:44 AM
Hello Kevin,

The problem comes from an invalid template in your ListView configuration. Please check the following link for more information:

http://docs.telerik.com/kendo-ui/getting-started/mobile/listview#customizing-item-templates

Regards,
Kiril Nikolov
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
Kevin
Top achievements
Rank 1
answered on 31 Jan 2014, 03:32 PM
Thanks. By invalid I assume you meant the <li> inside the template? I've removed that since. But actually i think the issue was being stacked inside another initialized listview. I've fixed it using the same advice from the other thread i made, unfortunately I've run into the exact same styling issue here as there....

http://www.telerik.com/forums/endless-scrolling-listview

Is there something special (different?) about the list items created this way vs normal ones?
0
Kevin
Top achievements
Rank 1
answered on 01 Feb 2014, 05:49 AM
I have managed to apply my style successfully to this sort of initialized listview (local data + endless scrolling). Unfortunately I was only able to do it because i knew the first and last item of the data (since its all local), so it would not work on a listview pulling from a remote.

In addition I've noticed that unless you scroll very slow through the list, this feature is super super buggy. I end up very easily with missing rows / the items seemingly resetting (my items are alphabetical) i'll be scrolling through the letter D then sudddenly it resets at the letter A in the middle of the list. Very strange and unpredictable. I've tried a few different virtualViewSizes, 50 / 100 a few others too. 

Here was my final solution to the styling issue on this specific type of list.

$("#items-view ul.ul-content").kendoMobileListView({
    dataSource: new kendo.data.DataSource({
        data: data
    }),
    template: "#: name #",
    endlessScroll: true,
    virtualViewSize: 100,
    itemChange: function(e) {
        var first = data[0].name.trim();
        var last = data[data.length - 1].name.trim();
        var current = e.item[0].innerText.trim();
 
        if (current == first) {
            $(e.item[0]).css("border-radius", "9px 9px 0px 0px");
        }
        if (current == last) {
            $(e.item[0]).css("border-radius", "0px 0px 9px 9px");
        }
    }
});


0
Kevin
Top achievements
Rank 1
answered on 02 Feb 2014, 03:05 AM
I've thought of some other ways to implement my styling as well. I'd say I'm only really concerned now about the bugginess of the feature overall. I have attached a video to demonstrate the behavior i'm talking about. (This only currently applies to local data + virtual pagination, ill update my other post if i run into similar issues with it, wanted to get this one tested and out of the way first)

The video starts and I scroll slowly, showing that it works fine if you go very slow. But any rapid flicks of your finger (a pretty normal action for users, me anyways when im trying to get pretty far down on a list to something specific) then it goes all wonky and won't recover.

At the end. it reset everything and started again from the letter A in this case "11 Disc" the first item but way down in the middle of the list with a lot of blank space above.

video: http://youtu.be/a71Qj5ZJNUU


0
Kiril Nikolov
Telerik team
answered on 04 Feb 2014, 02:25 PM
Hello Kevin,

You have asked exactly the same question in the support thread that you have opened. As I said there - increase the pageSize of the dataSource, to get better performance from the ListView.

Please keep one thread open when you have one and the same question, as it will make it easier for us to track down your questions and answer them as soon as possible. 

Thank you in advance for your cooperation.

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kevin
Top achievements
Rank 1
answered on 04 Feb 2014, 02:44 PM
Eh? I have 2 threads with 2 different concerns. Videos in each. And just exactly how high are you recommending i make the page size? I've tried all over. 50 100. It has had no discernible effect on the outcome. Please advise.
0
Kevin
Top achievements
Rank 1
answered on 04 Feb 2014, 03:02 PM
I tried setting my VIrtualViewSize to 50, 100, 150, 200, 250, 300, 350, 400, 450 and 500. Towards the high end 400+ the page takes a very long time to initialize and is very very choppy so unusable. All the other amounts have the same exact bug. I'm not going to take another video because it's the same result. Fast / consistent scrolling causes the listview to get out of "sync" and restart at the beginning leaving a huge gap of blank space above the list.
0
Kevin
Top achievements
Rank 1
answered on 04 Feb 2014, 03:22 PM
I just realized you said pageSize on the datasource. I was under the impression with local data + virtualviewsize you did not need pagesize. Nevertheless I tried putting a matching pageSize on the datasource (both 100) and it actually straight up breaks the list. It scrolls for a while then stops and hangs. it wont load all of the items. I'll take a video of that particular bug tonight if needed. Are you supposed to have a pageSize and virtualViewSize for the local data listviews???
0
Kiril Nikolov
Telerik team
answered on 05 Feb 2014, 12:35 PM
Hi Kevin,

The pageSize configuration is not needed if you are using the local data virtualization option. Could you please extract a runnable sample of your project where this issue can be reproduced? I have created an example, where I have a ListView with 500+ items and local data virtualization, that I tested on Nexus 5(Android 4.4.2) and iPhone 5(iOS 7.0.4) and it works as expected. Here is the example, please test it out:

http://jsbin.com/USALEyOB/2/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!
0
Kevin
Top achievements
Rank 1
answered on 05 Feb 2014, 02:57 PM
I currently have it in my test project "Mine Buddy" in my account. The only reason the file size is large is because of lots of images. :) the app itself there isnt much to it. I've removed stuff thats not currently used / commented out anything not relevant to this test in the index. There's 2 menu items on the main menu. Local Data Test and Remote Data Test. Local Data would be the relevant one in this case.

I'll see if i can poke around with your example and see if it's got the same issue for me or not when i have some time to put it into its own project to run on my phone.

Hopefully we can get to the bottom of this, i'm sure i'm doing something silly thats unexpectedly interferring with normal behavior of the widget, I just wish i knew what! :)

Thanks!
0
Kiril Nikolov
Telerik team
answered on 07 Feb 2014, 08:38 AM
Hello Kevin,

Thank you for contacting us. I am afraid that accessing AppBuilder projects is not a standard support practice for Kendo UI; A request and formal approval from another product team is required, due to the privacy and security implications involved. Is it possible for you to isolate the problem in question in a jsbin? We will take a look and advice you accordingly.

Did you have time to test the example that I created, did you notice the same problems as in your application?

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gurumurthy
Top achievements
Rank 1
answered on 07 Apr 2014, 02:41 PM
Was there any resolution to this issue? Namely, when the scrolling is slow, the list view behaves fine, but when scrolling becomes reasonably fast, several undesirable things start happening, such as items get out of syn, blank space shows up in the list etc. 
My list view displays about 20 items at a time, my datasource is about 300 items, and I have set virtualViewSize to 100, endlessScroll to true.
0
Kiril Nikolov
Telerik team
answered on 08 Apr 2014, 10:52 AM
Hello Gurumurthy,

We are currently working on optimization of this exact functionality of the Kendo UI Mobile ListView. So expect a lot of improvements in the upcoming builds.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Kevin
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Kevin
Top achievements
Rank 1
Gurumurthy
Top achievements
Rank 1
Share this question
or