Is it possible to bind to an array or object element?

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

    Posted 08 Mar 2017 Link to this post

    Is it possible to reference an array or object from the view?

    For example, on the example provided with the Person class, let's say I have one more property, which is an array (or object): 

    name: string;
    age: number;
    settings: MySettingsObject; 

    The view will display 'settings' as a json format. Is there a way to assign to one of the members of the object? Like:

    <df:EntityProperty name="setting['aSettingProperty']" displayName="Setting Property"  />

    Or will only work with primitive types, like string, number, boolean...

     

    Thank you!

     

     

     

  2. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 08 Mar 2017 Link to this post

    Hi,

    I am not sure that I understand you correctly, however, if you are trying to display Array of custom objects in EntityProperty, you could review the below-attached example.
    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() {
        }
    }

    In the sample, we are displaying an array of Movies names. The array contains Objects from custom types and we create a secondary array with its getter and setters, where we will save only the data, which we would like to show in the View.

    It would also help if you could provide some more info about your case and what you are trying to achieve.
    Hope this helps.
    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. Henrique
    Henrique avatar
    12 posts
    Member since:
    Mar 2017

    Posted 08 Mar 2017 in reply to Nikolay Tsonev Link to this post

    Nikolay, thank you very much for the responses, I appreciate your help!
Back to Top