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