DropDownList - MVVM

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>,
    textbox: <span data-bind="text: textboxValue"></span>
}
</pre>
    <input id="products" data-bind="value: selectedId, custom: selectedId"/>
    <input id="textbox" data-bind="value: textboxValue"/>
    <button id="clear" class="k-button">Clear</button>
    </div>

JavaScript

var viewModel = kendo.observable({
    //selectedId: null,
    selectedId: 2,
    textboxValue: "lorem ipsum"
});
 
var data = [
    {text: "12 Angry Men", value:"1"},
    {text: "Il buono, il brutto, il cattivo.", 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",
                   placeholder: "No movie",
                   dataSource: data
              })
              .closest(".k-widget")
              .attr("id", "products_wrapper");

var combobox = $("#products").data("kendoComboBox");

$("#clear").click(function() {
    combobox.value(null);
    combobox.trigger("change");
});

kendo.data.binders.widget.custom = kendo.data.Binder.extend( {
    refresh: function() {
        viewModel.set("textboxValue", combobox.text());
    }
});

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