RadDataForm: Groups Overview

If you followed the getting started section, you now know how to edit an object's properties with RadDataForm for NativeScript. If your source object contains a lot of properties, it may be useful to show them in groups and optionally allow these groups to be collapsed. This article explains how.

Figure 1: Show the editors in groups in RadDataForm on Android (left) and iOS (right)

NativeScriptUI-DataForm-Groups-Android NativeScriptUI-DataForm-Groups-iOS

Add groups

Adding groups to RadDataForm and specifying which property belongs to each group is done very intuitively with the HTML. Instead of adding each TKEntityProperty to RadDataForm directly with the tkDataFormProperty directive, we add groups to RadDataForm and the we add each EntityProperty to its own group with the tkPropertyGroupProperties. The following example demonstrates how.

Example 1: Add groups to RadDataForm

<TKPropertyGroup tkDataFormGroups collapsible="true" name="Main Info" hidden="false">
    <TKEntityProperty tkPropertyGroupProperties name="name">
        <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkPropertyGroupProperties name="age">
        <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkPropertyGroupProperties name="email">
        <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
    </TKEntityProperty>
</TKPropertyGroup>

Groups Adjustments

Note the collapsible property of the PropertyGroup in the previous example. This allows you to specify whether the groups can be collapsed by tapping on their header. You can use the collapsed property to control the current state of the group. If you want to hide the header, you can use PropertyGroup's titleHidden property. To hide the whole group, you can use PropertyGroup's hidden property. If you need to make changes to some of the properties of a PropertyGroup, you can get it by its name through getGroupByName method and make your changes:

  • First we will need to pass the RadDataForm instance to the Angular @Component. We can easily do that via the @ViewChild mechanism, the dataformAngularModule is the nativescript-pro-ui/dataform/angular mobule:

Example 2: Access the RadDataFormComponent

<RadDataForm #myRuntimeDataFormComp [source]="person" row="1">
@ViewChild('myRuntimeDataFormComp') myRuntimeDataFormComp: dataformAngularModule.RadDataFormComponent;

Example 3: Adjust group's property through code

public changeGroupLabelTextColor() {
    var group = this.myRuntimeDataFormComp.dataForm.getGroupByName("Main Info");
    group.titleStyle.labelTextColor = "Blue";
}

Events

RadDataForm provides events to notify you when a group is collapsed or expanded, if the group supports collapsing. The event names are groupExpanded and groupCollapsed. Both events provide event arguments which have a property groupName which you can use to determine the name of the group that was collapsed/expanded.

References

Want to see these scenarios 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: