Skip to main content

Event Handling

Events help to interact with users and bring interactivity to the page.

When the user makes some action in the Gantt chart, dhtmlxGantt invokes an event. You can use this event to detect the action and run the desired code for it.

Attaching events​

To attach an event, use the attachEvent method.

gantt.attachEvent("onTaskClick", function(id, e) {
    alert("You've just clicked an item with id="+id);
});

Related sample: D'n'D Events

Note:

  • Events' names are case-insensitive.
  • You can attach several handlers to the same event.

Detaching events​

To detach an event handler, use the detachEvent method:

A general way to attach/detach the event handler
// to attach event
var eventId = gantt.attachEvent("onTaskClick", function(id, e) {
    alert("You've just clicked an item with id="+id);
});
// to detach event
gantt.detachEvent(eventId);

To detach all handlers at once, you can use the following logic:

// save handler ids when attaching events
var events = [];
events.push(gantt.attachEvent("onTaskClick", function(id, e) {
    alert("You've just clicked an item with id="+id);
});
events.push(gantt.attachEvent("onTaskDblClick", function(id, e) {
    alert("You've just double clicked an item with id="+id);
});
 
// detach all saved events
while (events.length)
   gantt.detachEvent(events.pop());

Checking the existence of a handler​

To check, whether a specific event has any handlers attached, use the checkEvent method:

gantt.attachEvent("onTaskClick", function(id, e) {
    alert("You've just clicked a task with id="+id);
});
 
gantt.checkEvent("onTaskClick"); //returns 'true'

Cancelable events​

All events with the preceding subword 'onbefore' can be cancelled.

To cancel some event, return false from the appropriate event handler.

Cancelling the event handler
gantt.attachEvent("onBeforeTaskChanged", function(id, mode, old_task){
    var task = gantt.getTask(id);
    if(mode == gantt.config.drag_mode.progress){
        if(task.progress < old_task.progress){
            dhtmlx.message(task.text + " progress can't be undone!");
            return false; 
        }
    }
    return true;
});

Related sample: D'n'D Events

Accessing the gantt object inside the handler​

Inside the event handler you can refer to the gantt object through the keyword this.

Referring within the event handler
gantt.attachEvent("onTaskClick", function(id, e){
    parentId = this.getTask(id).parent;
});