Cascading Drop Down Test

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id='container'>
    <select data-role='dropdownlist' data-bind='source:parentList, value:parent' 
    data-value-field='ProductID' data-text-field='ProductName'></select>
    <select data-role='dropdownlist' data-bind='source:dependentList, value:child' 
    data-value-field='EmployeeId' data-text-field='FullName'></select>
        
    <button data-bind='click: showData'>show</button>
</div>

JavaScript

var viewModel = new kendo.observable({
    parent: 2,
    child: 1,
    parentList: new kendo.data.DataSource({
        transport: {
            read: {
                dataType: "jsonp",
                url: "http://demos.kendoui.com/service/Products"
            }
        }
    }),
    dependentList: new kendo.data.DataSource({
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "http://demos.kendoui.com/service/Employees"
                }
            }
        }),
    showData: function(e) {
        alert(this.get('parent') +'|'+this.get('child'));
        kendo.bind($('#container'), viewModel);
    }
});

kendo.bind($('#container'), viewModel);