Created
October 31, 2017 23:53
-
-
Save jevenson/02ad082c4be8367427dd995643c0d14b to your computer and use it in GitHub Desktop.
NativeScript Pro UI AutoCompleteTextView Issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<StackLayout class="modal-container"> | |
<StackLayout orientation="horizontal" class="text-container"> | |
<Label class="title" text="Search for a Country"></Label> | |
<Label class="cancel" text="Cancel" (tap)="onCancelTap()"></Label> | |
</StackLayout> | |
<RadAutoCompleteTextView | |
[items]="items" suggestMode="Suggest" displayMode="Plain" | |
(suggestionViewBecameVisible)="onSuggestionViewVisible()"> | |
<SuggestionView tkAutoCompleteSuggestionView> | |
<ng-template tkSuggestionItemTemplate let-item="item"> | |
<StackLayout orientation="vertical" padding="10"> | |
<Label class="suggestion" [text]="item.text"></Label> | |
</StackLayout> | |
</ng-template> | |
</SuggestionView> | |
</RadAutoCompleteTextView> | |
</StackLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { ModalDialogParams } from 'nativescript-angular/modal-dialog'; | |
import { TokenModel } from 'nativescript-pro-ui/autocomplete'; | |
// import { RadAutoCompleteTextViewComponent } from 'nativescript-pro-ui/autocomplete/angular'; | |
import { ObservableArray } from 'tns-core-modules/data/observable-array'; | |
@Component({ | |
moduleId: module.id, | |
selector: 'autocomplete-modal', | |
styleUrls: ['./autocomplete-modal.component.css'], | |
templateUrl: './autocomplete-modal.component.html' | |
}) | |
export class AutoCompleteModalComponent { | |
public items: ObservableArray<TokenModel>; | |
private countries: string[] = ['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(private params: ModalDialogParams) { | |
this.initDataItems(); | |
} | |
public onCancelTap(): void { | |
this.params.closeCallback(); | |
} | |
public onItemSelected(item: any): void { | |
this.params.closeCallback(item); | |
} | |
public onSuggestionViewVisible(): void { | |
console.log('supposed to be visible'); | |
} | |
private initDataItems() { | |
this.items = new ObservableArray<TokenModel>(); | |
for (const item of this.countries) { | |
this.items.push(new TokenModel(item, '')); | |
} | |
console.log(this.items); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, ViewContainerRef } from '@angular/core'; | |
import { ModalDialogOptions, ModalDialogService } from 'nativescript-angular/modal-dialog'; | |
import { AutoCompleteModalComponent } from './autocomplete-modal/autocomplete-modal.component'; | |
@Component({ | |
moduleId: module.id, | |
selector: 'autocomplete', | |
templateUrl: './autocomplete.component.html' | |
}) | |
export class AutoCompleteComponent { | |
constructor(private vcRef: ViewContainerRef, private modalService: ModalDialogService) { } | |
public launchModal(): void { | |
const options: ModalDialogOptions = { | |
viewContainerRef: this.vcRef, | |
context: '', | |
fullscreen: true | |
}; | |
this.modalService.showModal(AutoCompleteModalComponent, options) | |
.then(console.log) | |
.catch(console.log); | |
} | |
} |
Sorry, I don't remember - this was a long time ago and I no longer work with the company I was writing this code for. Good luck!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
are you able to fix this issue?