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
• Stack Layout
• Grid Layout
• References

Overview

The available layouts are:

• DataFormStackLayout (default): This layout places all of the editors in a PropertyGroup vertically ordered by the value of the index of their EntityProperty.
• DataFormGridLayout: This layout places all of the editors in a PropertyGroup in grid ordered by the values of the index and columnIndex of their EntityProperty.

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)

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)

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.

• Layouts Example

Related articles you might find useful:

• Groups Overview
• Styling