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="view">
Product: <input type="text" id="products" data-bind="value: ProductId" />

<BR><BR>
Item: <input type="text" id="items" data-bind="value: ItemId" />
</div>

CSS

.container label {
    display: inline-block;
    width: 80px;
}

.container li {
  padding-bottom: 5px;    
}

.container {
   background-color: #eeeeee;
   width: 400px; 
   padding: 10px;  
}
.selector {
    padding: 10px;
    width: 400px;
    background-color: #D75B26;
}

JavaScript

var viewModel = kendo.observable(
    {
        ProductId: 0,
        ItemId: 2
    });

var ddlValues = [
                     {name: "Test 0", value: "0"},
                     {name: "Test 1", value: "1"},
                     {name: "Test 2", value: "2"},
                     {name: "Test 3", value: "3"},
                     {name: "Test 4", value: "4"}
                ];

$("#products").kendoDropDownList({
    dataSource: ddlValues ,
    dataTextField: "name",
    dataValueField: "value",
    optionLabel: "Select"
          
    });

$("#items").kendoDropDownList({
    dataSource: ddlValues ,
    dataTextField: "name",
    dataValueField: "value",
    optionLabel: "Select"
          
    });

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