eventHandlers

Optional. Adds event handlers to the HTML elements of a custom template

eventHandlers?: {
    [eventName: string]: {
        [className: string]: (events: 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).
• 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

Example

const tree = new dhx.Tree("tree_container", {
    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);
                // return false;
            }
        }
    }
});

Related sample: Tree. Handling events in template

Note. Returning false from a handler function will stop the template event bubbling and block triggering of the itemClick event when you click on the item with className.

As an alternative way, you may use stopPropagation() for this purpose (from v7.3.6):

eventHandlers: {
    onclick: {
        class_name: (event) => {                              
            evt = event || window.event;
            evt.stopPropagation();
            console.log("button click");
        }
    }
}

Change log:

added in v7.2