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

Repeated Listview loading gets slow

5 Answers 418 Views

ListView (Mobile)

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

Brian asked on 12 Feb 2013, 08:16 PM

I have a master/details pair of lists handled by simple listviews. Clicking the master opens/loads the detail view. It works, but after a short amount of time going back and forth, the performance gets slower and slower until it is just unusable. I am using version 2012.3.1315. It's noticeable in a desktop browser as I test, but gets bad fast with the iPhone. When I watch task manager when testing with a desktop browser I see memory climb on the Chrome instance I'm running as I go back and forth. I also notice when I go to the details page it initially displays data from the prior view before refreshing with the current data read into the data source. When I load the master list, I reload from the data source as the data is very fluid, when I go to the details page, it loads from the data source also. Could there be a Kendo memory leak? Could this problem be that I currently have all the views/data sources in one Index page? Is there some Kendo cache I need to turn off? Is there some other way I need to do this to keep performance up? Thanks.

<div id="reportPackageCountView" data-role="view" data-title="Package Count" data-show="mobileReportPackageDataBind">
   <ul data-role="listview" data-style="inset">
     <ul id="reportPackageList"></ul>
   </ul>
</div>
<div id="listPackageCompanyView" data-role="view" data-title="Package Companies" data-show="mobileCompanyPackageDataBindReport">
   <div id="divPackageCompany"></div>
   <ul data-role="listview" data-style="inset">
     <ul id="listPackageCompanies"></ul>
   </ul>
</div>

function mobileReportPackageDataBind(e) {
   dsPackageData.read();
   $("#reportPackageList").kendoMobileListView({
     dataSource: dsPackageData,
     autoBind: false,
     template: kendo.template($('#reportPackageCountTemplate').html())
   });
}

function mobileCompanyPackageDataBindReport(e) {
   packageId = e.view.params.id;
   editPackageData = dsPackageData.get(packageId);

   dsCompanyPackageReport.read();

   $("#divPackageCompany").html("<h3>Pkg: " + editPackageData.PackageID + ", " + editPackageData.Description + "</h3>");
   $("#listPackageCompanies").kendoMobileListView({
     dataSource: dsCompanyPackageReport,
     autoBind: false,
     template: kendo.template($("#packageCompanyListTemplate").html())
   });
}

5 Answers, 1 is accepted

answered on 14 Feb 2013, 02:34 PM

I looked at that sample but I don't think that solves this problem. In another forum thread "Mobile Page Caching" it sounds like rendered Kendo mobile pages never get destroyed or removed from memory so I followed the recommendation there and used .remove() on the elements and recreated them before rendering the list view. That helped a great deal though I still have one spot that seems to slow down, but not nearly at the pace it did before. So I doubt that my work around is the best, but it's working better than before. It sure seems like I should not have to do this kind of stuff to make Kendo mobile work.

function mobilePackageDataBind(e) {

$("#packageList").remove();

$("#packageListWrapper").replaceWith("<div id=\"packageListWrapper\"><div class=\"km-listview-wrapper\"><ul data-role=\"listview\" data-style=\"inset\" class=\"km-listview km-listinset\"><ul id=\"packageList\"></ul></ul></div></div>");

$("#packageList").kendoMobileListView({

dataSource: dsPackageData,

template: kendo.template($('#packageListTemplate').html())

});

}