NativeScript Angular

RadDataForm Group Layouts

If you followed the getting started section, you now know how to edit an object's properties with RadDataForm for NativeScript. The Groups Overview article demonstrated how to show the editors in groups. This article will show you how to change the layout of each group in the groups.

Overview

The available layouts are:

Stack Layout

This is the default layout. If you declare each PropertyGroup in RadDataForm without setting its layout the default DataFormStackLayout will be used and RadDataForm will look like this:

Figure 1: This is how the editors in Stack Layout Group look in RadDataForm on Android (left) and iOS (right)

NativeScriptUI-DataForm-Stack-Layout-Android NativeScriptUI-DataForm-Stack-Layout-iOS

Grid Layout

When you want to show more than one editor on one row, you can change the layout of a PropertyGroup to a DataFormGridLayout.

First we need to declare the RadDataForm and each of its TKPropertyGroup as described in the Groups Overview article. We need to do the following:

  • Add an TKPropertyGroup tag to the Component HTML and set the tkDataFormGroups inline directive to it.
  • Declare the TKDataFormGridLayout inside the TKPropertyGroup tags and set the tkPropertyGroupLayout inline directive to it.
  • Declare a TKEntityProperty for each property of the source object as you would without groups.
  • In order to specify where each editor will be placed in the DataFormGridLayout you have to specify the index and columnIndex of each EntityProperty. The next example demonstrates how you can achieve a Grid Layout with 2 rows and 2 columns:

Example 1: Change the layout of a group to Grid Layout

<RadDataForm tkExampleTitle tkToggleNavButton [source]="person" row="1">
    <TKPropertyGroup tkDataFormGroups collapsible="true" name="Main Info" hidden="false">
        <TKDataFormGridLayout tkPropertyGroupLayout></TKDataFormGridLayout>

        <TKEntityProperty tkPropertyGroupProperties name="name" index="0" columnIndex="0">
            <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkPropertyGroupProperties name="age" index="0" columnIndex="1">
            <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkPropertyGroupProperties name="email" index="1" columnIndex="0">
            <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
        </TKEntityProperty>
    </TKPropertyGroup>
</RadDataForm>

Figure 2: This is how the editors in Grid Layout Group look in RadDataForm on Android (left) and iOS (right)

NativeScriptUI-DataForm-Stack-Layout-Android NativeScriptUI-DataForm-Stack-Layout-iOS

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: