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

The attachEvent() Method

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

The 'on' Parameter

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'

    view: "dataTable",
    on: {
            alert("item has just been clicked");

Cancelable Events

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;

Accessible Objects and Data

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;
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.