Skip to main content

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

eventHandlers?: {[key: string]: any; };

Example

// adds event handler to the HTML element of a custom template of a cellconst 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 className='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 sample: Grid. Handling events in template

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).
valuean 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 className='cell__html'><span>China</span> /*!*/            <img src='../flags/cn.svg'></div>", /*!*/        "population": "1415045928", "yearlyChange": "0.0039",        "netChange": "5528531", "density": "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); /*!*/            }, /*!*/        } /*!*/    } /*!*/});

Change log:

added in v7.0