Kendo ListView with Headers

by kendomobile

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile andASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->
<div data-role="view" id="mainView" data-init="loadListView" >
      <ul id="listView"></ul>
    
</div>

 <script type="text/x-kendo-template" id="listviewTemplate">    
       <a > <strong > #:movieName# </strong>
        <i>  #:dateTime#</i></a>    
 </script>

JavaScript

var app = new kendo.mobile.Application(document.body);

        //create datasource
        var movieDataSource = new kendo.data.DataSource({
            data:
            [
            {
                movieName: "Evil Dead",
                dateTime: "10/7/2013 7:30PM", genre: "Horror"
            },
            {
                movieName: "Scream",
                dateTime: "10/7/2013 8:30PM", genre: "Horror"
            },
            {
                movieName: "Hangover III",
                dateTime: "10/7/2013 9:00PM", genre: "Comedy"
            },
            {
                movieName: "Identity Thief ",
                dateTime: "10/7/2013 1:15PM", genre: "Comedy"
            },
            {
                movieName: "Seven Psychopaths",
                dateTime: "10/7/2013 4:00PM", genre: "Comedy"
            },
            {
                movieName: "Elysium",
                dateTime: "10/7/2013 7:00PM", genre: "Sci-Fi"
            },
            {
                movieName: "Prometheus",
                dateTime: "10/7/2013 12:45PM", genre: "Sci-Fi"
            }],
            group: "genre"
        });

        //instantiate the list view 
        function loadListView() {
            $("#listView").kendoMobileListView({
                dataSource: movieDataSource,
                template: $("#listviewTemplate").html(),
                headerTemplate: "#:value#",
                fixedHeaders: true,
                style: 'inset'
            });
        }