RadDataForm: Values Providers

If you followed the article about EntityProperty, you now know how to customize the editors that are used for each property of the edited object and optionally change their type. Some editors allow selecting items from a predefined list and this list is passed through the EntityProperty's valuesProvider. This article will show you how you can initialize this list. 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:

<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 the dataform. 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:

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

Array with values

You can also pass your list as a simple Array:

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:

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.

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:

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 this scenario in action?
Check our SDK examples for Angular repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: