Kendo UI

jQuery + Kendo UI + MockJax

by ryan_nauman

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<ul id="groupView"></ul>

CSS

li{padding:3px; border:1px ridge #ccc}
.km-group-title{background:#999; color:#EEE; padding:3px}

JavaScript

var words = [
    {
    'w': 'kendo',
    'length': 5},
{
    'w': 'done',
    'length': 4},
{
    'w': 'keno',
    'length': 4},
{
    'w': 'node',
    'length': 4}
];

var wordsDataSource = new kendo.data.DataSource({
    data: words,
    group: {
        field: 'length',
        dir: 'desc'
    }
});



$("#groupView").kendoMobileListView({
    dataSource: wordsDataSource,
    template: '${w}',
    headerTemplate: '${value} Letters'
});