Tree supports various events that can be used to provide a custom behaviour for your tree.
There are 2 ways you can add a handler to the event:
Event names are case-insensitive
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);
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");}}
);
All events with subword 'onbefore' can be cancelled.
To cancel some event you should return false within the appropriate event handler.
Cancelling the event handler
var myEvent = $$("treeId").attachEvent("onBeforeSelect", function () {
... // some event handler code
return false;
})
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).
Btw, 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