Skip to main content

eventHandlers

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

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

Example

const treeGrid = new dhx.TreeGrid("treegrid", {
columns: [
{ width: 280, id: "name", header: [{ text: "Book Name" }] },
{
width: 160, id: "price", type: "string",
header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }],
htmlEnable: true,
// define the template
template: function (text, row, col) {
return text ? "<div className='cell__template'>$ " + text + "</div>" : "";
}
},
// more options
],
data: data,
// adds event handler to the HTML element of the template of a cell
eventHandlers: {
onmouseover: {
cell__template: function(event, data) {
display(JSON.stringify(data.row, null, 2));
}
}
}
});

Related sample: TreeGrid. 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 TreeGrid is given below:

const data = [
{
"name": "A Time to Kill",
"price": "12.25",
"cover": "Hardcover",
"ships": "12 hours",
"inStock": "<div className='cell__html'><input type='checkbox' checked />80</div>",
"parent": "c.1"
},
// more options
];

const grid = new dhx.Grid("grid", {
columns: [
{
width: 160, id: "inStock", type: "string",
header: [{ text: "In stock" }],
htmlEnable: true
},
// more options
],
data: data,
eventHandlers: {
onmouseover: {
cell__html: function(event, data) {
display(JSON.stringify(data.col, null, 2));
}
}
}
});

Change log:

added in v7.0