mvvm remote binding
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">
<div data-role="grid"
data-sortable="true"
data-columns='["ProductName", "QuantityPerUnit", "Discontinued"]'
data-bind="source: gridSource">
</div>
<br />
<br />
<select data-role="dropdownlist"
data-text-field="text"
data-value-field="index"
data-option-label="Select City"
data-bind="source: citySource, value: selectedCity">
</select>
<span data-bind="text: selectedCity.text"></span>
JavaScript
var gridSource = 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,
"Discontinued": true
},
{
"ProductName": "Tofu",
"QuantityPerUnit": 12.50,
"Discontinued": false
},
{
"ProductName": "Biscuits",
"QuantityPerUnit": 22.50,
"Discontinued": false
}
])
}
}
},
schema: {
model: {
fields: {
ProductName: { type: "string" },
QuantityPerUnit: { type: "number" },
Discontinued: { type: "boolean" }
}
}
}
});
var citySource = 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([
{
"text": "London",
"index": 1
},
{
"text": "Boston",
"index": 2
},
{
"text": "Miami",
"index": 3
}
])
...