displayName field ignored

4 posts, 1 answers
  1. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 07 Feb Link to this post

    Hi all

    For some reason I cannot get displayName within the TKEntityProperty tag to refelect in the UI. It is basically ignored??

     

    `

    <RadDataForm [source]="baseCustomer" commitMode="OnLostFocus" >

    <TKEntityProperty tkDataFormProperty name="customerName" displayName="ThisDoesntWork" index="0" >
    <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
    </TKEntityProperty>

    <TKEntityProperty tkDataFormProperty name="jobTitle" displayName="ThisDoesntWork" index="1" >
    <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
    </TKEntityProperty>

    <TKEntityProperty tkDataFormProperty name="telephoneNumber" displayName="ThisDoesntWork" index="2" >
    <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
    </TKEntityProperty>

    </RadDataForm>

    `

     

    Any ideas why this might happen?

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    222 posts

    Posted 08 Feb Link to this post

    Hello,

    If I understand you correctly, you have problems with accessing the displayName property from code behind.
    I tested this case on both iOS and Android, however, was unable to reproduce this scenario. 
    While using RadDataForm component, it is possible to get the EntityProperty while using getPropertyByName method and to access displayName property of the returned object.
    For your convinience, I am attaching sample code. The important part of the code is inside onTap method, where I am getting one of the EntityProperties and console.log its displayName

    HTML
    <GridLayout rows="auto *" columns="*">
         
    <Button row="0" text="Get displayName"  (tap)="onTap()"></Button>
     
    <RadDataForm row="1" id="dfid" [source]="ticketOrder" tkExampleTitle tkToggleNavButton>
        <TKEntityProperty tkDataFormProperty name="movie" displayName="Movie Name" index="0" [valuesProvider]="movies">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="date" displayName="Some name" index="1">
            <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="time" index="2">
            <TKPropertyEditor tkEntityPropertyEditor type="TimePicker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="type" displayName="Type" index="3" valuesProvider="2D, 3D">
            <TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="price" index="4" readOnly="true">
            <TKPropertyEditor tkEntityPropertyEditor type="Decimal"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="numberOfTickets" displayName="Number of Tickets" index="5">
            <TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactName" displayName="Contact Name" index="6">
            <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactPhone" displayName="Contact Phone" index="7">
            <TKPropertyEditor tkEntityPropertyEditor type="Phone"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactEmail" displayName="Contact Email" index="8">
            <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="agreeTerms" displayName="I Agree with Terms" index="9">
            <TKPropertyEditor tkEntityPropertyEditor type="Switch"></TKPropertyEditor>
        </TKEntityProperty>
    </RadDataForm>
     
    </GridLayout>


    TypeScript
    import { Component, OnInit } from "@angular/core";
    import {Page} from "ui/page";
    import {RadDataForm} from "nativescript-telerik-ui-pro/dataform"
     
    class TicketOrder {
        public movie: string = "Zootopia";
        public date: string = "2016-04-06";
        public time: string = "20:00";
        public type: string = "2D";
        public price: number = 9.50;
        public numberOfTickets: number = 2;
        public contactName: string = null;
        public contactPhone: string = null;
        public contactEmail: string = null;
        public agreeTerms: boolean = false;
     
        constructor() {
        }
    }
     
    @Component({
        moduleId: module.id,
        selector: "tk-dataform-editors",
        templateUrl: "dataform-editors.component.html"
    })
    export class DataFormEditorsComponent implements OnInit {
        private _ticketOrder: TicketOrder;
        private _movies: Array<String>;
     
        constructor(private page:Page) { }
     
        ngOnInit() {
            this._ticketOrder = new TicketOrder();
            this._movies = new Array<String>();
            this._movies.push("Zootopia");
            this._movies.push("Captain America");
            this._movies.push("The Jungle Book");
        }
     
        get ticketOrder() {
            return this._ticketOrder;
        }
     
        get movies() {
            return this._movies;
        }
        onTap(){
            var dataform:RadDataForm = <RadDataForm>this.page.getViewById("dfid");
            var property = dataform.getPropertyByName("date");
            console.log(property.displayName);
     
        }
    }



    It would help if you could provide some more info about the problem and sample project, which could be debugged locally.

    Regards,
    nikolay.tsonev
    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. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 08 Feb in reply to nikolay.tsonev Link to this post

    Hi Nikolay

    The problem was solved by adding DATAFORM_DIRECTIVES as I had missed it off.

    Out of interest, if anyone is trying to work out how to use DATAFORM_DIRECTIVES with multiply modules. I created a common.module.ts which is then imported into the modules that use RadDataForm

     

    DATAFORM_DIRECTIVE

     

    ```

    import {DATAFORM_DIRECTIVES} from "nativescript-telerik-ui-pro/dataform/angular";
    import {NgModule} from "@angular/core";


    @NgModule({
    declarations: [
    DATAFORM_DIRECTIVES
    ],
    imports: [

    ],
    exports: [
    DATAFORM_DIRECTIVES
    ]
    })

    export class CommonModule {

    constructor() {
    console.log("CommonModule.constructor");
    }

    }

    ```

     

  4. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    222 posts

    Posted 08 Feb Link to this post

    Hello,
    I am glad to hear that you have solved your problem and thank you for the sample code.

    Indeed, you should include  DATAFORM_DIRECTIVES directives in some common module, to be able to use it in multiple modules.
    Regards,
    nikolay.tsonev
    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.
Back to Top