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:
-
DataFormStackLayout (default): This layout
places all of the editors in a
PropertyGroup
vertically ordered by the value of theindex
of theirEntityProperty
. -
DataFormGridLayout: This layout places all of
the editors in a
PropertyGroup
in grid ordered by the values of theindex
andcolumnIndex
of theirEntityProperty
.
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 thetkDataFormGroups
inline directive to it. -
Declare the
TKDataFormGridLayout
inside theTKPropertyGroup
tags and set thetkPropertyGroupLayout
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 theindex
andcolumnIndex
of eachEntityProperty
. 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.
Related articles you might find useful: