Events Handling with DataTable

You can assign a custom behavior to different events of DataTable by using its event handling system.

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

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

You can attach several handlers to the same event:

A general way to attach/detach the event handler

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

These event handlers are not destroyed together with the component. You need to detach them using the detachEvent() method:

// to detach event
$$("dataTableId").detachEvent(myEvent);

With the help of the on parameter you can attach event handlers during the initialization of the component. These handlers cannot be detached manually and will be destroyed automatically together with the component.

Attaching the event handler through parameter 'on'

webix.ui({
    view: "dataTable",
    ...
    on: {
        onItemClick(){
            alert("item has just been clicked");
        }
    }
});

All events with the 'onBefore' prefix can be used to cancel the related action.
Return false from the event handler:

Canceling tab clicks

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

If an event handler is a simple (not fat-arrow) function, this refers to the owner of the event (the component that called attachEvent() or has the on property).

Most event handlers get incoming argument(s). For example the onAfterSelect event passes the id of a DataTable row (see ui.datatable to find all arguments passed by events).

Referring within the event handler

$$("myTable").attachEvent("onafterselect", function(id) {
    // get the name field of the data item that was selected
    var name = this.getItem(id).name;
    $$("top_label").setValue(name)
});