1. data-value-primitive 属性
<select data-value-field="id" data-text-field="name"
data-bind="value: selectedProduct, source: products">
</select>
<script>
var viewModel = kendo.observable({
selectedProduct: null,
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});
viewModel.selectedProduct = viewModel.products[1];
kendo.bind($("select"), viewModel);
</script>
In this example the second option will be selected after calling kendo.bind. It's value attribute is equal to the value of the id field of theselectedProduct. If the user selects another option
the selectedProduct will be set to the corresponding item from the products array.
You can also use the value binding with a View-Model field which is of primitive type.
<select data-role="dropdownlist" data-option-label="Select product..." data-value-primitive="true"
data-value-field="id" data-text-field="name" data-bind="value: selectedProductId, source: products">
</select>
<script>
var viewModel = kendo.observable({
selectedProductId: null,
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});
kendo.bind($("select"), viewModel);
</script>
By default the value binding for the select widgets(AutoComplete, DropDownList, ComboBox, MultiSelect) uses the selected item from the data to update the View-Model field when the initial value is null. The data-primitive-field attribute
can be used to specify that the View-Model field should be updated with the item value field instead.