dualflatdatasource

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">
    <div data-bind="source: countryDataSource" data-role="listview" data-template="country-template"></ul>
</div>

<script id="country-template" type="text/x-kendo-template">
     <div>
         <label data-bind="text:text"/>(<label data-bind="text:id"/>)<input type="text" data-bind="value: text" />
         
         <!-- at this point now want to show the cities within country -->
         Cities
         <ul data-bind="source: getCityData" data-role="listview" data-template="city-template"></ul>
         
    </div>
</script>

<script id="city-template" type="text/x-kendo-template">
     <li>
         <!-- we want tto allow the city text to be editable -->
         <label data-bind="text:text"/><input type="text" data-bind="value: text" />(<label data-bind="text:id"/>)
    </li>
</script>

JavaScript

<!-- create test data, countries, and then cities - each city has a fkey that points back at country -->
var countryData = [
    {"id": "uk","text": "united kingdom"},
    {"id": "aus","text": "australia"}
];

var cityData = [
    {"id": "lon","text": "london","country": "uk"},
    {"id": "liv","text": "liverpool","country": "uk"},    
    {"id": "syd","text": "sydney","country": "aus"},
    {"id": "can","text": "canberra","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,
        getCityData: function(context) {
            cityDS.filter({ field: "country", operator: "eq", value: context.id });
            return cityDS.view();
        }
    });
    
    kendo.bind($("#main-container"), viewModel);
});