eventHandlers

Optional. Adds event handlers to HTML elements of a custom template of a TreeGrid cell or to the HTML elements defined in the data set of TreeGrid

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 object - 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_container", {
    columns: [
        { width: 280, id: "name", header: [{ text: "Book Name" }] },
        {
            width: 160, id: "price", type: "string", 
            header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }],
            htmlEnable: true,
            // define the template
            template: function (text, row, col) {
                return text ? "<div className='cell__template'>$ " + text + "</div>" : "";
            }
        },
        // more options
    ],
    data: data,
    // adds event handler to the HTML element of the template of a cell
    eventHandlers: {
        onmouseover: {
            cell__template: function(event, data) {
                display(JSON.stringify(data.row, null, 2));
            } 
        } 
    }
});

Related sample: TreeGrid. Handling events in template

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

Change log:

added in v7.0