Repeated Listview loading gets slow

[Brian]

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())
   });
}

[Alexander Valchev]

Hi Brian,

I believe that the problem is caused by the fact that ListView widgets are re-initialized at the view show event. Widget re-initialization is not supported, as you can see it causes a lot of troubles.

As I understood it you would like to configure hierarchical (dependent) ListView widgets located in different Views. My recommendation is to follow the approach demonstrated in this code library.

Regards,
Alexander Valchev
the Telerik team

[Brian]

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

            });

        }

[Petyo]

Hello Brian,

You are correct - this is not the recommended way to implement such functionality. The approach you describe most likely suffers from the same issues as the initial implementation - widgets and views are re-initialized on each navigation.

The most efficient approach in that case would be to use dynamic datasource configuration, as the example posted below does - which is the recommended implementation. 

Regards,
Petyo
the Telerik team

[John]

Peyto, sorry for reviving this old thread, i was curious which example are you referencing in the last post? you mentioned an example below showing information with dynamic datasource config but i do not see the example you mention

[Petyo]

Hello Brian,

This is the code library I refer to.

Regards,
Petyo
Telerik