Use Custom Column in Tooltip of Gantt chart VF Page

Gantt
#1

I have built Gantt chart using VF Page and I am using Apex custom controller to support the VisualForce page.

I am using tooltip function to view task title, start date and end dates respectively. Here is the function:

                 gantt.templates.tooltip_text = function(start,end,task){
                        return "<b>Title:</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);
                };

Now, I want to show the count of child records as well in the tooltip when hovered on any child Project. Is there anyway that i can add a custom column in gantt chart and use that in Tootlip. The custom column will be similar to the following:

task.ContactCount = JSON[key]["Contact_Count__c"];

The above column needs to be displayed in the tooltip function so that I can display the Contact Count when hovered on any task.

Can anyone please let me know how to achieve the above functionality.

Thanks!

#2

Hello @Skumar,

It’s hard to suggest how exactly you should implement in relate with the described technologies, but if you can store this value in the task data:

{"id":12, "text":"Task #1", "ContactCount": 200,  "start_date":"03-04-2018", "duration":"5", "parent":"11", "progress": 1, "open": true},

You should be able to get it from the tooltip_text template, as follows:

gantt.templates.tooltip_text = function(start,end,task){
  return "<b>Task:</b> "+task.text+"<br/><b>Duration:</b> " + task.duration + "</br> ContactCount:" + task.ContactCount;
};

Here is a demo:
https://snippet.dhtmlx.com/5/594e3398f

If you are using some function to calculate it during the over, this function should be accessible when the tooltip template function fires(on task hover), as follows:

function getContactCount(task){
   return `${task.text} ${task.id}`
}
gantt.templates.tooltip_text = function(start,end,task){
  return "<b>Task:</b> "+task.text+"<br/><b>Duration:</b> " + task.duration + "</br> ContactCount:" + getContactCount(task);
};

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

If it won’t help, could you please reproduce the issue in the snippet above(open the snippet => reproduce the issue => click the Share button => post here the new link).

btw, please do not duplicate question on different topics.