dualflatdatasource

by Chris O'Brien

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="main-container">
    <ul data-bind="source: countryDataSource" data-role="listview" data-template="country-template"></ul>
    <ul data-bind="source: cityDataSource" data-role="listview" data-template="city-template"></ul>    
</div>
<script id="country-template" type="text/x-kendo-template">
     <li>
         <label data-bind="text:id"></label>
         <label data-bind="text:text"></label>
         <ul data-bind="source: cityDataSource" data-role="listview" data-template="city-template"></ul>
     </li>
</script>
<script id="city-template" type="text/x-kendo-template">
     <li>
         <label data-bind="text:id"></label>
         <label data-bind="text:text"></label>
         <label data-bind="text:country"></label>
     </li>
</script>

JavaScript

var cnt = 0;
var countryData = [
    {
    "id": "uk",
    "text": "united kingdom"},
    {
    "id": "aus",
    "text": "australia"}
];
var cityData = [
    {
    "id": "lon",
    "text": "london",
        "country": "uk"},
    {
    "id": "syd",
    "text": "sydney",
        "country": "aus"}
];

var countryDS = new kendo.data.DataSource({
                       data: countryData,
                       autoSync: true
                    });
var cityDS = new kendo.data.DataSource({
                       data: cityData,
                       autoSync: true
                    });
$(document).ready(function () {
            var viewModel = kendo.observable({
                countryDataSource : countryDS,
                cityDataSource : cityDS});

    kendo.bind($("#main-container"), viewModel);
});