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

[Solved] Data-source update during scrolling crashes ListView on iOS7.1/iPhone 4

3 Answers 126 Views

ListView (Mobile)

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

Jari asked on 07 Apr 2014, 12:54 PM

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.

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/mobile/listview/databinding.html">

<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>

<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>

[Solved] Data-source update during scrolling crashes ListView on iOS7.1/iPhone 4

3 Answers, 1 is accepted