Picker: how to access the value (key) of picked item

[Marc]

Hello,

I try to work with the DataForm component of the latest nativescript-pro-ui package (3.1.4) and I have some trouble using the picker editor.

Here is my editor definition in XML:

<df:EntityProperty name="city" displayName="Your city" valuesProvider="{{ citiesProvider }}">
    <df:EntityProperty.editor>
        <df:PropertyEditor type="Picker" />
    </df:EntityProperty.editor>
</df:EntityProperty>

 

This is my ViewModel where I define the source of the DataForm (formData) and the valuesProvider for the cities-picker:

exports.vmMain = observableModule.fromObject({
    formData: {
        nickname: "",
        passwd: "",
        passwd2: "",
        city: 1
    },

    citiesProvider: [
        { key: 0, label: "keine Angabe" },
        { key: 1, label: "Dresden" },
        { key: 2, label: "London" },
        { key: 3, label: "Stockholm" },
        { key: 4, label: "Wien" }
    ],

    onPropertyCommitted: function(args) {
        alert(JSON.stringify(args.object.source));
    }
});

 

My problem:

When trying to access the key of the currently selected city using myDataForm.getPropertyByName('city').value, I only get the label of the city that is displayed in the picker. But I need to access the key of the selected item, the label only should be used for displaying. When I call JSON.stringify(args.object.source) in the propertyCommitted event, I get  { ..., city: "2", ... } as a result and that is correct. But how can I access this key?

 

Best regards

[Nick Iliev]

Hi Marc,

Based on the logic provided in your RadDataForm you are receiving the value of the key on the propertyCommitted event.
Not exactly sure what do you mean by "key" but in your result, you are receiving source in the form of {city: "2"} which is pretty much the value of the key property by default and not the value of the label property. If you need to access the value of your label thought the source or editedObject arguments, then we can do the following:

onPropertyCommitted: function(args) {
    console.log("onPropertyCommitted");
    console.log(JSON.stringify(args.object.editedObject));
    console.log(JSON.stringify(args.object.source)); // e.g {city: "2"}

    var key = args.object.source.city; // e.g. 2
    console.log(this.citiesProvider[key].label); // e.g. London
}

However, if you need to change the value of the type of the editor's value before saving it to the source object, you can do that by using converters.
Documentation article and example on how to implement and use converters can be found here (the example is showing a scenario using id and name similar to your case).

Regards,
Nikolay Iliev
Progress Telerik

[Marc]

Hi Nikolay,

thanks for your reply.

Yes, I mean the key property and I just don't understand why I do not get this key value when I call myDataForm.getPropertyByName('city').value. Instead I get the label of the city (e.g. London)....

But page.bindingContext.formData.city returns the value, e.g. 2.

 

Best regards

[Nick Iliev]

Hello Marc,

The described behavior is expected as using getPropertyByName method will return the entity and not the source object.

API Reference description of getPropertyByName:
Gets the EntityProperty object for the property of the object with the given name.
Returns EntityProperty

You should use the source property to receive your source object.
From this point, if you want to modify the source output we can use converters as discussed earlier.

Regards,
Nikolay Iliev
Progress Telerik

[Marc]

Hi Nikolay,

sorry, so that was just a misunderstanding from my side. Thanks for clarifying this.

 

[Kiril]

Hi Nikolay,

i'm having the same issue as Marc and your suggestion of using the source does not apply since it's returning the actual saved data and not the options from the values provider.
As for Marc i got a values provider for a picker editor as follows:

```

this.provinces = new Map([

["229", "prov1"],
["230", "prov2"],
["231", "prov3"],
["232", "prov4"],
["233", "prov5"]
]);

```
after a user makes a selection i'd like to get the key for the selected item (ex.  "229") in one of the form's events to do some additional processing.  However, args.object.entityProperty.value returns the label (ex. "prov1") which is incorrect since we need the id to be saved in the db not the label.  Interestingly it does work in the other direction.  If is save id (229) in the source and load it in the form the correct label is shown in the editor.
I've spent a lot of time trying to figure out how to get the key from the selection but can't seem to crack it.  I assumed that since the form component already supports the key,label format for the value providers it would automatically use the keys without the need for custom converters.  I hope that's the case.
What's the best way to do this?
Thanks in advance.

[Nick Iliev]

Hello Kiril,

This example demonstrates how to use the source property to get the selected option from the value provider.
Notice that in the view model we are defining this.cities as our RadDataFrom source.  At the same time, the example demonstrates
how to work with several different value providers and returning the wanted option for each different value provider.
For more control over the editors values, you can still use converters as demonstrated in this documentation article.

Please notice that you can log how-to related questions in the community channels like nativescript-ui-feeback repository, SO or nativescript community slack where your question w8ill meet the support of the large NativeScritp community and will receive prompt answers and suggestions.

Regards,
Nikolay Iliev
Progress Telerik

[Kiril]

Thanks Nikolay.  Looking at your suggestions.  I've posted to the slack channel but got no responses so far.  Then found this thread which was describing the exact issue.  Will respond here with the result. 

 

[Kiril]

I've looked through the example you referred to but it still doesn't address the main issue.  I'm using propertyValidate event which means that the entered data has not been persisted into the source object yet, I'm still trying to validate it.  And unlike in your example i have a separate providers file (providers.ts) that's responsible for populating all of the value providers for each picker editor since some of them come from the database.
What is really needed is the ability to get the key for the value that was selected in the Picker editor from the values provider array before its actually committed.

   

[Nick Iliev]

Hi Kiril,

Using the source argument (in the propertyCommited event will indeed return the value (not the key). Having the value, however, should be enough to resolve the key in your value providers array. For example, let's assume we are working on this demo which is using this view model.

onPropertyCommitted(args) {

    this.set("sourceText", args.object.source.toString());

    console.log("args.object.source is: " + args.object.source); // e.g. [city1: Sydney , city2: Sydney, city3: 6985, city4: 6985, city5: 5213[
    console.log("args.propertyName: " + args.propertyName) // e.g. city5
    console.log("args.object.source[args.propertyName] is: " + args.object.source[args.propertyName]);// e.g. 5213

    // use args.object.source[args.propertyName] to find the key from the value in this.cityProvider5.items array
}

The above can be achieved in the propertyValidate or propertyValidated events which will both be fired before propertyCommited event

And from there using a function to search for the key or Underscore.js like shown here,

Regards,
Nikolay Iliev
Progress Telerik

[Kiril]

Thanks Nikolay.  I've arrived at the same conclusion and started writing the function to do the matching of values to retrieve the key.  
On a general note this functionality seems rather half-baked especially since the value providers already accept the {key: x, label: y} format and that the substitution of the value displayed in the editor for the key that's saved in the source object already works out of the box.  It sure seems that it should work going from the label selected in the editor to the key saved into the source object as well without having to right extra code.  I'll  post it to github as a feature suggestion.

[Nikolay Tsonev]

Hello Kiril,


I would like to let you know that we are closing UI for NativeScript Forum section in Telerik Admin in favor of NativeScript forum. 
Since UI for NativeScript is free for using we consider that the best place for discussions and for questions will be the official NativeScript forum.

Thank you in advance for cooperation.

Regards,
nikolay.tsonev
Progress Telerik