d7 ListView / Endless scrolling / pull to refresh

d7 ListView / Endless scrolling / pull to refresh, with selection Selection does NOT work once you scroll ...

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
    <div data-role="view" data-init="ListViewInit" data-title="List View LrQau -2">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>

    <ul id="ListView" data-role="listview" data-style="inset"></ul>
</div>

<script id="ListView-template" type="text/x-kendo-template">

       <a >
        <div class="playlistItem">${Name}</div>
        <span style="color:gray; font-size:smaller">[Style: ${AssessmentType}</span>
        <span style="color:gray; font-size:smaller">| Question Count: ${QuestionCount}</span>
    </a>

    </script>
    
    
<!--    
<script id="ListView-template" type="text/x-kendo-template">
    <div class="tweet">
        <span>${Name}</span><br/>
        <span style="color:gray; font-size:smaller">[Style: ${AssessmentType}</span>
        <span style="color:gray; font-size:smaller">| Question Count: ${QuestionCount}</span>
   </div>
</script>    
    -->

CSS

.playlistItem{
        font-size: .9em;
        line-height: 1em;
  
    }


.km-ios .km-view .km-content .km-list .km-state-active .km-listview-link {
    background-color: rgb(192,192,192);
}

JavaScript

function ListViewInit() {


    var dataSource = new kendo.data.DataSource({
        pageSize: 5,


        change: function(e) {
            //check whether any data is returned
            console.log("change: function() ");

/*
            // non of this works, as documented ---------------------------------------------
            if (!this.view()[0]) {
                //disable endless scroll
                $("#ListView").data("kendoMobileListView").stopEndlessScroll();
            }
            var haveData = this.view()[0];
            if (!haveData) {
                var listview = $("#ListView");
                var listviewData = $("#ListView").data;
                var listviewDatakendoMobileListView = $("#ListView").data("kendoMobileListView");
                // where is stop endless scroll ???????????????
                // the following will clear the list (no exception thrown)
                listviewDatakendoMobileListView.stopEndlessScrolling();
            }
            // --------------------------------------------- non of this works, as documented 
*/

            // this seems to work ...
            // see: http://www.kendoui.com/forums/ui/listview/listview-endlessscroll-problem.aspx#2365173
            //
            if (e.items.length < e.sender._pageSize) {
                var list = $("#ListView").data("kendoMobileListView");
                if (list && list._scrollerInstance) {
                    list._scrollerInstance.unbind('scroll');
                }
            }

        },
        serverPaging: true,
        transport: {
            read: {
                url: "http://d7.conveyclassrooms.com/api/engage/GetPlaylists",
                // the remove service url
                dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
            },
            parameterMap: function(options) {
                var parameters = {
                    id: "CCDA27BA-9028-40FB-865E-09BF0163C2D1",
              ...