Documentation

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: {"itemClick": function () {alert("item has just been clicked");}}
);

Cancelable Events

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 = $$("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 DataTable's row (see ui.datatable to know exactly what arguments are passed inside event handler).

Btw, 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