[Solved] displayName field ignored

[Johnny]

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?

[Nikolay Tsonev]

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  method and to access 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

[Johnny]

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");
}

}

```

 

[Nikolay Tsonev]

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