This is a migrated thread and some comments may be shown as answers.

setting data-value-primitive="false" has no effect

3 Answers 1230 Views

DropDownList

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 16 Dec 2015, 03:27 PM

Hello Georgi,

Please review the sample code that demonstrates this issue. As you can see from the sample, changing a selected value in the dropdown incorrectly changes the bound field. Based on documentaiton, the bound field should be maintained as a complex object when data-value-primitive is set to false.

Thanks,

Maxim

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>

<body>

<div id="sample">

<form>

<input data-role="dropdownlist"

data-text-field="ProductName"

data-value-field="ProductID"

data-auto-bind="false"

data-value-primitive="false"

data-bind="value: product, source: products"/>

</form>

<pre id="model-state"></pre>

</div>

<script>

'use strict';

$(function(){

var

ObservableObject = kendo.data.ObservableObject,

DataSource = kendo.data.DataSource,

state = $("#model-state");

(function(objProto){

var DataSource = kendo.data.DataSource;

var stringify = kendo.stringify;

if (!objProto.prototype.stringify) {

(function () {

function replacer(key, value) {

if (value instanceof DataSource) {

return undefined;

}

return value;

};

objProto.prototype.stringify = function () {

return stringify(this, replacer, 2);

};

}());

}

}(kendo.Class));

var Model = ObservableObject.extend({

init: function(id) {

var that = this;

ObservableObject.fn.init.call(that,{

product: null,

products: new DataSource({

transport: {

read: {

dataType: "jsonp",

url: "//demos.telerik.com/kendo-ui/service/Products",

}

},

schema: {

model: {

id: "ProductID",

fields: {

ProductID: { type: "number" }

}

})

});

that.bind("get", function (e) {

var field = e.field;

if (!this[e.field]) {

this[e.field] = function (item) {

return 0;

};

}

});

that.bind("change", function (e) {

state.text(that.stringify());

});

that.products.fetch(function () {

that.set("product", this.get(id));

});

}

});

kendo.bind("#sample", new Model(1));

});

</script>

</body>

</html>

answered on 18 Dec 2015, 12:11 PM

Hello Maxim,

Thank you for the repro demo. Indeed, when the value is a primitive value, the valuePrimitive option will not force the binding to set it to an object. This is current implementation approach and we do not have plans to change it for now.

Your demo changes the objects to numbers, because the custom get function returns "0" values instead of nulls. If we start returning nulls for "product" field, then the widget works as expected:

http://dojo.telerik.com/aPIbU

Please avoid returning primitive values when you would like to use objects.

Regards,
Georgi Krustev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!