Nativescript Pro UI - DataForm - telerik

Question

I'm using Telerik UI Pro components for {N} (without support) and having some problems with the DataForm.
When I pass a object to the page context, all fields using Picker editor can't select the right value.
I'll show the code I wrote:
teste-model.js
var Value = (function() {
function Value(text, value) {
this.text = text;
this.value = value;
}
return Value;
})();
var ValueModel = (function() {
function ValueModel() {}
Object.defineProperty(ValueModel.prototype, "model", {
get: function () {
if (!this._model) {
this._model = new Value("This is a text", "VALUE 1");
}
return this._model;
},
enumerable: true,
configurable: true
});
return ValueModel;
})();
exports.Value = Value;
exports.ValueModel = ValueModel;
teste.js
var ValueModel = require("./teste-model").ValueModel;
var page;
exports.onPageLoaded = function(args) {
console.log("Carregando página...");
page = args.object;
page.bindingContext = new ValueModel();
console.log(JSON.stringify(page.bindingContext));
}
teste.xml
<Page loaded="onPageLoaded"
xmlns:df="nativescript-telerik-ui-pro/dataform">
<StackLayout>
<df:RadDataForm id="myDataForm" source="{{ model }}">
<df:RadDataForm.properties>
<df:EntityProperty name="text" displayName="Text" index="0" />
<df:EntityProperty name="value" displayName="Value" index="1" valuesProvider="VALUE 0, VALUE 1, VALUE 2">
<df:EntityProperty.editor>
<df:PropertyEditor type="Picker" />
</df:EntityProperty.editor>
</df:EntityProperty>
</df:RadDataForm.properties>
</df:RadDataForm>
</StackLayout>
</Page>
The field value should show "VALUE 1" but shows "VALUE 0":
Any tips to solve this?
Update
I've made the changes Vladimir recommended but the picker property still not reflecting the object changes.
I also added a button to the page, to fill the dataform with random values.
The text property listen to the change normally but the picker property does not.
If I choose a picker value and click the button, the property is resetting to the first provider value.
The actual code is:
teste.xml
<Page loaded="onPageLoaded"
xmlns:df="nativescript-telerik-ui-pro/dataform">
<StackLayout>
<df:RadDataForm id="myDataForm" source="{{ model }}">
<df:RadDataForm.properties>
<df:EntityProperty name="text" displayName="Text" index="0" />
<df:EntityProperty name="value" displayName="Value" index="1" valuesProvider="VALUE 0, VALUE 1, VALUE 2">
<df:EntityProperty.editor>
<df:PropertyEditor type="Picker" />
</df:EntityProperty.editor>
</df:EntityProperty>
</df:RadDataForm.properties>
</df:RadDataForm>
<Button text="change" tap="changeModel" />
</StackLayout>
</Page>
teste.js
exports.onPageLoaded = function(args) {
console.log("Carregando página...");
page = args.object;
page.bindingContext = new ValueModel();
}
exports.changeModel = function(args) {
var arr = ["VALUE 0", "VALUE 1", "VALUE 2"];
page.bindingContext.set("model", new Value(
Math.random(10000, 99999).toString()
, arr[Math.floor(Math.random() * arr.length)]
)
);
console.log(JSON.stringify(page.bindingContext.model));
}
teste-model.js
var Observable = require("data/observable").Observable;
var Value = (function() {
function Value(text, value) {
this.text = text;
this.value = value;
}
return Value;
})();
var ValueModel = (function(_super) {
__extends(ValueModel, _super);
function ValueModel() {
_super.call(this);
this.model = new Value("This is a texte","VALUE 1");
}
Object.defineProperty(ValueModel.prototype, "model", {
get: function () {
return this.get("_model");
},
set: function(_model) {
this.set("_model", _model);
},
enumerable: true,
configurable: true
});
return ValueModel;
})(Observable);
exports.Value = Value;
exports.ValueModel = ValueModel;

Answer 1

It looks like you you are making runtime changes to an simple JavaScript object (the model) which is why those changes are not being reflected in the RadDataForm. When the desired behavior is to be able to change some objects properties at runtime you could use the {N} Observable located at data/observable module of the tns-core-modules. After that make the ValueModel to extend it and change the signature of the model property like this:
var observable_1 = require("data/observable");
var ValueModel = (function (_super) {
__extends(ValueModel, _super);
function ValueModel() {
_super.call(this);
this.model = new Value("This is a text", "INITIAL VALUE 0");
this.model.value = "VALUE 1";
}
Object.defineProperty(PersonViewModel.prototype, "model", {
get: function () {
return this.get("_model");
},
set: function (value) {
this.set("_model", value);
},
enumerable: true,
configurable: true
});
return PersonViewModel;
}(observable_1.Observable));
You can also take a look at the TypeScript variant in the master branch of the nativescript-telerik-ui-samples GitHub repository which was changed to illustrate this scenario.