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>

<script type="text/x-kendo-tmpl" id="template">
        <div class="word">
            <h3>${w}</h3>
            <dl>
                <dt>Price:</dt>
                <dd>${kendo.toString(UnitPrice, "c")}</dd>
            </dl>
        </div>
    </script>

CSS

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

JavaScript

var words = {
    'count': 4,
    'input': 'kendo',
    'groups': [
        {
        'field': 'length',
        'value': '5',
        'items': [{
            'w': 'kendo'}],
        'hasSubgroups': false,
        'aggregates': {}},
    {
        'field': 'length',
        'value': '4',
        'items': [{
            'w': 'done'},
        {
            'w': 'keno'},
        {
            'w': 'node'}],
        'hasSubgroups': false,
        'aggregates': {}}
    ]
};

var wordsDataSource = new kendo.data.DataSource({
    data: words,
    schema: {
      groups: 'groups'
    },
    group: {
        field: 'length'
    },
    serverGrouping: true
});



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