Simple ListView Example

A simple example of the ListView widget for Kendo UI Web. This binds to the search result from the Twitter API.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="listView"></div>
<div class="k-pager-wrap">
    <div id="pager"></div>
</div>
<script type="text/x-kendo-tmpl" id="template">
    <div class="tweet">
        <img class="profileImage" src="${profile_image_url}" />
        <strong>${from_user_name}</strong>
        <a href="http://twitter.com/${from_user}">@${from_user}</a>
        <p class="text">${text}</p>
    </div>
</script>

CSS

* {
    color: #333;
    font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.text {
    padding-top: 2px;
    word-wrap: break-word;
}

.profileImage {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
    float: left;
}

.tweet {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #E8E8E8;
    height: 48px;
    padding: 5px;
    margin: 5px;
}

.tweet:hover {
    background-color: #E0E0E0;
    background-image: -webkit-linear-gradient(top, white 0px, #E0E0E0 100%);
    background-origin: padding-box;
    background-repeat: repeat;
    border: 1px solid #999;
    cursor: pointer;
}

.tweet strong {
    font-weight: bold;
}

.tweet a {
    color: #aaa;
    text-decoration: none;
}

JavaScript

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://search.twitter.com/search.json",
            contentType: "application/json; charset=utf-8",
            type: "GET",
            dataType: "jsonp",
            data: {
                q: "#kendoui"
            }
        }
    },
    pageSize: 5,
    schema: {
        data: "results",
        total: "results_per_page"
    }
});

$("#pager").kendoPager({
    dataSource: dataSource
});

$("#listView").kendoListView({
    dataSource: dataSource,
    pageable: true,
    selectable: "multiple",
    template: kendo.template($("#template").html())
});