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

5 posts, 1 answers
  1. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 26 Oct Link to this post

    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

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    324 posts

    Posted 26 Oct Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 27 Oct in reply to Nikolay Iliev Link to this post

    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

  4. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    324 posts

    Posted 27 Oct Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 27 Oct in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

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

     

Back to Top