JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
<div data-role="view" id="HomeTab" data-title="Home" data-layout="tabstrip" >
<ul data-role="listview" data-style="inset" id="Ul2">
<li>
<ul>
<li>
<p>Sample</p>
</li>
</ul>
</li>
</ul>
<div class="console"></div>
</div>
<div data-role="view" id="PictureTab" data-title="Photo Gallery" data-init="initPictureView" data-layout="tabstrip">
<div id="PictureView"></div>
</div>
<div data-role="layout" data-id="tabstrip">
<header data-role="header">
<div data-role="navbar" id="navbar" class="NavBar">
<span data-role="view-title"></span>
</div>
</header>
<p>TabStrip</p>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#HomeTab" data-icon="home">Home</a>
<a href="#PictureTab" data-icon="organize">Photos</a>
</div>
</div>
</div>
<script type="text/x-kendo-template" id="PictureTemplate">
--><div class="photo ${PictureUrl}" data-role="page"></div><!--
</script>
CSS
.photo {
height: 220px;
}
.class1 {
background-color: blue;
}
.class2 {
background-color: green;
}
JavaScript
var app = new kendo.mobile.Application($(document.body), { transition: "slide", loading: "" });
function initPictureView(e) {
$.ajax({
url: '/echo/json/',
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
json: JSON.stringify([
{ PictureUrl: "class1" },
{ PictureUrl: "class2" }
]),
delay: 1
},
success: function(response) {
console.log(response);
var template = kendo.template($("#PictureTemplate").html()),
content = kendo.render(template, response);
$("#PictureView")
.kendoMobileScrollView()
.data("kendoMobileScrollView")
.content("<!--" + content + "-->");
}
});
}