Hi,
In my app I have a ListView with a data-source that is bound to a local data array. I get new data from the network and update the array accordingly. Then I call datasource.read to update the ListView.
This seems to work fine with Android (Samsung Galaxy S3) and WP8 (Lumia 925), but with iOS 7.1 (iPhone 4), if I'm performing ListView scrolling at the same time the update occurs, usually the ListView hangs completely (crashes).
I can overcome this problem by preventing data-source updates during scrolling, but I guess this behavior could be somehow improved in Kendo Mobile too?
You should be able to reproduce this problem with the small sample program found below.
In my app I have a ListView with a data-source that is bound to a local data array. I get new data from the network and update the array accordingly. Then I call datasource.read to update the ListView.
This seems to work fine with Android (Samsung Galaxy S3) and WP8 (Lumia 925), but with iOS 7.1 (iPhone 4), if I'm performing ListView scrolling at the same time the update occurs, usually the ListView hangs completely (crashes).
I can overcome this problem by preventing data-source updates during scrolling, but I guess this behavior could be somehow improved in Kendo Mobile too?
You should be able to reproduce this problem with the small sample program found below.
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</
style
>
<
title
></
title
>
<
link
href
=
"http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"view"
id
=
"flat"
data-init
=
"mobileListViewDataBindInitFlat"
data-title
=
"ListView"
data-layout
=
"databinding"
>
<
ul
id
=
"flat-listview"
></
ul
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"databinding"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#flat"
data-icon
=
"stop"
>Flat
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"customListViewTemplate"
>
<
h3
class
=
"item-title"
>${name}</
h3
>
<
p
class
=
"item-info"
>${foo}</
p
>
</
script
>
<
script
>
var flatData = [];
var flatDs;
function initData() {
for( var i=1; i<
21
; i++) {
flatData.push({ name: "Initial " + i, foo: new Date()});
}
}
function mobileListViewDataBindInitFlat() {
initData();
flatDs
=
new
kendo.data.DataSource({
data: flatData
});
$("#flat-listview").kendoMobileListView({
dataSource: flatDs,
template: $("#customListViewTemplate").html()
});
setTimeout(function() { updateData(); }, 3000 );
}
function updateData() {
var
r
=
Math
.floor((Math.random()*flatData.length)+1);
if( r < (flatData.length / 2)) {
console.log('update');
flatData[r]
.foo
=
new
Date();
}
else {
console.log('insert');
flatData.push({ name: "Inserted " + (flatData.length +1), foo: new Date()});
}
flatDs.read();
setTimeout(function() { updateData(); }, 3000 );
}
</script>
<
script
>
var app = new kendo.mobile.Application(document.body);
</
script
>
</
body
>
</
html
>