RadDataForm: Groups

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

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

Adding groups

Adding groups to the data form and specifying which property belongs to each group is done very intuitively with the HTML. Instead of adding properties to the data form directly, we add groups to the data form and properties to the groups, Here's how:

<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>
export class Person {
    public name: string;
    public age: number;
    public email: string;
    public city: string;
    public street: string;
    public streetNumber: number;

    constructor(name: string, age: number, email: string, city: string, street: string, streetNumber: number) {
        this.name = name;
        this.age = age;
        this.email = email;
        this.city = city;
        this.street = street;
        this.streetNumber = streetNumber;
    }
}

Note the collapsible property of the PropertyGroup. This allows you to specify whether the groups can be collapsed by tapping on their header. If you need to make changes to some of the properties of the PropertyGroup, you can use the getGroupByName 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-telerik-ui-pro/dataform/angular mobule:
<RadDataForm #myRuntimeDataFormComp [source]="person" row="1">
@ViewChild('myRuntimeDataFormComp') myRuntimeDataFormComp: dataformAngularModule.RadDataFormComponent;
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 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: