Events Handling

You can assign a custom behavior to different events of DataGrid by using its event handling system.

There are 2 ways to add a handler to the event:

through the attachEvent() method;
through the on parameter.

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 = datagrid.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
datagrid.detachEvent(myEvent);

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'
webix.grid({
  ...
  on: {
      onItemClick(){
        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 = datagrid.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 DataGrid row (check this page to find all arguments passed by events).

// Referring within the event handler
mygrid.attachEvent("onafterselect", function(id) {
  // get the name field of the data item that was selected
  var name = this.getItem(id).name;
    $$("top_label").setValue(name)
});