How could you bind AutoCompleteInLine with the Array?

[Anjo]

Hi,

I am having some problems regarding Nativescript UI (<TKPropertyEditor tkEntityPropertyEditor type="AutoCompleteInline"></TKPropertyEditor>).

Whenever I try to input something in the said AutoCompleteInline Editor, the array that is connected with it does not update.

 

Here is the XML:

<StackLayout>
<RadDataForm [source]="booking" tkExampleTitle tkToggleNavButton>
    <TKEntityProperty tkDataFormProperty name="from" displayName="From:" index="0" autoCompleteDisplayMode="tokens" [valuesProvider]="fromProviders">
        <TKPropertyEditor tkEntityPropertyEditor type="AutoCompleteInline"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="to" displayName="To:" index="1" autoCompleteDisplayMode="plain" valuesProvider="New York, Washington, Los Angeles">
        <TKPropertyEditor tkEntityPropertyEditor type="AutoCompleteInline"></TKPropertyEditor>
    </TKEntityProperty>
</RadDataForm>
<Button class="btn btn-primary btn-active" text="Check" (tap)="check()"></Button>
</StackLayout>

 

Here is the Component:

import { Component, OnInit } from "@angular/core";
import { Booking } from "../../data-services/booking";
var data = require("../../data-services/airports.json")
@Component({
moduleId: module.id,
selector: "tk-dataform-autocomplete",
templateUrl: "dataform-autocomplete.component.html"
})
export class DataFormaAutoCompleteComponent implements OnInit {
private _booking: Booking;
private _fromProviders: Array<String> = new Array<String>();
constructor() { }
get booking() {
return this._booking;
}
get fromProviders(): Array<String> {
return this._fromProviders;
}
ngOnInit() {
this._booking = new Booking();
for (var i = 0; i < data.airports.length; i++) {
this._fromProviders.push(data.airports[i].FIELD2 + ", " + data.airports[i].FIELD5);
}
}
public check(){
alert(JSON.stringify(this._booking));
}
}

 

If I try to input something on both AutoCompleteInline editors, then I press the Check button, it does not print the updated value of the array withing the booking object. Could somebody help me on this?

 

 

Thanks!

 

[Nikolay Tsonev]

Hi Anjo,

First of all, thank you for your interest in UI for NativeScript.

Regarding the topic, if I understand you correctly, you have an issue with getting the values for the fields in the DataForm component.
To be able to do that you should setup commitMode property by using some of the available options Immediate, OnLostFocus, Manual.  More about their usage could be found here. When you setup the correct commit mode, you could access a dataForm editedObject property, which will return a JSON object with all fields names and values. An example could be found here.

In regard, your case the value for the editor of type AutoCompleteInline will not be returned properly while using the above-described way. At this time, there is no way to workaround this problem. for your convenience, I logged a new issue here and for further info and a possible fix, you could keep track on it.

Hope this helps.

Regards,
nikolay.tsonev
Telerik by Progress