How could you bind AutoCompleteInLine with the Array?

Thread is closed for posting
2 posts, 0 answers
  1. Anjo
    Anjo avatar
    1 posts
    Member since:
    Apr 2017

    Posted 09 Apr 2017 Link to this post

    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!

     

  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 11 Apr 2017 Link to this post

    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
    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