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" } } }, schema: { data: "results", total: "results_per_page" } }); $("#listView").kendoListView({ dataSource: dataSource, pageable: true, template: kendo.template($("#template").html()) });
<div id="listView"></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>
* { 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; } .tweet strong { font-weight: bold; } .tweet a { color: #aaa; text-decoration: none; }