RadDataForm: Groups Overview
If you followed the getting started section, you now know how to edit an object's properties with RadDataForm
for NativeScript. If your source object contains a lot of properties, it may be useful to show them in groups and optionally allow these groups to be collapsed. This article explains how.
Figure 1: Show the editors in groups in RadDataForm on Android (left) and iOS (right)
Add groups
Adding groups to RadDataForm
and specifying which property belongs to each group is done very intuitively with the xml. Instead of adding each EntityProperty
to RadDataForm
's properties
collection, we add groups to RadDataForm
and the we add each EntityProperty
to its own group's collection of properties
. The following example demonstrates how.
Example 1: Add groups to RadDataForm
<df:RadDataForm id="myDataForm" source="{{ person }}" >
<df:RadDataForm.groups>
<df:PropertyGroup collapsible="true" name="Main Info" hidden="false" >
<df:PropertyGroup.properties>
<df:EntityProperty name="name" >
<df:EntityProperty.editor>
<df:PropertyEditor type="Text" />
</df:EntityProperty.editor>
</df:EntityProperty>
Groups Adjustments
Note the collapsible
property of the PropertyGroup
in the previous example. This allows you to specify whether the groups can be collapsed by tapping on their header. You can use the collapsed
property to control the current state of the group. If you want to hide the header, you can use PropertyGroup's titleHidden
property. To hide the whole group, you can use PropertyGroup's hidden
property. If you need to make changes to some of the properties of a PropertyGroup
, you can get it by its name through getGroupByName
method and make your changes as shown in the following example:
Example 2: Adjust group's property through code-behind
export function changeGroupLabelTextColor() {
var group = dataform.getGroupByName("Main Info");
group.titleStyle.labelTextColor = "Blue";
}
Events
RadDataForm
provides events to notify you when a group is collapsed or expanded, if the group supports collapsing. The event names are groupExpanded and groupCollapsed. Both events provide event arguments which have a property groupName
which you can use to determine the name of the group that was collapsed/expanded.
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: