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

Listview generated from large data set causes app to crash on iPad and iPhone.

3 Answers 223 Views

General Discussions

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

Amit asked on 25 Mar 2013, 12:18 AM

Hi,

I am using Icenium Graphite for dev and I have listview bound to a Remote data set with server side paging enabled that is showing 30 rows in one page. Scrolling to 2 page the application crashes on iPad and iPhones due to "Received memory warning." . When I modify the page size to 10 then the application crashes after scrolling 4 pages. It works fine in the Stimulator.

You can easily reproduce this error in iPad using the JS Bin example given at http://jsbin.com/iyodux/32/edit
It crashes in iPad and iPhone if you load 500+ items giving multiple "Received memory warning" messages.

Regards,
Amit

Alternatively, here is an example code :

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="home" data-title="Home">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<ul id="mainlist"
data-role="listview"
data-source="category"
data-click="onClick"
data-template="home-lw-template"
data-style="inset">
</ul>
</div>

<script id="home-lw-template" type="text/x-kendo-template">
#: name #
</script>


<div data-role="layout" data-id="mobile-tabstrip">
<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="#tabstrip-home" data-icon="home">Home</a>
</div>
</div>
</div>

<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>

<script>
var app = new kendo.mobile.Application(),
category = new kendo.data.DataSource({
data: [
{id: 1, name: "drinks"},
{id: 2, name: "fruits"}

// ADD MORE ITEMS HERE TO REPRODUCE THIS ERROR...


]
});

</script>
</body>
</html>

3 Answers, 1 is accepted

answered on 27 Mar 2013, 05:58 PM

IMG-0196.PNG

Hi Amit,

I was not able to reproduce the problem on iPhone 4S. For your convenience I am attaching a screen shot showing the last record from jsBin example which you provided.

Generally speaking such issues might occur if you attempt to display too many records. In such cases it is recommended to turn on serverPaging, reduce the pageSize and enable endless scrolling (or press to load more). The same approach is used in this demo.

I am not sure where exactly the problem comes from in your case, server paging and 30 rows per page seems a reasonable amount of data. Are you sure that the problem is connected with KendoUI Mobile Application, are there any other external components/libraries that you use? Does the problem persists if you remove them?

On a side note, in the code snippet mobile application is initialized twice which is not supported. The same problem does not persist in the jsBin sample. I am not sure if it is a typo in the snippet or intentional.

Kind regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 28 Mar 2013, 02:10 AM

Hi Alexander,

Thanks you for reply.

I tested the Endless scroll twitter demo on iPad with retina display and the application did NOT crash but I noticed multiple "Received memory warning." messages appearing in the Show Output window after scrolling 8+ pages.

Issues when using <ul data-role="listview"> instead of <DIV> tag.

I noticed that in my application, I am using <ul data-role="listview" data-style="inset" data-type="group"> to display the records and I believe that this code causes the application to crash after displaying about 30+ items. But when I remove the <ul> tag and use <div> tag to display the records then I can scroll to 500+ items before the app crashes.

Note that my application heavily relies on <ul> for styles, so I cannot simply get rid of them in the short term.

Also, I modified the twitter demo to use <ul data-role="listview"> instead of <div> tag, instead of using the <div class="tweet"> tag and this code change causes the application to crashes after scrolling 12+ pages approx.
I tested on iPad with retina display.

Thanks for your help.

Regards,
Amit

Here, is the code example:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<body>

<div data-role="view" data-init="mobileListViewEndlessScrolling" data-title="Scroll down to load...">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>

<ul id="endless-scrolling"></ul>
</div>


<script id="endless-scrolling-template" type="text/x-kendo-template">
<ul data-role="listview" data-style="inset" data-type="group">
<li><img class="pullImage" src="#= profile_image_url #" alt="#= from_user #" />#= text #</li>
<li>
<a class="sublink" target="_blank" href="http://twitter.com/\\#!/#= from_user #/status/#= id_str #" data-rel="external" rel="nofollow">#= kendo.toString(new Date(Date.parse(created_at)), "dd MMM HH:mm") #</a> |
<a class="sublink" href="http://twitter.com/#= from_user #" rel="nofollow" data-rel="external">#= from_user #</a>
</li>
</ul>
</script>

<script>
function mobileListViewEndlessScrolling() {
var dataSource = new kendo.data.DataSource({
pageSize: 12,
serverPaging: true,
transport: {
read: {
url: "http://search.twitter.com/search.json", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
var parameters = {
q: "javascript", //additional parameters sent to the remote service
rpp: options.pageSize,
page: options.page //next page
}

return parameters;
}
},
schema: { // describe the result format
data: "results" // the data which the data source will be bound to is in the "results" field
}
});

$("#endless-scrolling").kendoMobileListView({
dataSource: dataSource,
template: $("#endless-scrolling-template").text(),
endlessScroll: true,
scrollTreshold: 30 //treshold in pixels
});
}

</script>

<style scoped>
.tweet {
font-size: .8em;
line-height: 1.4em;
}
.pullImage {
width: 64px;
height: 64px;
border-radius: 3px;
float: left;
margin-right: 10px;
}
.sublink {
font-size: .9em;
font-weight: normal;
display: inline-block;
padding: 3px 3px 0 0;
text-decoration: none;
opacity: .8;
}
</style>

<script>
var app = new kendo.mobile.Application(document.body);
</script>
</html>