Custom Milestones

Gantt
#1

Hi All,

How can i add new types that behave like milestones?
If i treated them as task, it will not display properly when i add milestone class. Also the end date is messing up the display

Thanks,

Custom Milestone Gantt
#2

Hi,
you can define a custom render function for your types, so you’ll be able to display them as required:
docs.dhtmlx.com/gantt/api__gantt … onfig.html

#3

Is there an easier way to just add another type that looks exactly like a milestone but with a different color?

#4

Looking forward for this :smiley:

#5

Hi,
currently there is no way to ‘inherit’ a custom type from one of predefined ones in order to render your tasks as a milestone or project. So the possible way to do - is to render milestones manually.

The default ones are rendered as a square divs with rounded borders and rotated by 45 degrees
w3schools.com/cssref/css3_pr_transform.asp

Alternatively, instead of having a custom type you can use the default milestones, but color them differently using css template in task.color property:
docs.dhtmlx.com/gantt/desktop__c … tasks.html

#6

Hi,

Is there a global config to change the colors based on task type?

Thanks,

#7

There is no such config, but you can define css template which will return css class based on the task type:gantt.templates.task_class=function(start, end, task){ if(task.type == 'type1') return 'class_1'; if(task.type == 'type2' return class_2; };
docs.dhtmlx.com/gantt/api__gantt … plate.html
Or assign a color to the task property when it’s created or modified:gantt.attachEvent("onAfterTaskUpdate", function(id,task){ if(task.type == 'type1') task.color = '#ff0000'; if(task.type == 'type2' task.color = '#00ff00'; });
The default colors are defined in css classes:.gantt_task_line.gantt_project{} .gantt_task_line.gantt_milestone{} .gantt_task_line{}