Use metadata with groups on Android

Thread is closed for posting
3 posts, 1 answers
  1. Vince
    Vince avatar
    3 posts
    Member since:
    Apr 2017

    Posted 01 May 2017 Link to this post

    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.    }

     

    This is working nicely on iOS, but fails to display the groups on Android.

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 02 May 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Vince
    Vince avatar
    3 posts
    Member since:
    Apr 2017

    Posted 03 May 2017 in reply to Nikolay Iliev Link to this post

    Thank you!
Back to Top