Basic blur event in a Telerik Nativescript Mobile App

Question

I am writing a cross-platform mobile app using Telerik AppBuilder with NativeScript. I am going nuts trying to figure out how to get a basic \"blur\" or \"onTextChanged\" event

Answer 1

As far as I know there no blur(-like) event in NativeScript. However, you can react to when text is changed.

What you want to do is to utilize the Data Binding Mechanisms and the Observable Object in NativeScript.

Briefly, data binding will allow you to connect the user interface (most often described in your XML files) with your business model/data object. A data binding can be "one way" meaning that any changes you do in your data object will be reflected in the UI. It can also be two ways meaning that any changes you do in the UI will also be reflected back in your data object.

In your case, you want two way bindings as you want whatever happens in the UI (user input text) to be reflected in your model.

Example

xml

Let's say you have this xml:

js

I've commented inline for easier understanding.

var observable = require("data/observable");

function pageLoaded(args) {
    var page = args.object;

    /**
     * Creating a new Observable object.
     */
    var contextObj = new observable.Observable();

    /**
     * Setting the property 'description' to 'hi there'.
     * In your XML you'll attach this property to the
     * Text field as such:
     * 
     * This means that the Text field will, by default
     * be prepopulated with 'Hi there'
     */
    contextObj.set("description", "Hi there");

    /**
     * Attaching the observable object to the
     * 'bindingContext' of the page. This is a
     * special property to which you want to attach
     * the object. By default bindings are two way.
     */
    page.bindingContext = contextObj;

    /**
     * Event listener.
     * When the user is changing the text in the UI, this gets propagated down
     * to the contextObj which will change. Here we add an event listener for
     * changes and log some information about the change that just happened.
     */
    contextObj.addEventListener(observable.Observable.propertyChangeEvent, function (event) {
        console.log('The object changed!');
        console.log('Event:        ' + event.eventName);
        console.log('propertyName: ' + event.propertyName);
        console.log('New value:     ' + event.value);
        console.log('');
    });

 }
 exports.pageLoaded = pageLoaded;