Available only in PRO Edition

Event Handling with Organogram

Organogram supports various events that can be used to provide a custom behavior for your organogram.

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 = $$("orgChartId").attachEvent("onItemClick", function () {
// event handler code
})
 
//to detach event
$$("orgChartId").detachEvent(myEvent);

Parameter 'on'

With the help of parameter on you can also attach any event(s) to an Organogram object. But in contrast to using the attachEvent method you can't detach the attached events later.

Attaching the event handler through parameter 'on'

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

Cancelable Events

All events with the subword 'onBefore' can be canceled.
To cancel some event you should return false within the appropriate event handler.

Canceling the event handler

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

Accessible objects and data

Inside the event handler you can refer to the holder component through the keyword this.
Besides, most event handlers get incoming argument(s), like the id of a data item (see organogram events to know exactly what arguments are passed inside the 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

$$("orgChartId").attachEvent("onAfterSelect",function(id){
  var level = this.getItem(id).$level;
})

Related sample:  Events

Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript ui components library and page of organizational chart maker product.