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>${name}</strong>
        <a href="http://twitter.com/${name}">@${name}</a>
        <p class="text">${name}</p>
    </div>
</script>
<script type="text/x-kendo-tmpl" id="altTemplate">
    <div class="altTweet">
        <img class="profileImage" src="${name}" />
        <strong>${name}</strong>
        <a href="http://twitter.com/${name}">@${name}</a>
        <p class="text">${name}</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;
}

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

.altTweet:hover {
    background-color: #FEE;
    background-image: -webkit-linear-gradient(bottom, white 0px, #FEE 100%);
    background-origin: padding-box;
    background-repeat: repeat;
    border: 1px solid #999;
}

.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;
}

.tweet strong {
    font-weight: bold;
}

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

JavaScript

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://localhost:7002/agora/fo/data/meetings/352/invitationTypes",
            type: "GET",
            dataType: "json"
        }
    },
    schema : {
			model : {
				id : "id",
				fields : {
					name : {
						editable : false
					}
				}
			}
		}
});

$("#listView").kendoListView({
    altTemplate: kendo.template($("#altTemplate").html()),
    dataSource: dataSource,
    template: kendo.template($("#template").html())
});