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

[Henrique]

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!

 

 

 

[Nikolay Tsonev]

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

[Henrique]

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