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.

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

  • Add an "TKPropertyGroup" tag to the Component HTML and set the "tkDataFormGroups" inline directive to it
  • After that declare the "TKDataFormGridLayout" inside the TKPropertyGroup tag and set the "tkPropertyGroupLayout" inline directive to it
  • As usual declare the "TKEntityProperty" and all the "TKPropertyEditor" as described in the Getting Started article
  • Finnaly 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:
<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>

The end result is show in the next screenshots:

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

You can find a runnable project of the above code snippets in our Angular SDK repository here