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

Repeated Listview loading gets slow

5 Answers 168 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
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

Sort by
0
Alexander Valchev
Telerik team
answered on 14 Feb 2013, 02:11 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
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())
            });
        }

0
Petyo
Telerik team
answered on 15 Feb 2013, 08:16 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
answered on 21 Mar 2014, 05:42 PM
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
0
Petyo
Telerik team
answered on 24 Mar 2014, 09:29 AM
Hello Brian,

This is the code library I refer to.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView (Mobile)
Asked by
Brian
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Brian
Top achievements
Rank 1
Petyo
Telerik team
John
Top achievements
Rank 1
Share this question
or