Kendo ListView with Headers

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>
<div data-role="view" id="mainView" data-init="loadListView" >
      <ul id="listView"></ul>   
</div>

 <script type="text/x-kendo-template" id="listviewTemplate">
 			<div class="listItem">
      	  <a> <strong > #:movieName# </strong>
      		<i>  #:dateTime#</i></a>
          <div id="thumbnailContainer" style="height: 100%; width: 100%;">
            <img id="testThumbnail" src="#:thumbnail#" style=""/>
        </div>
      </div>  
 </script>

CSS

.listItem{
  height: 200px;
}

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",
                thumbnail:...