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
// 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)); } } } });
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:
|
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); }, } } });
added in v7.0
Back to top