Use metadata with groups on Android

[Vince]

I really like using metadata to keep my XML and TS files clean. However, when I use metadata with groups on Android, it does not render the groups. Rather, it renders all the fields without any groupings. Here is a portion of my code to show what occurs:

XML

01.<RadDataForm row="0" [source]="customer" (loaded)="onFormLoaded($event)">
02.
03.        <TKPropertyGroup tkDataFormGroups collapsible="true" name="Main Info" hidden="false">
04.            <TKGroupTitleStyle tkPropertyGroupTitleStyle labelTextSize="18" labelFontStyle="Bold"
05.                               fillColor="#E0E0E0"></TKGroupTitleStyle>
06.
07.            <TKEntityProperty tkPropertyGroupProperties name="salutation"></TKEntityProperty>
08.            <TKEntityProperty tkPropertyGroupProperties name="firstName"></TKEntityProperty>
09.            <TKEntityProperty tkPropertyGroupProperties name="lastName"></TKEntityProperty>
10.            <TKEntityProperty tkPropertyGroupProperties name="companyName"></TKEntityProperty>
11.        </TKPropertyGroup>
12.
13.</RadDataForm>

 

Metadata

01.

 export let customerMetadata = {

02.    isReadOnly: false,

03.    commitMode: 'immediate',

04.    validationMode: 'immediate',

05.    propertyAnnotations:

06.    [

07.        {

08.            name: 'salutation',

09.            displayName: 'Salutation',

10.            hintText: 'Salutation',

11.            editor: 'Picker',

12.            valuesProvider: ['Mr.', 'Ms.', 'Mrs.', 'Dr.', 'Rev.', 'Hon.', 'Other']

13.        },

14.        {

15.            name: 'firstName',

16.            displayName: 'First Name',

17.            hintText: 'First Name',

18.            editor: 'Text'

19.        },

20.        {

21.            name: 'lastName',

22.            displayName: 'Last Name',

23.            hintText: 'Last Name',

24.            editor: 'Text'

25.        },

26.        {

27.            name: 'companyName',

28.            displayName: 'Company Name',

29.            hintText: 'Company Name',

30.            editor: 'Text'

31.        },

32.    ]

33.}

 

Source

01.onFormLoaded(args) {
02.        const radDataForm = <RadDataForm>args.object;
03.        radDataForm.source = {
04.            salutation: this.customer.salutation,
05.            firstName: this.customer.firstName,
06.            lastName: this.customer.lastName,
07.            companyName: this.customer.companyName,
08.        };
09.        radDataForm.metadata = this.metadata;
10.        radDataForm.reload();
11.    }

[Nick Iliev]

Hello Vince Cooley,

To creating grouping via metadata, we should provide the group name in the metadata.
For example here is how your metadata should look to add all properties in the group called "Main Info"

export let customerMetadata = {
    isReadOnly: false,
    commitMode: 'immediate',
    validationMode: 'immediate',
    propertyAnnotations:
    [
        {
            name: 'salutation',
            displayName: 'Salutation',
            hintText: 'Salutation',
            editor: 'Picker',
            valuesProvider: ['Mr.', 'Ms.', 'Mrs.', 'Dr.', 'Rev.', 'Hon.', 'Other'],
            group: "Main Info"
        },
        {
            name: 'firstName',
            displayName: 'First Name',
            hintText: 'First Name',
            editor: 'Text',
            group: "Main Info"
        },
        {
            name: 'lastName',
            displayName: 'Last Name',
            hintText: 'Last Name',
            editor: 'Text',
            group: "Main Info"
        },
        {
            name: 'companyName',
            displayName: 'Company Name',
            hintText: 'Company Name',
            editor: 'Text',
            group: "Main Info"
        },
    ]
}

With this small modification, your code will render the group in Android as well.


Regards,
Nikolay Iliev
Telerik by Progress

[Vince]

Thank you!