Add tokens Programmatically to AutoCompleteTextView in Angular

[Andrés]

Hello

I am using the AutoCompleteTextView with Angular and want to add some tokens programmatically without the user having to interact with the AutoComplete, I tried it with the following code

this is my HTML file:

<StackLayout>
    <RadAutoCompleteTextView #autocmp [items]="dataItems" suggestMode="Suggest"
             displayMode="Tokens"
            (suggestionViewBecameVisible)="onSuggestionViewBecameVisible($event)"
            (didAutoComplete)="onDidAutoComplete($event)"
            (tokenAdded)="onTokenAdded($event)" (tokenRemoved)="onTokenRemoved($event)"
            (tokenSelected)="onTokenSelected($event)"
            (tokenDeselected)="onTokenDeselected($event)">
        <SuggestionView tkAutoCompleteSuggestionView>
            <ng-template tkSuggestionItemTemplate let-item="item">
                <StackLayout orientation="vertical" padding="10">
                    <Label [text]="item.text"></Label>
                </StackLayout>
            </ng-template>
        </SuggestionView>
    </RadAutoCompleteTextView>
</StackLayout>

and this is my .ts file:

import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-telerik-ui-pro/autocomplete";
import { RadAutoCompleteTextViewComponent } from "nativescript-telerik-ui-pro/autocomplete/angular";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit, AfterViewInit {

    private _items: ObservableArray<TokenModel>;
    private countries = ["Australia", "Albania", "Austria", "Argentina", "Maldives", "Bulgaria", "Belgium", "Cyprus", "Italy", "Japan",
        "Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland",
        "Latvia", "Luxembourg", "Macedonia", "Moldova", "Monaco", "Netherlands", "Norway",
        "Poland", "Romania", "Russia", "Sweden", "Slovenia", "Slovakia", "Turkey", "Ukraine",
        "Vatican City", "Chad", "China", "Chile"];

    constructor() {
    }

    @ViewChild("autocmp") autocmp: RadAutoCompleteTextViewComponent;

    public ngOnInit()
    {
        this.initDataItems();
    }

    public ngAfterViewInit()
    {
        let tokenArray = [];
        let autocomplete = this.autocmp.autoCompleteTextView;

        this._items.forEach(token => {
            if(token.text === "Australia" || token.text === "Moldova")
            {
                tokenArray.push(token)
            }
        });
        //this line generates an error, but if removed there is no error
        tokenArray.forEach(token => {autocomplete.addToken(token);});
    }

    get dataItems(): ObservableArray<TokenModel> {
        return this._items;
    }

    private initDataItems() {
        this._items = new ObservableArray<TokenModel>();

        for (var i = 0; i < this.countries.length; i++) {
            this._items.push(new TokenModel(this.countries[i], undefined));
        }
    }

public onTokenAdded(args) {
    console.info("Added Token: " + args.token.text);
}

public onTokenRemoved(args) {
    console.info("Removed Token: " + args.token.text);
}

public onTokenSelected(args) {
    console.info("Selected Token: " + args.token.text);
}

public onTokenDeselected(args) {
    console.info("Deselected Token: " + args.token.text);
}

public onDidAutoComplete(args) {
    console.info("DidAutoComplete with text: " + args.text);
}

public onSuggestionViewBecameVisible(args) {
    console.info("Suggestion View Became Visible");
}
}

when I try to run this I get the following error:

JS: ERROR Error: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.Resources android.content.Context.getResources()' on a null object reference
JS:     android.view.ViewConfiguration.get(ViewConfiguration.java:365)
JS:     android.view.View.<init>(View.java:4019)
JS:     android.view.View.<init>(View.java:4137)
JS:     android.view.ViewGroup.<init>(ViewGroup.java:578)
JS:     android.widget.LinearLayout.<init>(LinearLayout.java:214)
JS:     android.widget.LinearLayout.<init>(LinearLayout.java:210)
JS:     android.widget.LinearLayout.<init>(LinearLayout.java:206)
JS:     android.widget.LinearLayout.<init>(LinearLayout.java:202)
JS:     com.telerik.widget.autocomplete.TokenView.<init>(TokenView.java:19)
JS:     com.tns.Runtime.callJSMethodNative(Native Method)
JS:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1021)
JS:     com.tns.Runtime.callJSMethodImpl(Runtime.java:903)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:890)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:874)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:866)
JS:     com.tns.gen.android.app.Application_ActivityLifecycleCallbacks.onActivityResumed(Application_ActivityLifecycleCallbacks.java:24)
JS:     android.app.Application.dispatchActivityResumed(Application.java:216)
JS:     android.app.Activity.onResume(Activity.java:1306)
JS:     android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1279)
JS:     android.app.Activity.performResume(Activity.java:7017)
JS:     android.app.ActivityThread.performResumeActivity(ActivityThread.java:3561)
JS:     android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3626)
JS:     android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2876)
JS:     android.app.ActivityThread.-wrap12(ActivityThread.java)
JS:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1567)
JS:     android.os.Handler.dispatchMessage(Handler.java:105)
JS:     android.os.Looper.loop(Looper.java:156)
JS:     android.app.ActivityThread.main(ActivityThread.java:6523)
JS:     java.lang.reflect.Method.invoke(Native Method)
JS:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:941)
JS:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:831)
JS: ERROR CONTEXT [object Object]

If I remove the line with 

tokenArray.forEach(token => {autocomplete.addToken(token);});

then the error dissapears. What am I doing wrong here, how can I add tokens to the AutoComplete?

Thanks in advance for any help

Regards

[Nick Iliev]

Hi Andres,

Thank you for providing the detailed code snippets and issue description.
I can confirm that indeed this is a bug related to the way method was implemented in nativescript-telerik-ui-pro v3.0.4. The good news is that the issue has been already addressed and the fix is included in our next official release. The next version of the plugin is expected any moment now (will be officially released later today).
You do not need to make any changes to the used code but just apply the new version of nativescript-telerik-ui-pro plugin once it is officially published.

Meanwhile, for testing purposes. you can test with the next tag (before the official release).
To do  execute the following:

tns plugin remove nativescript-telerik-ui-pro
tns plugin add nativescript-telerik-ui-pro@next

Keep in mind that the next version should be only used for testing purposes and is not considered production ready.

Regards,
Nikolay Iliev
Progress Telerik

[Anurag]

Hi Nikolay,

I am using nativescript-ui-pro 3.1.4 however I am still getting the same error as mentioned in the earlier post:

//this line generates an error,<br>
tokenArray.forEach(token => {autocomplete.addToken(token);});

Could you kindly confirm is this bug has been fixed.

Thanks

Anurag

 

[Nick Iliev]

Hi Anurag,

The plugin nativescript-pro-ui is aligned with the last official version of nativescript-telerik-ui-pro. This means that the fixes are made after mid-September are still not officially included in the released version. All the fixes, features and new functionalities will be included in the upcoming official release.

Meanwhile, you can test your code once again using the next tag but this time using nativescript-pro-ui.

tns plugin remove nativescript-pro-ui
tns plugin add nativescript-pro-ui@next

Regards,
Nikolay Iliev
Progress Telerik

[Anurag]

Thanks for the reply Nikolay. I will test the app with the @next version. Would it be possible to indicate a timeline for the next official release?

Regards

Anurag

[Nick Iliev]

Hello Anurag,

Do let me know if you need further assistance on that matter!
The next official version is expected at the end of this month (October). 

Regards,
Nikolay Iliev
Progress Telerik

[Anurag]

Hi Nikolay,

I have update my code to NS 3.3  and installed nativescript-pro-ui to 3.2.0 . However I am running into the same problem when I try to programatically add tokens in the AfterViewInit function. Have tested it in IOS and am getting the following error.

"undefined is not an object (evaluating 'this._ios.addToken')"

when I try to run this line of code.

tokenArray.forEach(token => {autocomplete.addToken(token);});

 

Could you let me know if I am doing something wrong?

Thanks

Anurag

 

 

 

[Anurag]

Hi Nick

My apologies - the problem was with my code.   "autocomplete" was not accessible where I was calling the addToken function on it. The method appears to be working.

Sorry.

Anurag

[Anurag]

Apologies for the multiple posts. I though the addToken(token) method was working but I am still getting an error as reported a couple of hours back.

Please advise.

Thnaks

[Anurag]

Just reporting that I solved this problem for now by getting rid of the minimumCharactersToSearch property in my template - which was causing issues on android.

[Nick Iliev]

Hello Anurag,

Thank you for reporting the details back to us. We will retest the dynamic creation with minimumCharactersToSearch property and will log it as a bug in the nativescrtpt-ui-feedback repository when the issue is reproduced. 

Regards,
Nikolay Iliev
Progress Telerik

[Anurag]

Hi Nick

Can confirm that I tested this issue with a new project.  I have opened a new issue on the nativescript ui feedback  here

[Nick Iliev]

Hello Andres,

Thank you for logging the issue and providing the information.
I have also tested the scenario on my side and can confirm that the issue is reproducible on Android.
Marked the issue as a bug in Android - keep track of updated information and fix release date.

Regards,
Nikolay Iliev
Progress Telerik