Example of using PropertyConverter

Thread is closed for posting
2 posts, 0 answers
  1. Henrique
    Henrique avatar
    12 posts
    Member since:
    Mar 2017

    Posted 08 Mar 2017 Link to this post

    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!

  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 08 Mar 2017 Link to this post

    Hello,
    Thank you for contacting us.


    You could review the app/dataform/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
    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