RadDataForm: Group layouts

If you followed the Groups article, you now know group specific EntityProperty inside the RadDataForm. Furthermore you can change the default layout of each object in the groups.

The available layouts are:

  • DataFormStackLayout (default) - This layout places all of the EntityProperty in a PropertyGroup in vertical order one by one.
  • DataFormGridLayout - This layout places all of the EntityProperty in a PropertyGroup in grid order determined by each index and columnIndex. The next screenshots show the layout we are going to achieve with the next code snippets

Examples

Using the default layout

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

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

Using the grid layout

When you want to change the default layout of the EntityProperty in a PropertyGroup to a grid layout where those entity properties are render on multiple rows and columns you can use the DataFormGridLayout.

In order to specify where each EntityProperty is placed in the DataFormGridLayout you have to specify the index and columnIndex of each of those EntityProperty. The next example demonstrates how you can achieve a 2x2 grid layout:

<df:RadDataForm source="{{ person }}" xmlns:df="nativescript-telerik-ui-pro/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>

The end result is show in the next screenshots:

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

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.

Related articles you might find useful: