form mvvm

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<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.metro.min.css">
<form id="productEditForm">
    <h3>Product Edit Form</h3>
        <ul>
            <li>
                <label for="productName">Product Name: </label>
                <input type="text" id="productName" class="k-textbox" data-bind="value: selectedProduct.productName" />                
            </li>
            <li>
                <label for="qtyPerUnit">Quantity Per Unit: </label>
                <input type="number" id="qtyPerUnit" data-role="numerictextbox" data-bind="value: selectedProduct.QuantityPerUnit" />          
            </li>
            <li>
                <label for="unitPrice">Unit Price: </label>
                <input type="number" id="unitPrice" data-role="numerictextbox" data-format="c" data-bind="value: selectedProduct.UnitPrice" />
            </li>
            <li>
                <label for="unitsInStock">Units in Stock: </label>
                <input type="number" id="unitsInStock" data-role="numerictextbox" data-format="n0" data-bind="value: selectedProduct.UnitsInStock" />
            </li>
            <li>
                <label for="unitsOnOrder">Units on Order: </label>
                <input type="number" id="unitsOnOrder" data-role="numerictextbox" data-format="n0" data-bind="value: selectedProduct.UnitsOnOrder" />
            </li>
            <li>
                <label for="reorderLevel">Reorder Level: </label>
                <input type="number" id="reorderLevel" data-role="numerictextbox" data-format="n0" data-bind="value: selectedProduct.ReorderLevel" />
            </li>
            <li>
                <input id="discontinued" type="checkbox" data-bind="checked: selectedProduct.discontinued" />
                <label...

CSS

.k-textbox {
            width: 11.8em;
        }
 
        #productEditForm {
            width: 510px;
            height: 323px;
            margin: 30px auto;
            padding: 10px 20px 20px 170px;
        }
 
        #productEditForm h3 {
            font-weight: normal;
            font-size: 1.4em;
            border-bottom: 1px solid #ccc;
        }
 
        #productEditForm ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #productEditForm li {
            margin: 10px 0 0 0;
        }
 
        label {
            display: inline-block;
            width: 120px;
            text-align: right;
        }
 
        .required {
            font-weight: bold;
        }

JavaScript

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            //using jsfiddle echo service to simulate JSON endpoint
            url: "/echo/json/",
            dataType: "json",
            type: "POST",
            data: {
                // /echo/json/ echoes the JSON which you pass as an argument
                json: JSON.stringify([
                    {
                        "productName": "Chai", 
                        "QuantityPerUnit": 2.50,
                        "UnitPrice": 18,
                        "UnitsInStock": 32,
                        "UnitsOnOrder": 12,
                        "ReorderLevel": 1,
                        "discontinued": true
                    }
                ])
            }
        }
    }
});

var viewModel = kendo.observable({
    productsSource: dataSource,
    selectedProduct: null
});

dataSource.bind("change", function() {
   //the form have to binded to a single item of the dataSource
   //get first dataSource record
   viewModel.set("selectedProduct", this.view()[0]);
});
//reads the dataSource
dataSource.read();

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