ListView Endless Scrolling

[Ariel]

I have an issue where my list view Endless Scroller: When attempting to scroll the list view, sometimes the list view gets stuck further down the view that what it should. I am developing a hybrid app for mobiles in telerik appbuilder using icenium.

<script type="text/javascript">
var app = new kendo.mobile.Application(document.body, {
skin: "flat",
transition: "overlay"
});
function init1(e) {
//----------------------------------//
var category_name = "";

debugger;

var ds = new kendo.data.HierarchicalDataSource({
schema: {
total: function () { return 800; },
model: {
hasChildren: true
},
data: function (response) {
// console.log(response);
var data = [];
var image = "";
for (var i = 0; i < response.length; i++) {
var date = $.format.date(response[i].date, "M-dd-yyyy");
if (response[i].featured_image && response[i].featured_image.source) {
image = response[i].featured_image.source;
} else {
image = "kendo/styles/images/full-color350px.png";
}
var item = {
id: response[i].ID, //POST ID
title: $('<span>').html(response[i].title).text(), //POST TILE
date: date, //POST DATE
author: response[i].author.username,
image: image //POST FEATURED IMAGE
};
data.push(item);
}
return data;
}
},
transport: {
read: {
url:url,
dataType: "json",
data: function () {
if (category_name != "") {
return {
"filter[category_name]": category_name
}
}
}
}
},
serverPaging: true,
pageSize: 25,
requestStart: function (e) {
app.pane.loader.show();
$('.km-listview-wrapper').hide();
},
requestEnd: function (e) {
app.pane.loader.hide();
$('.km-listview-wrapper').show();
}

});


if (e.view.params.catid) {
if (e.view.params.catid != 0) {
category_name = e.view.params.catid;
} else {
category_name = "";
}
}
$("#latest-posts").kendoMobileListView({
dataSource: ds,
template: $("#latest-posts-template").html(),
endlessScroll: true,
pullToRefresh: true,
type: "group"
})


}

</script>

[Tsvetina]

Hi Ariel,

Have you tried setting a bigger pageSize in the DataSource definition? For smoother scrolling, set the page size to (number of visible items on screen) * 3 * 2.

If this does not help, also check the Output window for any JavaScript errors when you get the undesired behavior.

Regards,
Tsvetina
Telerik

 

 

[Ariel]

Hi Tsvetina,

    Thanks for replying, I have tried the same thing with small page size but did not get any success and also check the output window for javascript but there is no error.

 Please help.

Regards,
Nitish

[Tsvetina]

Hi Nitish,

Let me just clarify, so we rule out this possible solution. My suggestion is to use a larger page size, for example 30 or more, not a smaller one.

If the issue remains unresolved, another suggestion is to hook the DataSource error event and look for any problems while reading the data in there.

Regards,
Tsvetina
Telerik