RadDataForm: Editors

If you followed the getting started article, you now know how to edit an object's properties with DataForm for NativeScript. This article will explain how to change the editor that is used for a property and what are the editors supported by RadDataForm and how to use them.

NativeScriptUI-DataForm-Editors-Android NativeScriptUI-DataForm-Editors-iOS

Editor usage

By default RadDataForm will load a default editor depending on the type of each property. If you need to change the type, you can provide another editor through the HTML. Here's an example:

<TKEntityProperty tkDataFormProperty name="type" displayName="Type" index="3" valuesProvider="2D, 3D">
    <TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor"></TKPropertyEditor>

You can also change the editor through code:

public changeEditor() {
    var property = this.myRuntimeDataFormComp.dataForm.getPropertyByName("age");
    var propertyEditor = new PropertyEditor();
    propertyEditor.type = "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 and List.

Editors list

The image in the beginning shows some of the editors of RadDataForm, here's the full list:

  • Text - simple text input
  • MultilineText - text input, which supports more than one line
  • Email - again for text input, with email optimized keyboard
  • Password - masks the entered text
  • Phone - again for text input, with phone optimized keyboard
  • Number - for input of numbers from the keyboard
  • Decimal - for input of numbers from the keyboard, supports decimal values
  • Switch - for boolean values
  • Stepper - for choosing a number by tapping on buttons to increase or decrease it
  • Slider - for choosing a number by sliding between the minimum and maximum values
  • Picker - for picking a value from a predefined list (dropdown)
  • SegmentedEditor - for picking a value from a predefined list (horizontal list)
  • List - for picking a value from a predefined list (vertical list)
  • DatePicker - for picking a date from a calendar
  • TimePicker - for picking a time from a clock
  • AutoCompleteInline - for picking single or multiple items from a suggestion list

Using the 'AutoCompleteInline' editor

The 'autoCompleteDisplayMode'

The AutoCompleteInline editor is a bit more complex then the other built-in editors because it allows for a single editor to handle both single and multiple 'selection' of the EntityProperty property. This means that you can either use this editor for properties of string type or for properties of string[] arrays. This feature is controlled via the autoCompleteDisplayMode property which can be set to AutoCompleteDisplayMode.

How to set the 'suggestions' source

In order for the AutoCompleteInline editor to be able to populate its suggestion box an outside source needs to be provided ot the editor. This is done via the valuesProvider property as with many other 'picker' type editors. The next code snippet shows how you can setup the AutoCompleteInline in the XML of your NativeScript application, the 'data context' of the {N} page has two properties booking and fromProviders, the booking is the object used as source of the RadDataForm itself and the fromProviders is a simple Array<String> contains the 'suggestions' that will be used by the AutoCompleteInline editor. You can set the valuesProvider both statically via XML or via a binding.

<RadDataForm [source]="booking" tkExampleTitle tkToggleNavButton>
    <TKEntityProperty tkDataFormProperty name="from" displayName="From:" index="0" autoCompleteDisplayMode="tokens" [valuesProvider]="fromProviders">
        <TKPropertyEditor tkEntityPropertyEditor type="AutoCompleteInline"></TKPropertyEditor>

    <TKEntityProperty tkDataFormProperty name="to" displayName="To:" index="1" autoCompleteDisplayMode="plain" valuesProvider="New York, Washington, Los Angeles">
        <TKPropertyEditor tkEntityPropertyEditor type="AutoCompleteInline"></TKPropertyEditor>


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: