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:

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

Parameter 'on'

With the help of parameter on you can attach any event(s) to DataTable. But you can't detach them later.

Attaching the event handler through parameter 'on'

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

Cancelable Events

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

Canceling the event handler

var myEvent = $$("dataTableId").attachEvent("onBeforeTabClick", 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 DataTable row (see ui.datatable to know exactly what arguments are passed inside event handler).

By the way, using the id of a sub-element you can access a data item associated with it and all its properties, even if they were not used to draw the element. For example:

Referring within the event handler

$$("myTable").attachEvent("onafterselect",function (id) {
  $$("top_label").setValue(this.getItem(id).name)
})
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 javascript datagrid library product.