RadDataForm Editors List

If you followed the getting started section, you now know how to edit an object's properties with RadDataForm for NativeScript. The editors overview page outlined the main features of the editors in RadDataForm. This article will demonstrate the supported editors and show you how to use them.

• Complete List

• Editors by Usage

  • Simple Text
  • Numeric
  • True or False
  • Date and Time
  • Input from Predefined Lists
  • Input with AutoComplete Suggestions
  • View Only

• Custom Editors

• References

Complete List

Here's the full list of the editors supported in RadDataForm:

• 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 (drop-down list).
• 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.
• Label: For simply displaying the property value inside a non-editable label.

Editors by Usage

Here's more about each of the supported editors based on their common usage:

Simple Text

The following editors can be used for properties of type string:

• Text: Provides text input with the default keyboard. It is default for properties of type string.

Figure 1: Text editor on Android (left) and iOS (right)

• Password: Masks the entered text.

Figure 2: Password editor on Android (left) and iOS (right)

• Phone: Uses phone optimized keyboard.

Figure 3: Phone editor on Android (left) and iOS (right)

• Email: Uses email optimized keyboard.

Figure 4: Email editor on Android (left) and iOS (right)

• MultilineText: Supports more than one line.

Figure 5: MultilineText editor on Android (left) and iOS (right)

Numeric

The following editors can be used for properties of type number:

• Number: For input of numbers from the keyboard. It is default for number properties on Android.

Figure 6: Number editor on Android (left) and iOS (right)

• Decimal: For input of numbers from the keyboard, supports decimal values. It is default for floating-point number properties on Android.

Figure 7: Decimal editor on Android (left) and iOS (right)

• Stepper: For choosing a number by tapping on buttons to increase or decrease it. It is default for number properties on iOS.

Figure 8: Stepper editor on Android (left) and iOS (right)

• Slider: For choosing a number by sliding between the minimum and maximum values. It is default for floating-point number properties on iOS.

Figure 9: Slider editor on Android (left) and iOS (right)

True or False

• Switch: Uses a switch to get true/false input. It is default for boolean properties on iOS.

Figure 10: Switch editor on Android (left) and iOS (right)

Note that on Android the default editor for boolean properties is CheckBox which is not supported on iOS.

Date and Time

The DatePicker and TimePicker editors can be used to pick a date or time. They support values of type Date and values of type string in the following formats: yyyy-MM-dd for DatePicker and HH:mm for TimePicker. The value that is committed when edited with these editors will be in the same format as the initial value of the edited property. If the initial value is null or is of type Date, then the committed value will be of type Date. If the initial value is ”” (empty string or string in the supported formats), the committed value will be string in the supported formats.

• DatePicker: For picking a date from a calendar.

Figure 11: DatePicker editor on Android (left) and iOS (right)

• TimePicker: For picking a time from a clock.

Figure 12: TimePicker editor on Android (left) and iOS (right)

Input from Predefined Lists

The following editors can be used for properties of any type but they need to have their acceptable values defined through a value provider. Here's an article with more information about the value providers.

• Picker: For picking a value from a drop-down list.

Figure 13: Picker editor on Android (left) and iOS (right)

• SegmentedEditor: For picking a value from a horizontal list.

Figure 14: SegmentedEditor editor on Android (left) and iOS (right)

• List: For picking a value from a vertical list.

Figure 15: List editor on Android (left) and iOS (right)

Input with AutoComplete Suggestions

• AutoCompleteInline: For text input with option to choose single or multiple items from a suggestions list.

Figure 16: AutoCompleteInline editor in Tokens mode on Android (left) and iOS (right)

This editor also uses a predefined list with values, but they are not the only acceptable values, but rather they are suggestions that are displayed when the user starts typing for the keyboard. There are two modes: Plain and Tokens. The desired mode should be set to the autoCompleteDisplayMode property of the EntityProperty. The Plain mode can be used for string properties, while the Tokens mode can be used for properties of type string[]. The next code snippet shows how you can setup the AutoCompleteInline editor. The source object is of type Booking and has two properties: from and to. The from property is of type Array<String> and we use the AutoCompleteInline editor with Tokens display mode, which allows us to select multiple items from our suggestions. The to property is of type string and we use the AutoCompleteInline editor with Plain display mode which allows us to type a simple text.

Example 1: Use the AutoCompletInline editor in Plain and in Token modes

<GridLayout rows="auto, *">
    <Button text="check values" tap="checkValues"/>
    <df:RadDataForm id="dataform" row="1" source="{{ booking }}" propertyCommitted="onPropertyCommitted">
        <df:RadDataForm.properties>
            <df:EntityProperty name="from" displayName="From:" index="0" autoCompleteDisplayMode="Tokens" valuesProvider="{{ fromProviders }}">
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="AutoCompleteInline" />
                </df:EntityProperty.editor>
            </df:EntityProperty>

            <df:EntityProperty name="to" displayName="To:" index="1" autoCompleteDisplayMode="Plain" valuesProvider="New York, Washington, Los Angeles">
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="AutoCompleteInline" />
                </df:EntityProperty.editor>
            </df:EntityProperty>
        </df:RadDataForm.properties>
    </df:RadDataForm>
</GridLayout>

Figure 17: AutoCompleteInline editor in Plain mode on Android (left) and iOS (right)

View Only

• Label: For simply displaying the property value inside a non-editable label.

Figure 18: Label editor on Android (left) and iOS (right)

Custom Editors

If an editor that you would like to use is not included in the list with predefined editors, you can provide your own native view that will be used with the existing editor logic. You can read more here.

References

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

• Editors Common Example
• Editors AutoComplete Example
• Editors Labels Example

Related articles you might find useful:

• Custom Editors
• Value Providers