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
The available layouts are:
DataFormStackLayout (default): This layout places all of the editors in a
PropertyGroupvertically ordered by the value of the
DataFormGridLayout: This layout places all of the editors in a
PropertyGroupin grid ordered by the values of the
Figure 1: This is how the editors in Stack Layout Group look in RadDataForm on Android (left) and iOS (right)
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
TKPropertyGrouptag to the Component HTML and set the
tkDataFormGroupsinline directive to it.
- Declare the
TKPropertyGrouptags and set the
tkPropertyGroupLayoutinline directive to it.
- Declare a
TKEntityPropertyfor each property of the source object as you would without groups.
- In order to specify where each editor will be placed in the
DataFormGridLayoutyou have to specify the
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
Figure 2: This is how the editors in Grid Layout Group look in RadDataForm on Android (left) and iOS (right)
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: