RadAutoCompleteTextView: Events

In this article you are going to learn about the RadAutoCompleteTextView's events.
The eventa are designed to notify you whenever a particular action, in the workflow of the control, has happened. They are quite useful when it comes to executing logic based on the RadAutoCompleteTextView's state.

Available events

The RadAutoCompleteTextView control exposes three different events.

  • TokenRemoved - triggered whenever a token is removed.
  • TokenAdded - triggered whenever a token is added.
  • TokenSelected - triggered whenever a token is selected/deselected.

All three of the listeners have identical logical structure and identical workflow, the only difference between them is the event which they are observing and notifing you about.


In order to get notified when one of the above-mentioned events occur, you should use the following structure with the type of event you want to capture.

<au:RadAutoCompleteTextView items="{{ dataItems }}" displayMode="Tokens" tokenAdded="{{ onTokenAdded}}">
export class EventsViewModel extends observableModule.DependencyObservable {
     public onTokenAdded(args) {
        this.set("eventName", "Token Added!");
var EventsViewModel = (function (_super) {
    __extends(EventsViewModel, _super);
    function EventsViewModel() {
        _super.apply(this, arguments);
    EventsViewModel.prototype.onTokenAdded = function (args) {
        this.set("eventName", "Token Added!");
    return EventsViewModel;
exports.EventsViewModel = EventsViewModel;


Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.