Kendo UI

jQuery + Kendo UI + MockJax

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<div id="listview" data-role="listview" data-selectable="true"
data-bind="source: listSource" data-template="template"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div class="customers">
        <dl>
            <dt>First Name</dt>
            <dd>${FirstName}</dd>
            <dt>Last Name</dt>
            <dd>${LastName}</dd>
         </dl>                 
   </div>
</script>

CSS

.customers
                {
                    float: left;
                    width: 320px;
                    margin: 5px;
                    padding: 3px;
                    -webkit-box-shadow: 1px 0px 1px 2px rgba(33, 33, 33, .5);
                    -moz-box-shadow: 1px 0px 1px 2px rgba(33, 33, 33, .5);
                    box-shadow: 1px 0px 1px 2px rgba(33, 33, 33, .5);
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    border-radius: 8px;
                }

                .customers dl
                {
                    margin: 10px 0;
                    padding: 0;
                    min-width: 0;
                }
                .customers dt, dd
                {
                    float: left;
                    margin: 0;
                    padding: 0;
                    height: 30px;
                    line-height: 30px;
                }
                .customers dt
                {
                    clear: left;
                    padding: 0 5px 0 15px;
                    text-align: right;
                    opacity: 0.6;
                    width: 100px;
                }
                .k-listview
                {
                    border: 0;
                    padding: 0;
                    min-width: 0;
                }
                .k-listview:after, .customers dl:after
                {
                    content: ".";
                    display: block;
                    height: 0;
                    clear: both;
                    visibility: hidden;
                }
                .edit-buttons
                {
                    text-align: right;
                    padding: 5px;
                    min-width: 100px;
                    border-top: 1px solid rgba(0,0,0,0.1);
                    -webkit-border-radius: 8px;
                    -moz-border-radius: 8px;
                    border-radius: 8px;
                }

       ...

JavaScript

kendo.ui.ListView.fn.options.selectable = false;

var viewModel = kendo.observable({       
        listSource: [ { FirstName: "First Name", LastName: "Last Name" },
                { FirstName: "First Name1", LastName: "Last Name1" } ]
});
    

kendo.bind(document.body.children, viewModel);