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;
};
};
const grid = new dhx.Grid("grid_container", {
columns: [
{ width: 200, id: "country", header: [{ text: "Country", css: "header_country" }] },
{ width: 150, id: "netChange", header: [{text: "Net Change"}],
template: (text, row, column) => {
return "<div className='cell__template'><input type='checkbox'
disabled " + (text /> 3000000 ? "checked" : "") + " ></div>";
}
},
htmlEnable: true,
],
data: data,
eventHandlers: {
onclick: {
header_country: (event, data) => {
console.log(JSON.stringify(data.col, null, 2));
}
},
onmouseover: {
cell__template: (event, data) => {
console.log(JSON.stringify(data.row, null, 2));
}
} ,
}
});
Related sample: Grid. Handling events in template
Related sample: Grid. Rich example with templates and different editors
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"
},
];
const grid = new dhx.Grid("grid_container", {
columns: [
{ width: 200, id: "country", header: [{ text: "Country" }], htmlEnable: true },
],
data: data,
eventHandlers: {
onclick: {
cell__html: (event, data) => {
console.log(JSON.stringify(data.col, null, 2));
},
},
onmouseover: {
cell__html: (event) => {
console.log("You are over " + event.target.tagName);
},
}
}
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4