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

VirtualViewSize feature

13 Answers 91 Views

General Discussions

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

Kevin asked on 30 Jan 2014, 03:41 PM

photo-(1).png

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

answered on 31 Jan 2014, 03:32 PM

photo-(3).png

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?

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");

}

});

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

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!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

VirtualViewSize feature

13 Answers, 1 is accepted