Kendo ListView with Headers

by Miro Hristov

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;
}

#testThumbnail svg{
  width:20px;
}

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: "data:image/svg+xml,<?xml version='1.0' ?><svg viewBox='0 0 2400 1200' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'><defs></defs><g transform='matrix(1,0,0,1,-176.296875,-124)' ><g transform='matrix(1,0,0,1,0,0)' ><g transform='matrix(1,0,0,1,0,0)' ><g transform='matrix(1,0,0,1,225.296875,124)' ><circle   cx='60' cy='60' r='60'  stroke='none'   fill='#32beff'    transform='matrix(1,0,0,1,0,0)'  ></circle></g><g transform='matrix(1,0,0,1,448.296875,154)' ><circle   cx='60' cy='60' r='60'  stroke='none'   fill='#32beff'    transform='matrix(1,0,0,1,0,0)'  ></circle></g><g transform='matrix(1,0,0,1,176.296875,411)' ><circle   cx='60' cy='60' r='60'  stroke='none'   fill='#32beff'    transform='matrix(1,0,0,1,0,0)'  ></circle></g><g transform='matrix(1,0,0,1,393.296875,490)' ><circle   cx='60' cy='60' r='60'  stroke='none'   fill='#32beff'    transform='matrix(1,0,0,1,0,0)'  ></circle></g><g><g><path    d='M285.297 244 L 285.297 327.5 236.297 327.5 236.297 411'   stroke='#282828'  stroke-width='2'   fill='none'   ></path><path    d='M0 0 L 10 5 0 10 3 5Z'   stroke='none'   fill='#000000'    transform='matrix(0,1,-1,0,241.296875,401)' ></path></g></g><g><g><path    d='M345.297 184 L 396.797 184 396.797 214 448.297 214'   stroke='#282828'  stroke-width='2'   fill='none'   ></path><path    d='M0 0 L 10 5 0 10 3 5Z'   stroke='none'   fill='#000000'    transform='matrix(1,0,0,1,438.296875,209)' ></path></g></g><g><g><path    d='M508.297 274 L 508.297 382 453.297 382 453.297 490'   stroke='#282828'  stroke-width='2'   fill='none'   ></path><path    d='M0 0 L 10 5 0 10 3 5Z'   stroke='none'   fill='#000000'   ...