Setting CSS properties on Task element

Gantt
#1

Is it possible to set the z-index CSS property of a task? I have tasks that overlap each other, which is fine. However, I need one of them to display on top of the other when this happens.

I tried
task['progressColor'] = primaryColor;
task['z-index'] = 100;

I also tried
task['progressColor'] = primaryColor;
task['z-index'] = '100';

Progress color works, but not the z-index.
Any ideas? Thank you!

#2

Hello @chrisjj,

Yes, it’s possible. The gantt provides the “templates” functionality to customize the visual part of the gantt elements:
https://docs.dhtmlx.com/gantt/api__refs__gantt_templates.html

The best way to stylize tasks - is to use the task_class template:
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html

with this template, you can return the additional class to tasks based on some conditions and define ruleset for this class in CSS, like in the following fragment:

// JS part 
gantt.templates.task_class = function(start, end, task){
  var css= "";
  if(task.id === 1){
  	css += "z-index-low"
  }
  if(task.id ===2){
  	css += "z-index-high"
  }
  return css;
};
---
// CSS part 
  .z-index-low{
	z-index: -1 ; 

  }
  .z-index-high{
	z-index: 1;

  }

Here is a demo:
http://snippet.dhtmlx.com/5/93e489d5e