Simple ListView Example

A simple example of the ListView widget for Kendo UI Web.

by jbristowe

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>

CSS

.person {
    border: 1px solid #E8E8E8;
    color: #333;
    font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 78px;
    padding: 10px;
    margin: 5px;
}

.person strong {
    font-weight: bold;
}

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

JavaScript

var people = [
    {
        FirstName: "Todd",
        LastName: "Anglin",
        Twitter: "ToddAnglin"
    },
    {
        FirstName: "Brandon",
        LastName: "Satrom",
        Twitter: "BrandonSatrom"
    },
    {
        FirstName: "Burke",
        LastName: "Holland",
        Twitter: "BurkeHolland"
    },
    {
        FirstName: "John",
        LastName: "Bristowe",
        Twitter: "JohnBristowe"
    }
];

$("#listView").kendoListView({
    dataSource: people,
    template: "<div class=\"person\"><strong>${FirstName} ${LastName}</strong> <a href=\"http://twitter.com/${Twitter}\">@${Twitter}</a></div>"
});