jube-fork/Jube.App/wwwroot/kendo/examples/mobile-listview/fixedheaders.html

<div data-role="view" id="listview-headers" data-init="mobileListViewHeadersInit" data-title="Fixed Headers">
    <ul id="fixed-listview"></ul>
</div>

<script type="text/x-kendo-template" id="listviewHeadersTemplate">
    <img class="km-thumbnail" src="${url}" />
    <h4>${name}</h4>
    <p>${description}</p>
</script>

<script>
    var groupedData = [
        { name: "Sashimi Salad", description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.", url: "content/mobile/listview/sashimi-salad.jpg", letter: "S" },
        { name: "Seaweed Salad", description: "A nice seaweed salad.", url: "content/mobile/listview/seaweed-salad.jpg", letter: "S" },
        { name: "Edamame", description: "Boiled soy beans with salt.", url: "content/mobile/listview/edamame.jpg", letter: "E" },
        { name: "Maguro", description: "Tuna pieces.", url: "content/mobile/listview/maguro.jpg", letter: "M" },
        { name: "Tekka Maki", description: "Tuna roll with wasabi.", url: "content/mobile/listview/tekka-maki.jpg", letter: "T" },
        { name: "California Rolls", description: "Crab sticks, avocado and cucumber.", url: "content/mobile/listview/california-rolls.jpg", letter: "C" }
    ];

    function mobileListViewHeadersInit() {
        $("#fixed-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter" }),
            template: $("#listviewHeadersTemplate").html(),
            headerTemplate: "${value}",
            fixedHeaders: true
        });
    }
</script>