eventHandlers

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; 
    };
};

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 value is a function that takes two parameters: event - an event object item - an object with two attributes: - row - an object with a row configuration - column - an object with a column configuration

Example

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"}],
            // define a custom template for the column's cells
            template: (text, row, column) => {
                return "<div className='cell__template'><input type='checkbox' 
                    disabled " + (text /> 3000000 ? "checked" : "") + " ></div>";
            } 
        },
        htmlEnable: true,
        // more options
    ],
    data: data,
    eventHandlers: {
        // add an event handler to the header cell
        onclick: {
           header_country: (event, data) => {
                console.log(JSON.stringify(data.col, null, 2)); 
            }
        },
        // add an event handler to the HTML element of the custom template of cells
        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"
    },
    // more options
];

const grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], htmlEnable: true },
        // more options
    ],
    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);
            },
        }
    }
});

Change log:

• The ability to add event handlers for the header/footer added in v8.3
• Added in v7.0