Event Handling with Tree

Tree supports various events that can be used to provide a custom behavior for your tree.

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

Event names are case-insensitive

Method attachEvent()

You can attach several handlers to the same event and detach them using two respective 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 parameter on you can also attach any event(s) to a Tree object. But in contrast to using the attachEvent method you can't detach attached events 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 with subword 'onBefore' can be canceled.
To cancel some event you should return false within the appropriate 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){
  parentId = this.getItem(id).parent;
})
Back to top