RadDataForm Values Providers

If you followed the getting started section, you now know how to edit an object's properties with RadDataForm for NativeScript. In the editors overview article it was mentioned that some editors need a list with predefined values that they accept. This article will demonstrate the options to define this list through the EntityProperty's valuesProvider. First, let's bind the valuesProvider of one of our properties to a property of our binding context and then we'll review the different options for setting the value of that property:

Example 1: Bind the valueProvider to a property from our binding context

<TKEntityProperty tkDataFormProperty name="city1" displayName="Selected City 1" index="0" [valuesProvider]="cityProvider1">
    <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
</TKEntityProperty>

Here are the options to provide the list of values:

String with Comma-Separated Values
Array with Values
Map with Values and the Labels for Them
Array with Key-Label Pairs
Array with Custom Objects

The first two options should be used when the value that is visible to the user is the same as the value that will be stored in the object edited by RadDataForm. If you want to differentiate between them and for example store an id that responds to the value that the user selected, you should use the other options.

String with Comma-Separated Values

The most basic way to give the list of values is to create a string that contains all of them separated by a comma.

Example 2: Value Provider from a simple string

this._cityProvider1 = "Shanghai, Lagos, Moscow, São Paulo, Sydney";

Array with Values

You can also pass your list as a simple Array.

Example 3: Value Provider from a simple array of values

this._cityProvider2 = ["Shanghai", "Lagos", "Moscow", "São Paulo", "Sydney"];

Map with Values and the Labels for Them

When you need to differentiate between the value that is shown with the editor and the actual value that is stored in your source object, one of the options to create a Map with the correct relations.

Example 4: Value Provider from a Map

this._cityProvider3 = new Map([
    [1121, "Shanghai"],
    [3651, "Lagos"],
    [5213, "Moscow"],
    [6214, "São Paulo"],
    [6985, "Sydney"]
]);

Array with Key-Label Pairs

Another option is to pass an Array with items that have key and label properties. Then the key will be used to be stored in your source object and the label will be used to be presented with the editor.

Example 5: Value Provider from a key-label pairs

this._cityProvider4 = [
    { key: 1121, label: "Shanghai" },
    { key: 3651, label: "Lagos" },
    { key: 5213, label: "Moscow" },
    { key: 6214, label: "São Paulo" },
    { key: 6985, label: "Sydney" }
];

Array with Custom Objects

If you want to use an Array with your custom objects and they don't have key and label properties, you can pass your array as items of the valuesProvider and also set the names of the properties that will be used as key and label.

Example 6: Value Provider from an array of custom objects

this._cityProvider5 = {
    key: "id",
    label: "name",
    items: [
        { id: 1121, name: "Shanghai" },
        { id: 3651, name: "Lagos" },
        { id: 5213, name: "Moscow" },
        { id: 6214, name: "São Paulo" },
        { id: 6985, name: "Sydney" }
    ]
};

References

Want to see these scenarios in action? Check our SDK Examples for Angular repo on GitHub. You will find these and many other practical examples with NativeScript UI.

NativeScript Angular