Example of using PropertyConverter

[Henrique]

Is there an example code on how to use the property converter? 

I need to be able to change the data coming from the model to display in the view. 

 

Thank you!

[Nikolay Tsonev]

Hello,
Thank you for contacting us.


You could review the app//editors example here, where has been shown an easy way, how to use a converter for DataForm EntityProperty.
For further help, you could review the below-attached sample code.

XML

<Page xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:df="nativescript-telerik-ui-pro/dataform" xmlns="http://www.nativescript.org/tns.xsd">
    <df:RadDataForm id="myDataForm" source="{{ ticketOrder }}">
        <df:RadDataForm.properties>
            <df:EntityProperty name="movie" displayName="Movie Name" index="0" converter="{{ $value }}" valuesProvider="{{ movieNames }}">
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="Picker" />
                </df:EntityProperty.editor>
            </df:EntityProperty>
            <df:EntityProperty name="date" index="1" >
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="DatePicker" />
                </df:EntityProperty.editor>
            </df:EntityProperty>
        </df:RadDataForm.properties>
    </df:RadDataForm>
</Page>

TypeScript

import dataFormModule = require("nativescript-telerik-ui-pro/dataform");
export function onPageLoaded(args) {
    var page = args.object;
    page.bindingContext = new TicketViewModel();
}

export class TicketViewModel implements dataFormModule.PropertyConverter {

    private _ticketOrder: TicketOrder;
    private _movies: Array<Movie>;
    private _movieNames: Array<String>;

    constructor() {
    }

    get ticketOrder() {
        if (!this._ticketOrder) {
            this._ticketOrder = new TicketOrder();
        }
        return this._ticketOrder;
    }

    get movies() {
        if (!this._movies) {
            this._movies = new Array<Movie>();
            this._movies.push(new Movie(123, "Zootopia"));
            this._movies.push(new Movie(217, "Captain America"));
            this._movies.push(new Movie(324, "The Jungle Book"));
        }
        return this._movies;
    }

    get movieNames() {
        if (!this._movieNames) {
            this._movieNames = this.movies.map((value: Movie) => value.name);
        }
        return this._movieNames;
    }
    convertFrom(id: number) {
        return this.movies.filter((movie: Movie) => movie.id == id)[0].name;
    }

    convertTo(name: string) {
        return this.movies.filter((movie: Movie) => movie.name == name)[0].id;
    }
}

export class Movie {
    public id: number;
    public name: string;

    constructor(id: number, name: string) {
        this.id = id;
        this.name = name;
    }
}
export class TicketOrder {
    public movie: number = 123;
    public date: string = "2016-04-06";


    constructor() {
    }
}

Let me know, whether this helps or if I could assist you further.
Regards,
nikolay.tsonev
Telerik by Progress