eventHandlers

adds event handlers to the HTML elements of a custom template of a Grid cell or to the HTML elements defined in the data set of Grid

object eventHandlers;

Example

// adds event handler to the HTML element of a custom template of a cell
const grid = new dhx.Grid("grid", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], htmlEnable: true },
        { width: 150, id: "netChange", header: [{text: "Net Change"}],
            htmlEnable: true,
            tooltip: false,
            template: function (text, row, col) {                 return "<div class='cell__template'><input type='checkbox'                      disabled " + (text > 3000000 ? "checked" : "") + " ></div>";             }         },
        // more options
    ],
    data: data,
    eventHandlers: {         onmouseover: {             cell__template: function(event, data) {                 display(JSON.stringify(data.row, null, 2));             }         }     } });

Related samples

Handling events in template - DHTMLX Grid

Details

The eventHandlers object includes a set of key:value pairs, where:

key	the name of the event. Note, that at the beginning of the event name the 'on' prefix is used (onclick, onmouseover).
value	an object that contains a key:value pair, where key is the css class name that the handler will be applied to and value is a function that takes two parameters: event - an event object object - an object with two attributes: - row - an object with a row configuration - column - an object with a column configuration

An example of adding event handlers to the HTML elements defined in the data set of Grid is given below:

const data = [
    {
        "country": "<div class='cell__html'><span>China</span>             <img src='../flags/cn.svg'></div>",         "population": "1415045928", "yearlyChange": "0.0039",
        "netChange": "5528531", "destiny": "151",
        "urban": "0.5800", "id": "1"
    },
    // more options
];
 
const grid = new dhx.Grid("grid", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], htmlEnable: true },         // more options
    ],
    data: data,
    eventHandlers: {         onclick: {             cell__html: function(event, data) {                 display(JSON.stringify(data.col, null, 2));             },         },         onmouseover: {             cell__html: function(event) {                 display("You are over " + event.target.tagName);             },         }     } });