insight playlist - kendo press for more

insight playlist - kendo press for more

by jmucci

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="mobileListViewPressToLoadMore" data-title="Playlist-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="endless-scrolling"></ul>
</div>

<script id="endless-scrolling-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>
    

    
</body>
</html>

CSS

.tweet {
        font-size: .8em;
        line-height: 1.4em;
    }
    .pullImage {
        width: 64px;
        height: 64px;
        border-radius: 3px;
        float: left;
        margin-right: 10px;
    }
    .sublink {
        font-size: .9em;
        font-weight: normal;
        display: inline-block;
        padding: 3px 3px 0 0;
        text-decoration: none;
        opacity: .8;
}

JavaScript

function mobileListViewPressToLoadMore() {
    var dataSource = new kendo.data.DataSource({
        pageSize: 5,
        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",
                    //additional parameters sent to the remote service
                    pageSize: options.pageSize,
                    page: options.page //next page
                };

                return parameters;
            }
        },
        schema: { // describe the result format
            data: "Data",
            // the data which the data source will be bound to is in the "results" field
            count: "Count"
        }
    });

    $("#endless-scrolling").kendoMobileListView({
        dataSource: dataSource,
        // change: onChange,
        template: $("#endless-scrolling-template").text(),
        loadMore: true
     //   endlessScroll: true,
     //   scrollTreshold: 30 //treshold in pixels
    });
}

// function onChange() {
//    var data = dataSource.view();
//    var selected = $.map(this.select(), function(item) {
//        return data[$(item).index()].Name;
//    });
//
//    console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
// }

var app = new kendo.mobile.Application(document.body);