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.

In order to specify where each editor is placed in the DataFormGridLayout you have to specify the index and columnIndex of its 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

<df:RadDataForm source="{{ person }}" xmlns:df="nativescript-ui-dataform" >
    <df:RadDataForm.groups>
        <df:PropertyGroup collapsible="true" name="Main Info" hidden="false" >
            <df:PropertyGroup.layout>        
              <df:DataFormGridLayout />        
            </df:PropertyGroup.layout>

            <df:PropertyGroup.properties>
                <df:EntityProperty name="name" index="0" columnIndex="0">
                    <df:EntityProperty.editor>
                        <df:PropertyEditor type="Text" />
                    </df:EntityProperty.editor>
                </df:EntityProperty>
                <df:EntityProperty name="age" index="0" columnIndex="1">
                    <df:EntityProperty.editor>
                        <df:PropertyEditor type="Number" />
                    </df:EntityProperty.editor>
                </df:EntityProperty>
                <df:EntityProperty name="email" index="1" columnIndex="0">
                    <df:EntityProperty.editor>
                        <df:PropertyEditor type="Email" />
                    </df:EntityProperty.editor>
                </df:EntityProperty>
            </df:PropertyGroup.properties>
        </df:PropertyGroup>
    </df:RadDataForm.groups>
</df: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 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