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
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);
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");}}
);
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;
})
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