Redirect Notice
As of April 12th, you must go to Progress SupportLink to create new support cases or to access existing cases. Please, bookmark the SupportLink URL and use the new portal to contact the support team.
How can we help you today?
Using RadAutoCompleteTextView
Hello Janine,
I tested the provided code snippet and everything appears to be working correctly. The autocomplete is suggesting the provided 3 words and the console is outputting the text every time a symbol is added or removed. Can you please delete the <app-name>/platforms and <app-name>/.cloud folders, remove the app from the device, and then build and install it again? My assumption is that during the livesync process the updated TS/JS file was not synced correctly and this is causing the "is not a function" error.
The other thing that comes to my mind is to ensure that you have added the custom XML element in the view associated with the TypeScript file in which you have added the custom code. I assume you are doing so, nevertheless, this is another case that would lead to the reported error.
Regards,
Garo
janine garrett
Hi
I am getting errors trying to get the RadAutoCompleteTextView working on a form. The error being generated is:
LOG from device Galaxy S9: ERROR TypeError: _co.onTextChanged is not a function
I have added a CustomXML control to a form, and the following code:
<StackLayout class="input-field">
<Label text="Select a location" class="label m-b-5"></Label>
<RadAutoCompleteTextView [items]="autocompleteLocations" suggestMode="Suggest"
completionMode="StartsWith" displayMode="Plain" (textChanged)="onTextChanged($event)">
<SuggestionView tkAutoCompleteSuggestionView>
<ng-template tkSuggestionItemTemplate let-item="item">
<GridLayout columns="auto,*">
<!--<Image height="40" col="0" [src]="getImageName(item.text)"></Image> -->
<Label col="0" [text]="img"></Label>
<Label col="1" [text]="item.text" class="p-l-5"></Label>
</GridLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
</StackLayout>
The typescript code to support this is:
// Changes to this file are preserved when the app regenerates.
// Find more information on https://devcenter.kinvey.com/guides/studio-extension-points.
//-------------------------------------------------------------------------
import { Inject, Injector } from '@angular/core';
import { TestListMobilFormViewBaseComponent } from '@src/app/modules/leftovers/test-list-mobil-form/test-list-mobil-form.base.component';
import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel, RadAutoCompleteTextView } from "nativescript-ui-autocomplete";
const locations = ["bedroom", "bathroom", "laundrey"];
// let currentLocation: string ="";
export class TestListMobilFormViewComponent extends TestListMobilFormViewBaseComponent {
autocompleteLocations: ObservableArray<TokenModel>;
constructor(@Inject(Injector) injector: Injector) {
super(injector);
this.autocompleteLocations= new ObservableArray<TokenModel>();
locations.forEach((location) => {
this.autocompleteLocations.push(new TokenModel(location, undefined));
});
}
this.$config.mobileform0.onBeforeSubmit = ({ form }) => {
form.additionalFields.location = currentLocation
}
public onTextChanged(e) {
console.log("Text Changed: " + e.text);
currentLocation = e.text;
}
}
Note: it works fine (that is, a get an autocomplete list on my form with the 3 values) until I had the textChanged event to the xml, and the associated typescript code to output the selection to the console.
Any suggestions on what I am doing wrong would be very appreciated.