JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div data-role="view" id="" data-title="First" data-init="initFileGroupsList">
NON-statically defined listview
<div id="dynamic"></div>
<hr />
Statically defined listview
<ul data-role="listview" id="staticListView" data-type="group" data-style="inset" data-click="itemClicked">
<li>Static Items
<ul>
<li><a href="#aboutView">111111111</a></li>
<li><a href="#aboutView">22222222222</a></li>
<li><a href="#aboutView">333333333333</a>
<input id="ww" data-change="switchClicked" data-on-label="Clean" data-off-label="Skip" data-role="switch" />
</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="aboutView" data-title="About">
ABOUT
</div>
<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<p>My View Title</p>
</div>
</div>
<!--Content-->
<div data-role="footer">
<div data-role="tabstrip">
<a href="" data-icon="settings">First</a>
<a href="#aboutView" data-icon="info">About</a>
</div>
</div>
</div>
<script id="fileGroupsItemTemplate" type="text/x-kendo-template">
<table class="icon">
<tr><td>
<img src="#= data.Image#" />
</td><td style="vertical-align: middle">
#= data.Name #
</td>
</tr>
</table>
#if(data.Docs.length > 0){#
<ul class="listview">
#for(var i=0; i < data.Docs.length; i++){#
<li>
...
CSS
.icon {
margin: 10px 0px -10px 10px;
}
.km-switch {
margin-right: 20px;
}
JavaScript
var viewModel;
var app, appElement = null,
appElement = document.body,
app = new kendo.mobile.Application(appElement, {
layout: "mainLayout",
transition: 'fade',
//initial: "mainView",
//icon: "Images/warning-icon.png",
platform: "ios"
});
function initFileGroupsList(e) {
// compile the template
var template = kendo.template($("#fileGroupsItemTemplate").html());
// create a new datasource
var fileGropsRemoteDS = new kendo.data.DataSource({
data: [{"__type":"JsonFileTypeGroup:#","Docs":[{"ConvertToPdf":1,"Name":"мой ноут на продажу.docx","NeedProcess":true},{"ConvertToPdf":1,"Name":"sticky notes.docx","NeedProcess":false},{"ConvertToPdf":0,"Name":"билеты.odt","NeedProcess":true}],"Image":"http://icons.iconarchive.com/icons/zerode/plump/32/Office-Word-icon.png","Name":"Word"},{"__type":"JsonFileTypeGroup:#","Docs":[{"ConvertToPdf":1,"Name":"Core-Node Testing 04292012.xlsx","NeedProcess":true},{"ConvertToPdf":1,"Name":"экселевский документ","NeedProcess":true},{"ConvertToPdf":0,"Name":"Test (EN) - Тест(RU)","NeedProcess":true}],"Image":"http://icons.iconarchive.com/icons/zerode/plump/32/Office-Excel-icon.png","Name":"Excel"},{"__type":"JsonFileTypeGroup:#","Docs":[{"ConvertToPdf":1,"Name":"Test presentation.pptx","NeedProcess":true}],"Image":"http://icons.iconarchive.com/icons/zerode/plump/32/Office-Outlook-icon.png","Name":"PPT"}],
change: function() {
// the 'change' function is called when the datasource reads
// replace the 'dynamic' plaholder div with the output of the template
$("#dynamic").replaceWith(kendo.render(template, this.view()));
// create the listview widgets
$(".listview").kendoMobileListView({
style: "inset",
...