Skip to main content

eventHandlers

adds event handlers to the HTML elements of a custom template of DataView items

eventHandlers?: { [key: string]: any; };

Example

function template() {    return "<div className='class_name'></div>";}
const dataview = new dhx.DataView("dataview", {    template: template,    eventHandlers: {        onclick: {            class_name: function(event) {                console.log("You clicked on " + event.target.tagName);            },        },        onmouseover: {            class_name: function(event, id) {                console.log("Item ID: " + id);            },        }    }});

Related sample: Dataview. 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
  • id - the id of a DataView item

Change log:

added in v7.0