RadAutoComplete angular is not showing result

[Sharique-Hasan]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow?

Yes

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital letter. I tried the exact same code of sample-angular repo in my app. But It didn't show the result in the dropdown after typing.

Which platform(s) does your issue occur on?

iOS/Android/Both (if applicable tell us the specific version of the platform) Android

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: (the version of nativescript-telerik-ui/-pro in the package.json) 3.1.3
• CLI: (run tns --version to fetch it) 3.0.3
• Cross-platform modules: (the version of tns-core-modules in the package.json) 3.0.1
• Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json) 3.2.0

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application ..
2. ... I am following NathanWalker's angular-seed-advanced

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

(You can paste entire code snippets or attach a runnable project)

I even tried this code https://github.com/telerik/nativescript-ui-samples-angular/blob/release/sdkAngular/app/autocomplete/completion-mode/autocomplete-contains-mode.component.ts But I got 'No Results Found'

[Sharique-Hasan]

My Package.json

  "name": "angular-seed-advanced",
  "version": "0.0.0",
  "nativescript": {
    "id": "com.yourdomain.nativescript",
    "tns-ios": {
      "version": "3.0.0"
    },
    "tns-android": {
      "version": "3.2.0"
    }
  },
  "scripts": {
    "preinstall": "mkdirp app",
    "clean": "rimraf platforms node_modules lib hooks app && mkdirp app",
    "ns-bundle": "ns-bundle",
    "start-android-bundle": "npm run ns-bundle --android --start-app",
    "start-ios-bundle": "npm run ns-bundle --ios --start-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  },
  "dependencies": {
    "@angular/animations": "~4.1.2",
    "@angular/common": "~4.1.2",
    "@angular/compiler": "~4.1.2",
    "@angular/core": "~4.1.2",
    "@angular/forms": "~4.1.2",
    "@angular/http": "~4.1.2",
    "@angular/platform-browser": "~4.1.2",
    "@angular/router": "~4.1.2",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.3",
    "@ngrx/store": "^2.2.2",
    "@ngx-translate/core": "^6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "angulartics2": "^2.2.1",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "nativescript-angular": "~3.0.0",
    "nativescript-autocomplete": "^1.0.0",
    "nativescript-checkbox": "^2.1.11",
    "nativescript-drop-down": "^3.1.2",
    "nativescript-localstorage": "^1.1.2",
    "nativescript-ngx-fonticon": "^2.2.3",
    "nativescript-pro-ui": "^3.1.3",
    "nativescript-svg": "^1.3.4",
    "nativescript-telerik-ui": "^3.1.3",
    "nativescript-theme-core": "^1.0.4",
    "ngrx-store-freeze": "0.1.9",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.4.0",
    "tns-core-modules": "~3.0.0",
    "world-countries": "^1.8.1",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.1.2",
    "@ngrx/store-devtools": "~3.2.4",
    "@ngtools/webpack": "1.3.1",
    "@types/jasmine": "2.5.41",
    "@types/lodash": "4.14.63",
    "babel-traverse": "6.11.4",
    "babel-types": "6.11.1",
    "babylon": "6.8.4",
    "codelyzer": "^3.0.1",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~2.1.0",
    "fs-extra": "^0.30.0",
    "glob": "^7.0.5",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "^0.0.9",
    "nativescript-dev-sass": "^1.1.1",
    "nativescript-dev-webpack": "^0.5.0",
    "opener": "^1.4.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.0.2",
    "rimraf": "^2.5.3",
    "tar.gz": "^1.0.5",
    "tns-platform-declarations": "^3.0.1",
    "tslint": "^5.2.0",
    "typescript": "2.3.4",
    "webpack": "~2.5.1",
    "webpack-sources": "~0.2.3"
  }
}

[Sharique-Hasan]

While debugging I used suggestionViewBecameVisible event to catch the event. and in that event AutoCompleteEventData.filteredItems was an empty array. Probably it is not filtering the data and AutoCompleteEventData's Symbol property contains value array of my string array

[VladimirAmiorkov]

@Sharique-Hasan I was not able to observe such issue while running the release branch of the nativescript-ui-samples-angular. Were you able to reproduce the same behavior in that project as you did in your own one? Can you share that project with me or at least some code snippets of the setup, like the component code behind + html, it sounds to me that the source of the RadAutoCompleteTextView may be corrupted or not set accordingly.

Something else that you could try is to update to the latest version of both Angular and nativescript-angular as I see you are using slightly older versions. The latest supported versions by nativescript-ui-pro can be found here: https://github.com/telerik/nativescript-ui-samples-angular/blob/release/sdkAngular/package.json

[Sharique-Hasan]

@VladimirAmiorkov Actually I cannot share my product here. Can you provide me your email address so that I can send you the project in zipped form.

Moreover I tried updating my packages but I got no success of getting the results.

[VladimirAmiorkov]

@Sharique-Hasan Because this is an public post that many users may read it is better to paste code snippets so that the issue is visible to the community rather that sending private messages. Can you please share some code snippets of your setup of how the RadAutoCompleteTextView is declared and how its items property is populated, you can change your code if you are concerned about sensitive code, just make sure that the idea is the one you are using.

[Sharique-Hasan]

This is my html(xml)

<ActionBar class="action-bar">
  <Label [text]="'APP_REGISTRATION' | translate"></Label>
</ActionBar>

<GridLayout rows="auto,*,auto">
  <StackLayout row="0" marginBottom="-10">
    <Image #bannerImage></Image>
  </StackLayout>

  <ScrollView row="1" sdkExampleTitle sdkToggleNavButton>
    <GridLayout rows="auto auto auto auto">

      <StackLayout row="0" class="filedDv">
        <StackLayout padding="15" orientation="horizontal" class="header">
          <Label text="Personal Info"></Label>
          <Label text="*" class="req"></Label>
        </StackLayout>
        <StackLayout margin="15" class="fileds">
          <TextField class="input" hint="Enter First Name" [(ngModel)]="user.firstName" style.placeholderColor="#b8c9d3"></TextField>
          <TextField class="input" hint="Enter Last Name" [(ngModel)]="user.lastName" style.placeholderColor="#b8c9d3"></TextField>
          <TextField Editable="false" class="input" [ngModel]="user.dateOfBirth" (tap)="openDatePickerDialog()" hint="Date of Birth"
            style.placeholderColor="#b8c9d3"></TextField>
        </StackLayout>
      </StackLayout>

      <StackLayout row="1" class="filedDv">
        <StackLayout padding="15" orientation="horizontal" class="header">
          <Label text="Contact Details"></Label>
          <Label text="*" class="req"></Label>
        </StackLayout>
        <StackLayout margin="15" class="fileds">
          <TextField (tap)='openCountryPickerDialog()' class="input" editable="false" [ngModel]="user.country" style.placeholderColor="#b8c9d3"></TextField>
          <TextField class="input" hint="Email" [(ngModel)]='user.email' style.placeholderColor="#b8c9d3"></TextField>
          <GridLayout columns="70,*">
            <TextField (tap)='openCountryPickerDialog()' class="input" editable='false' [ngModel]='user.countryCode' col="0" textAlignment="center"
              marginRight="10"></TextField>
            <TextField class="input" type='number' hint="Your Number" [(ngModel)]='user.phone' col="1" style.placeholderColor="#b8c9d3"></TextField>
          </GridLayout>
          <RadAutoCompleteTextView #autocmp [items]="cities" suggestMode="Suggest" displayMode="Plain">
            <SuggestionView tkAutoCompleteSuggestionView>
              <ng-template tkSuggestionItemTemplate let-item="item">
                <StackLayout orientation="vertical" padding="10">
                  <Label [text]="item"></Label>
                </StackLayout>
              </ng-template>
            </SuggestionView>
          </RadAutoCompleteTextView>
          <TextField class="input" hint="Select City" [(ngModel)]='user.city' style.placeholderColor="#b8c9d3"></TextField>
          <TextField class="input" hint="Select Area" [(ngModel)]='user.area' style.placeholderColor="#b8c9d3"></TextField>
        </StackLayout>
      </StackLayout>

      <StackLayout row="2" class="filedDv">
        <StackLayout padding="15" orientation="horizontal" class="header">
          <Label text="General Info"></Label>
        </StackLayout>
        <StackLayout margin="15" class="fileds">
          <TextField class="input" hint="Occupation" style.placeholderColor="#b8c9d3" [(ngModel)]='user.occupation'></TextField>
          <TextField class="input" hint="School / Organization" style.placeholderColor="#b8c9d3" [(ngModel)]='user.school'></TextField>
          <TextField class="input" hint="Education" style.placeholderColor="#b8c9d3" [(ngModel)]='user.education'></TextField>
        </StackLayout>
      </StackLayout>
    </GridLayout>
  </ScrollView>

  <StackLayout row="2">
    <GridLayout columns="*,*">
      <Button (tap)='registerUser()' text="Register" class="btn btn-primary" col="0"></Button>
      <Button (tap)='openRegisterLaterDialog()' text="Register Later" class="btn outline" col="1"></Button>
    </GridLayout>
  </StackLayout>
</GridLayout>

See the RadAutoComplete in the Contact Details section. It opens the suggestion box but doesn't show the result or suggestions

[Sharique-Hasan]

@VladimirAmiorkov This is my component.ts

import { RegisterLaterComponent } from './../modalEntryComponents/registerLater.component';
import { TNSFontIconService } from 'nativescript-ngx-fonticon';

import { RegistrationDataService } from './../../modules/core/services/registration.service';
import { CountrySelectionComponent } from './../countrySelection/countrySelection.component';

// libs
import { Component, ElementRef, ViewChild, OnInit, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';

// app
import { RouterExtensions, Config, StorageService, LogService, PAGES } from '../../modules/core/index';
import { IAppState, getNames } from '../../modules/ngrx/index';
import { NameList } from '../../modules/sample/index';
import { IMultilingualState } from '../../modules/i18n/index';
import { IUser } from '../../modules/core/interfaces/iuser';
import { DatePickerComponent } from '../datepicker/datepicker.component';
import * as moment from 'moment';
import * as _ from 'lodash';
import * as countries from 'world-countries';
import { TokenModel } from "nativescript-pro-ui/autocomplete";
import { ObservableArray } from "tns-core-modules/data/observable-array";

import {
  ModalDialogService,
  ModalDialogParams,
  ModalDialogOptions
} from 'nativescript-angular/directives/dialogs';

@Component({
  moduleId: module.id,
  selector: 'registration',
  templateUrl: 'registration.component.html',
  styleUrls: ['registration.component.css']
})
export class RegistrationComponent implements OnInit {

  @ViewChild('bannerImage') public bannerImage: ElementRef;
  public names$: Observable<any>;
  public newName: string;
  public state: Observable<any>;
  public user: IUser;
  public cities: Observable<Array<string>>;
  private _selectedCountry: object;
  private _items: ObservableArray<TokenModel>;
  private genderRadioValue: number;
  @ViewChild('autocmp') private autocomp: ElementRef;
  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(
    public storageService: StorageService,
    private store: Store<IAppState>,
    private modal: ModalDialogService,
    private log: LogService,
    private viewContainerRef: ViewContainerRef,
    private _changeDetectionRef: ChangeDetectorRef,
    public fonticon: TNSFontIconService,
    private RegistrationService: RegistrationDataService,
    public routerext: RouterExtensions) {

    this._selectedCountry = _.find(countries, { name: { common: 'Pakistan' } });

    this._cities.subscribe(cities => {
      // let _cities = [];
      // _.each(cities, (city: string) => {
      //   cities.push(new TokenModel(city, undefined));
      // })
      // debugger;
      this.cities = Observable.of(cities);
      this._changeDetectionRef.detectChanges();
    });

    this.user = {
      firstName: '',
      lastName: '',
      dateOfBirth: '',
      gender: '',
      country: (<any>this._selectedCountry).name.common,
      countryCode: <string>_.first((<any>this._selectedCountry).callingCode),
      city: '',
      area: '',
      email: '',
      phone: ''
    };
    this.initDataItems();
  }

  onSuggestionViewBecameVisible(event: any) {
    debugger;
  }

  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));
    }
  }

  ngOnInit() {
    this.bannerImage.nativeElement.src = `res://img_banner`;
    this.store.select(s => s.i18n).subscribe((state: IMultilingualState) => {
      // Change the registration page banner based on language selected.
      if (state.lang === 'ur') {
        this.bannerImage.nativeElement.src = `res://img_banner_${state.lang}`;
      }
    });
  }

  registerUser() {
    this.RegistrationService.signupUser(this.user)
      .subscribe(result => {
        debugger;
        this.log.debug(result);
      })
  }

  setGenderRadioValue(value: number) {
    this.genderRadioValue = value;
  }

  public get getGenderValue(): number {
    return this.genderRadioValue;
  }

  // get user() {
  //   return this._user;
  // }

  openDatePickerDialog() {
    let options: ModalDialogOptions = {
      viewContainerRef: this.viewContainerRef
    };
    this.modal.showModal(DatePickerComponent, options)
      .then(result => {
        if (result) {
          this.user.dateOfBirth = moment(new Date(result)).format('MMMM DD, YYYY');
        }
      });
  }

  openCountryPickerDialog() {
    let options: ModalDialogOptions = {
      viewContainerRef: this.viewContainerRef
    };
    this.modal.showModal(CountrySelectionComponent, options)
      .then(result => {
        if (result) {
          this.user.country = result.name.common;
          this.user.countryCode = <string>_.first((<any>result).callingCode)
        }
      });
  }

  openRegisterLaterDialog() {
    let options: ModalDialogOptions = {
      viewContainerRef: this.viewContainerRef
    };
    this.modal.showModal(RegisterLaterComponent, options)
      .then(result => {
        if (result === PAGES.PROFILE) {
          this.moveToProfile();
        }
      });
  }

  private get _areas(): Observable<Array<string>> {
    return this.RegistrationService.getAreas();
  }

  private get _schools(): Observable<Array<string>> {
    return this.RegistrationService.getSchools();
  }

  private get _cities(): Observable<Array<string>> {
    return this.RegistrationService.getCities();
  }

  private get _ocuupation(): Observable<string> {
    return this.RegistrationService.getQualification();
  }

  moveToProfile() {
    // Try this in the {N} app
    // {N} can use these animation options
    this.routerext.navigate(['/profile'], {
      transition: {
        duration: 100,
        name: 'slideTop',
      }
    });
  }

}

I have also used dataItems as the [items] in RadAutoComplete by copy pasting the sample's repo snippet for AutoComplete in sdkAngular folder

[VladimirAmiorkov]

Hi @Sharique-Hasan ,

The issue you are experiecing is caused by the type of the collection bound to the items property of the RadAutoCompleteTextView. Could you try to change the type of the cities property in your component code behind to be of type ObservableArray rather than the Observable from rxjs. In the current version of the the items property is of type ObservableArray, more details can be found in our API documentation here.

[VladimirAmiorkov]

Did you try to run our sdkAngular example to see if that is working on your side?

[Sharique-Hasan]

@VladimirAmiorkov I have already tried ObservableArray from tns-core-modules. But the output was same. I have copied and pasted the exact same snippet from sdkAngular app and it didn't run either.

Moreover sdkAngular app's build is failing it self as described here #313

[bbetter]

is there any update on this one. I am experiencing it as well.

[connorsleight]

Any update on this? this issue/error has been around for 8 months, has any progress been made to fix this?

[suparnavg]

Facing the same error. In the sdkAngular project (DataForm -> Editors -> AutoComplete), if I log the source object in the checkValues function, this is returned:

booking {
 "to": "New York", // plain autocomplete
 "from": {} // tokens autocomplete
 }

Facing the same issue in my other project. What should be returned as an array of tokens is simply an empty object { }

Also tried accessing the value of the property in a different way

this.dataformComponent.dataForm.getPropertyByName("from").value;

The line above returns something like [New York, London] - this is not an array. Not sure how to use this component!

[tgpetrov]

@suparnavg The issue is already resolved, it is also logged here.