Repeated Listview loading gets slow

6 posts, 0 answers
  1. Brian
    Brian avatar
    16 posts
    Member since:
    Dec 2012

    Posted 12 Feb 2013 Link to this post

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




  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Feb 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Brian
    Brian avatar
    16 posts
    Member since:
    Dec 2012

    Posted 14 Feb 2013 Link to this post

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

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 15 Feb 2013 Link to this post

    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!
  6. John
    John avatar
    1 posts
    Member since:
    Jan 2014

    Posted 21 Mar 2014 in reply to Petyo Link to this post

    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
  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 24 Mar 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready