Kendo ComboBox, MVVM

by LeeMellinger

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
<pre>
{
    selectedId: <span data-bind="text: selectedId"></span>    
}
</pre>
    <br>
    <br>
    <input id="textbox"/>

    <button id="updateButton" class="k-button">Update</button>
    <br>
    <br>
    <input id="products" data-bind="value: selectedId"/>

 </div>

JavaScript

var viewModel = kendo.observable({
    selectedId: 2
});
 
var data = [
    {text: "12 Angry Men", value:"1"},
    {text: "Il buono", value:"2"},
    {text: "Inception", value:"3"},
    {text: "One Flew Over the Cuckoo's Nest", value:"4"},
    {text: "Pulp Fiction", value:"5"},
    {text: "Schindler's List", value:"6"},
    {text: "The Dark Knight", value:"7"},
    {text: "The Godfather", value:"8"},
    {text: "The Godfather: Part II", value:"9"},
    {text: "The Shawshank Redemption", value:"10"},
    {text: "The Shawshank Redemption 2", value:"11"}
];

$("#products").kendoComboBox({
                   dataTextField: "text",
                   dataValueField: "value",
                   dataSource: data
              });

$("#updateButton").click(function() {    

    viewModel.set('selectedId', document.getElementById('textbox').value);

});

kendo.bind($("#example"), viewModel);