Task text templates and custom markers

The dhtmlxGantt API is extensive. If you want to customize the content of the tasks you should look first for the different templates.

Target

• Show possible text templates
• Mark the tasks where the progress is slower(high prio) or faster(low prio) then estimated
• Mark the low prio tasks in green and the high prio tasks in red
• Add two additional markers per task without disturbing the other text informations
  • The top marker shows original estimated end date
  • The bottom marker shows again the progress
  • Both markers are only examples to show how you can add additional information
  • Consider also to use the tooltip functionality for more infos

Notes

• Requirement example by Gabriel Dragoi
• We deliver in the region query the following additional attributes
  • duration_old - the original estimation in days
  • priority - integer: 1=high, 2=medium, 3=low
• The current duration is calculated by the backend with the help of the current progress and start_date
• How you calculate/define the priority in the query is up to you

JavaScript

Region attributes "Before Init JS Code":

// https://docs.dhtmlx.com/gantt/desktop__timeline_templates.html

plugin_dhtmlxGantt.util_dateToIsoString = gantt.date.date_to_str("%Y-%m-%d");

gantt.templates.tooltip_text = function(start, end, task) {
    return "<b>Task:</b> " + task.text + "<br/>" + 
           "<b>Start date:</b> " + gantt.templates.tooltip_date_format(start) + "<br/>" + 
           "<b>End date:</b> " + gantt.templates.tooltip_date_format(end);
};

gantt.templates.progress_text = function(start, end, task) {
    return Math.round(task.progress * 100) + '%';
};

gantt.templates.task_class  = function(start, end, task){
    switch (task.priority){
        case "1":
            return "high";
            break;
        case "2":
            return "medium";
            break;
        case "3":
            return "low";
            break;
    }
};

gantt.templates.task_text = function(start, end, task) {
    return task.text;
};

gantt.templates.leftside_text = function(start, end, task){
    return '<b>Test: </b>left text';
};

/* right text excluded because of top marker
gantt.templates.rightside_text = function(start, end, task){
    return '<b>Test: </b>right text';
};
*/

// custom top and bottom marker
gantt.attachEvent("onDataRender", function(){
    gantt.eachTask(function(task){
        var node = gantt.getTaskNode(task.id);
        var oldPlannedEnd = gantt.calculateEndDate(task.start_date, parseInt(task.duration_old));
        var oldTaskSize = gantt.getTaskPosition(task, task.planned_start, oldPlannedEnd); 
        var taskSize = gantt.getTaskPosition(task, task.planned_start, task.planned_end); 
        $(node).append('<div class="marker top" style="left:' + oldTaskSize.width + 
            'px;">Old planned end date: ' + 
            plugin_dhtmlxGantt.util_dateToIsoString(oldPlannedEnd) + '</div>');
        $(node).append('<div class="marker bottom" style="left:' + 
            (taskSize.width * task.progress) + 'px;">' + 
            Math.round(task.progress * 100) + '%</div>');
    });
});

Styles

Placed in the page as inline CSS:

.high{
    border-color: #d96c49 !important;
    color: #d96c49 !important;
    background-color: #d96c49 !important;
}
.high .gantt_task_progress{
    background-color: #db2536 !important;
}
.medium{
    border-color: #6ba8e3 !important;
    color:#6ba8e3 !important;
    background-color: #6ba8e3 !important;
}
.medium .gantt_task_progress{
    background-color: #547dab !important;
}
.low{
    border-color: #34c461 !important;
    color:#34c461 !important;
    background-color: #34c461 !important;
}
.low .gantt_task_progress{
    background-color: #23964d !important;
}

.gantt_task_progress {
    text-align: left !important;
    font-size: 12px;
    padding-left: 4px;
    color: white;
}

.marker {
    position:absolute;
    color: black;
    border-left: 2px solid black;
    padding-left: 2px;
    margin-left: -2px; /*compensate task borders*/
}
.marker.top {
    top:0px;    
    height: 10px;
    font-size: 10px;
    line-height: 11px;
}
.marker.bottom {
    bottom:0px;    
    height: 8px;
    font-size: 8px;
    line-height: 9px;
}

Result