How to have click event for each resource label on the Resource column

Gantt
#1

On the gantt chart template, I have resource columns which shows resource name(multiple resource) for each task. When I click in the resource label, I want to do trigger my custom logic. when I click I need task ID and resource ID to do custom logic.

how to do that. see the picture below.
45%20AM

I use Angular 7

#2

Hello Suba,
There is no built-in way to do that, but you can implement a custom solution by using Gantt API and Javascript.

If you the circles are located in the grid, you can use the onTaskClick event, obtain the value, get the resource assignments and compare it with the value:

gantt.attachEvent("onTaskClick", function(id,e){
  var el = e.target;
  if (el.className == 'owner-label'){
    var value = el.attributes[1].nodeValue
    var task = gantt.getTask(id)
    var store = gantt.getDatastore("resource");
    var assignments = task[gantt.config.resource_property];

    assignments.forEach(function(assignment) {
      var owner = store.getItem(assignment.resource_id);
      if (owner.text == value) gantt.message("resource id:"+ owner.id)
    });
  }
  return true;
});

https://docs.dhtmlx.com/gantt/api__gantt_ontaskclick_event.html
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/5/3fbbaf2e2

If the circles are located in the resource grid, you can use the onEmptyClick event and check the DOM properties of the target element:
https://docs.dhtmlx.com/gantt/api__gantt_onemptyclick_event.html
The following snippet demonstrates how it works:
https://snippet.dhtmlx.com/5/191044f12

1 Like
#3

Thank you. It works as expected