Add tokens Programmatically to AutoCompleteTextView in Angular

6 posts, 1 answers
  1. Andrés
    Andrés avatar
    8 posts
    Member since:
    Jan 2017

    Posted 06 Sep Link to this post

    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

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 08 Sep Link to this post

    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 addToken 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 taht 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
    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. Anurag
    Anurag avatar
    27 posts
    Member since:
    Apr 2016

    Posted 09 Oct Link to this post

    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

     

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 09 Oct Link to this post

    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
    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.
  5. Anurag
    Anurag avatar
    27 posts
    Member since:
    Apr 2016

    Posted 10 Oct in reply to Nikolay Iliev Link to this post

    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

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 10 Oct Link to this post

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