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">
    <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: cityDataSource" 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});

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