SfGantt - Custom Tooltips

[Volker]

Hi there,

it seems that you distinguish between a tooltip for a task and for a mile stone, although I cannot find it for milestones:
https://blazor.syncfusion.com/documentation/gantt-chart/tooltip/#tooltip-template

Please mind the missing translation for "Date" in milestones, too. Think that should be corrected:

Please provide a list of all available {...} - place holders, I didn't find anything in the docs.
And please provide an example, which shows the following data as a tooltip:

1) milestone: name, date + time, name of parent, delay to parent
2) task: name, start and end date, duration, progress, name of parent, delay to parent

Thank you!

Cheers,
Volker

[Gopinath Muniraj]

Hi Volker, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. 

We would like to inform that, the if tooltip settings for the taskbar is not set, by default the tooltip for the normal task and milestone will be rendered as you mentioned in your update. 

But if we set the tooltip setting for the taskbar, like the below code, the tooltip will be rendered as common for all types of taskbars like milestone, parent taskbar and child taskbar. 

<GanttTooltipSettings Taskbar="<div>TaskID: ${TaskId}</div>"></GanttTooltipSettings> 

 

If we used this code, TaskID is shown in tooltip for all kind of taskbars. As per your requirement, we can also render the tooltip based on our conditions. Please find the code snippet below, 

//.. 

<GanttTooltipSettings Taskbar=" 

        <div> 

            ${if (ganttProperties.isMilestone)} 

            <table> 

                <tbody> 

                    <tr><td>Milestone</td></tr> 

                    <tr><td>Task Name</td> <td>:</td> <td>${TaskName}</td></tr> 

                    <tr><td>Date</td> <td>:</td> <td>${this.getFormatedDate(StartDate)}</td></tr> 

                    <tr><td>Predecessor</td> <td>:</td> <td>${Predecessor}</td></tr> 

                </tbody> 

            </table> 

            ${else} 

            <table> 

                <tbody> 

                    <tr><td>Task</td></tr> 

                    <tr><td>Task Name</td> <td>:</td> <td>${TaskName}</td></tr> 

                    <tr><td>Start Date</td> <td>:</td> <td>${this.getFormatedDate(StartDate)}</td></tr> 

                    <tr><td>End Date</td> <td>:</td> <td>${this.getFormatedDate(EndDate)}</td></tr> 

                    <tr><td>Duration</td> <td>:</td> <td>${Duration}</td></tr> 

                    <tr><td>Progress</td> <td>:</td> <td>${Progress}</td></tr> 

                    <tr><td>Predecessor</td> <td>:</td> <td>${Predecessor}</td></tr> 

                </tbody> 

            </table> 

            ${/if} 

        </div>"> 

</GanttTooltipSettings> 

//.. 

 

We can render different tooltip based on the conditions like this code. We have prepared a sample for your reference. Please get the sample from below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/158972/ze/tooltip-Gantt1907249201 

Please let us know if you need any further assistance this. 

Thanks, 

Gopinath M 

[Volker]

Hi Gopinath,

thank you.

What is the shortcut ${...} for 

• the name of the parent task (not it's id)?
• the names of the previous tasks of the task (not their ids) plus lag?
• the names of the followers of the task (not their ids) plus lag?
• from/to and lag for a connector tooltip?

How can we check if it is a parent-task or a connector tooltip?

e.g. ${if (ganttProperties.isMilestone)}

Please provide a complete list of all available shortcut ${...}.

btw. something like this would be nice and way more flexible than your Javascript mixed mode workaround: 

Cheers,
Volker

[Gopinath Muniraj]

Hi Volker, 

Please find the below response. 

S. No	Query	Syncfusion comments
	something like this would be nice and way more flexible than your Javascript mixed mode workaround	Currently, there is no separate tag support for tooltip components. As of now only string type support is given for the tooltip settings.  This feature will be included in our upcoming volume 4 release, which is expected to be rolled out on December 31, 2020.
	What is the shortcut ${...} for…	For the details you have asked, we need to get the data by passing the ID. These actions can’t be done in the string template type of taskbar tooltip settings. So, the above-mentioned support needs to be included, to provide the proper solution for this query.  Thanks for your patience until then.
	How can we check if it is a parent-task	We can check the record is either parent or not, using the below code snippet,    ${if (hasChildRecords)}

 

Thanks, 

Gopinath M