RadDataForm Editors
If you followed the
getting started
section, you now know how to edit an object's properties with
RadDataForm
for NativeScript. This article will
explain how to change the editor that is used for a property,
what editors are supported by
RadDataForm
and how to use them.
Figure 1: Some of the editors supported by RadDataForm on Android (left) and iOS (right)
Usage
By default,
RadDataForm
will load a default editor depending on the type of each
property of the source object. If you need to change the type,
you can provide another editor through HTML or code-behind. This
is demonstrated in the following examples:
Example 1: Change the editor that is used for a property through HTML
<TKEntityProperty tkDataFormProperty name="type" displayName="Type" index="3" valuesProvider="2D, 3D">
<TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor"></TKPropertyEditor>
</TKEntityProperty>
Example 2: Change the editor that is used for a property through code-behind
public changeEditor() {
const property = this.myRuntimeDataFormComp.dataForm.getPropertyByName("age");
const propertyEditor = new PropertyEditor();
propertyEditor.type = DataFormEditorType.Slider;
property.editor = propertyEditor;
}
Note that the
valuesProvider
property will be taken into consideration only for editors that
support predefined list of values. These editors are
Picker
,
SegmentedEditor
,
List
and
AutoCompleteInline
. You can read more about the providers
here.
Converters
In the example in the beginning of the article the
valuesProvider
of the EntityProperty
was set to an array of
strings and the value of the property of the source object that
was edited was also of type string
. In some
scenarios you will need to save a value which differs from the
one that an editor displays. Consider the following example
where you have a class Movie
with two properties -
name
and id
. If you want to save the
value of the id
and also display the value of the
name
in an editor, you can create a converter that
will convert between the two values. Here's a sample
implementation of the aforementioned scenario:
Example 3: Use a converter to change the type of the editor value before it is saved in the source object
export class MovieConverter implements PropertyConverter {
constructor(private _movies: Array<Movie>) { }
convertFrom(id: number) {
return this._movies.filter((movie: Movie) => movie.id === id)[0].name;
}
convertTo(name: string) {
return this._movies.filter((movie: Movie) => movie.name === name)[0].id;
}
}
As you can see in your model you can have a property of type
number
which represents the id
of a
movie which gets converted to the name
of the movie
with the same id
. Similarly, when an item is
selected from the list, its name
is converted to
the id
which is the value that gets committed to
the source object. An instance of the created converter has to
be set to the
converter
property of the
EntityProperty
object.
Additional Parameters
The
Stepper
and
Slider
editors have additional properties which you can be setup
through
PropertyEditorParams
. The following example of the
Stepper
editor shows how to limit its bounds and define its step:
Example 4: Use editor params to adjust an editor
<TKPropertyEditor tkEntityPropertyEditor type="Stepper">
<TKPropertyEditorParams tKEditorParams minimum="0" maximum="100" step="2"></TKPropertyEditorParams>
</TKPropertyEditor>
Editors List
You can find the list with all available editors here.
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.
Related articles you might find useful: