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

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.

I use Angular 7

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 =;
  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:"+
  return true;
Here is an example of how it might be implemented:

If the circles are located in the resource grid, you can use the onEmptyClick event and check the DOM properties of the target element:
The following snippet demonstrates how it works:

1 Like

Thank you. It works as expected