JSFiddle - React, Tailwind, and code Playground
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.mobile.min.js"></script>
<div data-role="view" id="my-favourites" data-init="mobileListViewHeadersInit" data-title="My Favourites" data-model="vm">
<div data-role='header'>
<div data-role='navbar'>
</div>
</div>
<ul id="myfavlist"></ul>
</div>
<script type="text/x-kendo-template" id="myfavlistTemplate">
test
</script>
JavaScript
var jsonObj = [];
var jsonObj2 = [];
function populateList() {
var letters = "a,b,c,d,e,f,g,h,i,j,k,l,m,m,x,w,q".split(',');
var letters2 = "a,b,c".split(',');
for (var x = 0; x < letters.length; x++) {
for (var y = 0; y < 3; y++) {
jsonObj.push({
id: x,
name: "Item 1",
letter: letters[x]
});
}
}
for (var x = 0; x < letters2.length; x++) {
for (var y = 0; y < 3; y++) {
jsonObj2.push({
id: x,
name: "Item 1",
letter: letters[x]
});
}
}
}
populateList();
var dataSource = kendo.data.DataSource.create({
data: jsonObj,
group: "letter"
});
var dataSource2 = kendo.data.DataSource.create({
data: jsonObj2,
group: "letter"
});
function mobileListViewHeadersInit() {
$("#myfavlist").kendoMobileListView({
dataSource: dataSource,
template: $("#myfavlistTemplate").html(),
headerTemplate: "${value}",
fixedHeaders: true
});
}
var vm = kendo.observable({
refresh: function () {
$("#myfavlist").data('kendoMobileListView').setDataSource(dataSource2);
kendo.mobile.application.scroller().reset();
}
});
//For some reason init was not calling this.. so fudge it
setTimeout(mobileListViewHeadersInit,1000);
setTimeout(vm.refresh,5000);
window.kendoMobileApplication = new kendo.mobile.Application($(document).body, {
transition: "slide"
});