JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.2.626/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.mobile.all.min.css">
<div data-role="view" id="my-favourites" data-init="mobileListViewHeadersInit" data-title="My Favourites" data-model="vm">
    <div data-role='header'>
        <div data-role='navbar'> <a data-role='button' data-bind='click : refresh'>refresh</a> 
        </div>
    </div>
    <ul id="myfavlist" data-type="group"></ul>
</div>
<script type="text/x-kendo-template" id="myfavlistTemplate">
    test
</script>

JavaScript

var jsonObj = [];

    function populateList() {

        var letters = "a,b,c,d,e,f,g,h,i,j,k,l,m,m,x,w,q".split(',');


        for (var x = 0; x < letters.length; x++) {
            for (var y = 0; y < 3; y++) {
                jsonObj.push({
                    id: x,
                    name: "Item 1",
                    letter: letters[x]
                });
            }
        }

    }
    window.kendoMobileApplication = new kendo.mobile.Application($(document).body, {
        transition: "slide"
    });
    populateList();

    var dataSource = kendo.data.DataSource.create({
        data: jsonObj,
        group: "letter"
    });

    function mobileListViewHeadersInit() {

        $("#myfavlist").kendoMobileListView({

            dataSource: dataSource,

            template: $("#myfavlistTemplate").html(),

            headerTemplate: "${value}",

            fixedHeaders: true

        });

    }


    var vm = kendo.observable({
        refresh: function () {

            dataSource.fetch();
        }
    });