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 object
  • item - an object of a Tree item

Change log:

added in v7.2