Add Dynamic ListView to View

[Eric]

I want to dynamically add a list view to a view:

My view:

<div id="real-estate-2" data-role="view" data-layout="main" data-before-show="beforeShowRealEstate" data-show="realEstateListShow" data-hide="hideRealEstateList" class="real-estate-view">

         

</div>

Initialization code:

function realEstateListShow(e) {

             

    e.view.content.append($('<ul class="real-estate-list-properties"></ul>'));

 

    var viewID = e.view.id;

 

    $(viewID + " .real-estate-list-properties").kendoMobileListView({

        dataSource: new kendo.data.DataSource({

            pageSize: 20, //defines page size. Required by the "Endless scrolling"

            data: realEstateFormattedData

        }),

 

        template: $('#profile-list-item-template').text(),

 

        endlessScroll: true,

 

        scrollTreshold: 30 //treshold in pixels

    });

 }

This works, but when I try to scroll the list view it just clicks the list element and navigates away. The list view won't scroll.

If I have the <ul> element in the view before hand:

<div id="real-estate-1" data-role="view" data-layout="main" data-before-show="beforeShowRealEstate" data-show="realEstateListShow" data-hide="hideRealEstateList" class="real-estate-view">

    <ul class="real-estate-list-properties"></ul>

</div>

this works fine and scrolling is perfect.  

I am trying to focus on not having listviews after navigating away to improve memory management and user experience on low memory devices.

[Petyo]

Hello Eric,

You should use the scrollerContent property (documented at our getting started section).

Greetings,
Petyo
the Telerik team