Skip to main content

eventHandlers

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?: { [key: string]: any; };

Example

// adds event handler to the HTML element of the template of a cellconst treeGrid = new dhx.TreeGrid("treegrid", {    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,            template: function (text, row, col) { /*!*/                return text ? "<div className='cell__template'>$ " + text + "</div>" : ""; /*!*/            } /*!*/        },        // more options    ],    data: data,    eventHandlers: { /*!*/        onmouseover: { /*!*/            cell__template: function(event, data) { /*!*/                display(JSON.stringify(data.row, null, 2)); /*!*/            } /*!*/        } /*!*/    } /*!*/});

Related sample: TreeGrid. 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).
valuean 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

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