Event Handling with Tree

Tree has various events that can be used to customize its behavior.

There are 2 ways to add a handler to the event:

• through the attachEvent() method;
• through the on parameter.

Method attachEvent()

You can attach several handlers to the same event and detach them using these two methods:

A general way to attach/detach the event handler

// to attach event
var myEvent = $$("treeId").attachEvent("onItemClick", function() {
  // event handler code
});
 
//to detach event
$$("treeId").detachEvent(myEvent);

Parameter 'on'

With the help of the on parameter, you can also attach any event(s) to a Tree object. But, unlike attachEvent, you can't detach the event listeners later.

Attaching the event handler through parameter 'on'

webix.ui({
    view:"tree",
    ...
    on: {
        "itemClick": function () {
            alert("item has just been clicked");
        }
    }
});

Cancelable Events

All events that have names starting with 'onBefore' can be canceled.
To cancel some event, you should return false within the event handler.

Canceling the event handler

var myEvent = $$("treeId").attachEvent("onBeforeSelect", function() {
    ... // some event handler code
    return false;
});

Accessible Objects and Data

Inside the event handler, you can refer to the holder component through keyword this.
Besides, most event handlers get incoming argument(s), like the id of a data item (see tree events to know exactly what arguments are passed inside event handler).

By the way, using the id of a data item you can access this item itself and all its properties. For example:

Referring within the event handler

$$("treeId").attachEvent("onAfterSelect",function(id){
    var parentId = this.getItem(id).parent;
});

Back to top