valuePrimitive Boolean
(default: false)
Specifies the value binding behavior for the widget when the initial model value is null. If set to true
, the View-Model field will be updated with the primitive value of the selected item's field (defined in the dataValueField option).if set to false
, the View-Model field will be updated with the selected item - the entire non-primitive object.
Example - specify that the View-Model field should be updated with the selected item value
<div id="example">
<div>Change the value of the dropdowns and observe the logged value in the console.</div>
<br/>
<select id="dropdownPrimitive" data-bind="value: selectedProductId, source: products" >
</select>
<select id="dropdown" data-bind="value: selectedProduct, source: products" >
</select>
</div>
<script>
$("#dropdownPrimitive").kendoDropDownList({
valuePrimitive: true,
dataTextField: "name",
dataValueField: "id",
optionLabel: "Select product..."
});
$("#dropdown").kendoDropDownList({
valuePrimitive: false,
dataTextField: "name",
dataValueField: "id",
optionLabel: "Select product..."
});
var viewModel = kendo.observable({
selectedProductId: null,
selectedProduct: null,
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});
viewModel.bind("change", function(ev) {
//result when the second item is selected in the $("#dropdownPrimitive") DropDownList: value: {"id":2,"name":"Tea"}
//result when the second item is selected in the $("#dropdown") DropDownList: value: 2
if (ev.field === "selectedProduct") {
console.log("value: " + JSON.stringify(this.get(ev.field)));
} else if (ev.field === "selectedProductId") {
console.log("value: " + this.get(ev.field));
}
});
kendo.bind($("#example"), viewModel);
</script>