MVVM editing

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<div id="serviceSearchContent" style="width:100%;height:500px;">
   <div data-bind="text:serviceTypeDisplayValue"></div>
   <select id="serviceTypes" style="width:300px;"
                data-role="dropdownlist" data-value-field="ProductID" data-text-field="ProductName"
                data-bind="source: serviceTypeView, value: serviceTypeValue" />    
</div>

JavaScript

var serviceTypeDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            dataType: "jsonp",
            url: "http://demos.kendoui.com/service/Products"
        }
    },
    change: function() {        
        var viewModel = kendo.observable({
            serviceTypeView: [],
            serviceTypeValue: {},
            serviceTypeDisplayValue: function () {
                return kendo.stringify(this.get("serviceTypeValue"));
            }
        });        
        
        viewModel.serviceTypeView = serviceTypeDataSource.view();
        
        kendo.bind($("#serviceSearchContent"), viewModel);
    }
});

serviceTypeDataSource.read();