kendoMobileListView with infinite scroll and click event not returning e.dataItem for older page list items.

[David]

Hi, 

I  am trying to create a Kendo Mobile ListView with infinite scrolling and a detail view.
When I select a list item the e.dataItem allows me to pass data to display on selected Item Detail view.
This works fine until the infinite scroll is triggered and loads in more list items...
The DataSource then appears to no longer contain the old items, and therefore e.dataItem is undefined.
I can't seem to find a method that works?

Thanks for your help,
David

// kendoMobileListView code snippet:

click: function(e){
     if ( e.dataItem != undefined )
     {
            console.log("selected: " + e.dataItem.id);
            viewModel = e.dataItem;
            // bind to detail view
            if ( viewModel  != null )
            {
                // extend view model
                viewModel.dateText = function(){ return kendo.toString(new Date(this.startDate),"ddd MMM yyyy h:mm tt"); }
                kendo.bind( $("#viewMyEventItemDetail"), viewModel );
                //app.navigate("#viewMyEventItemDetail");
            }
     }
}

PS. It would also be nice to have some examples/demos showing infinite scroller and a detail view?

[Alexander Valchev]

Hello David,

The behaviour that you described is expected, because by design when server paging is used the DataSource keeps only the records of the current page. In other words when the second page is loaded, the data of the previous (first) page is replaced. As a result the old ListView items persists in the html mark-up but their corresponding dataItems are not stored in the DataSource. 

This is done for performance reasons - assuming that the scroll is endless, keeping all dataSource pages may cause memory issues.

The behaviour cannot be prevented, however there is an easy way to use the ListView items as navigation links. The html mark-up of previous items is not cleared so you could render the items as links and use them to change the Views. Also it is possible to store additional data (such as the item's ID) in the mark-up as custom data attributes and retrieve it later at the click event.

As the old dataItem does not persists in the DataSource, I suggest to issue another Ajax call to the server to retrieve it. As the success event of that request, you can update the ViewModel and navigate to the details View.

Regards,
Alexander Valchev
the Telerik team