eventHandlers
adds event handlers to the HTML elements of a custom template
eventHandlers?: {[eventName: string]: {[className: string]: (events: Event, item: ITree) => void; };};
Example
const tree = new dhx.Tree("tree", {
template: ({ value }, isFolder) => {
const template = `
<div className="dhx_tree_template">
<span className="dhx_tree_template__value">${value}</span>
<div className="dhx_tree_template__rows">
<button className="dhx_tree_template__button remove">
<i className="far fa-trash-alt dhx_tree_template__icon dhx_tree_template__icon--danger"></i>
</button>
</div>
</div>
`
return isFolder ? null : template;
},
eventHandlers: {
onclick: {
remove: (event, { id }) => {
id && tree.data.remove(id);
}
}
}
});
Related sample: Tree. 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).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:event
- an event objectitem
- an object of a Tree item
Change log:
added in v7.2