Skip to main content

eventHandlers

Optional. Adds event handlers to the HTML elements of a custom template in a cell, or to the HTML elements defined in the data set, or to the header/footer cell

eventHandlers?: {
[eventName: string]: {
[className: string]: (event: Event, item: object) => void;
};
};

Parameters:

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:
  1. key is the CSS class name that the handler will be applied to
  2. value is a function that takes two parameters:
    • event - an event object
    • item - an object with two attributes:
        - row - an object with a row configuration
        - column - an object with a column configuration

Example

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

Related sample: TreeGrid. Handling events in template

Related sample: TreeGrid. Rich example with templates and different editors

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: (event, data) => {
console.log(JSON.stringify(data.col, null, 2));
}
}
}
});

Change log:

  • Added in v7.0
  • The ability to add event handlers for the header/footer added in v8.3