Gantt chart tooltips and dates

Question

Hi,We are working on customizing the Gantt chart to suit our own design aesthetic. There are a couple of queries/issues that I am currently having with it.1. How can I set the taskbar tooltip to persist after hovering over said taskbar? We are planning on adding some buttons on the tooltip to provide users some options on what to do with the selected task, options that are custom to the system that we are working on and cannot be found on your context menu. When trying to hover over the tooltip, it immediately disappears. Please advise on how this can be done. If this is not possible, please advise a way for us to be able to extend the component in such a way that when we click on a task, a popup will appear containing the details of the task with a button that a user can click.2. I can't seem to access some class property values inside TaskbarTemplate. If you will look at the screenshot below, I used Reflection to enumerate all properties of my Task class being used to populate the Gantt chart. The Name and the Description values were initialized as an empty string, and the task ID is initialized as 0. Why is it being initialized in such a way. The only properties that I can access were the Start Date, End Date, and Duration.Here's the data list that I am using to populate the Gantt chart.3. I know that I have already raised this before with your team, but the times and dates displayed does not reflect the data that was passed into the Gantt chart. Please look at items with ID 1 and 2. I made sure that the date that I am passing is within the default parameters of work hours that is set with the Gantt chart. However, the End Date still reflects April 12 instead of April 13.Hoping for a quick response to all my queries and concerns.Many thanks!

Monisha Sivanthilingam · Accepted Answer

Hi Denzel,

Thank you for contacting Syncfusion support.

Please find the response for your queries below.

Sl.No.

Query

Syncfusion Comments

1

How can I set the taskbar tooltip to persist after hovering over said taskbar?

We have achieved your requirement by making use of the BeforeTooltipRender event in Gantt Chart. The following code snippets demonstrate the solution.

Index.razor

@using Syncfusion.Blazor.Gantt

<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"

ParentID="ParentId">

</GanttTaskFields>

</SfGantt>

public void BeforeTooltipRender(BeforeTooltipRenderEventArgs<TaskData> args)

{

if(args.Target == "Taskbar") {

args.Data.CssClass = ".e-tooltip";

}

<style>

.e-tooltip {

transition: all 1s ease-in-out;

}

</style>

We have also prepared a sample for your reference.

2

I can't seem to access some class property values inside TaskbarTemplate.

We are analyzing this issue. We will provide you with a further update on April 29, 2021.

3

I know that I have already raised this before with your team, but the times and dates displayed does not reflect the data that was passed into the Gantt chart. Please look at items with ID 1 and 2. I made sure that the date that I am passing is within the default parameters of work hours that is set with the Gantt chart. However, the End Date still reflects April 12 instead of April 13.

We tried using the data you shared above, however, the end dates of tasks numbered 1 and 2 are rendered as April 13 in our sample. Please find the sample we have prepared using the data you shared from the below link.

Sample: https://www.syncfusion.com/downloads/support/forum/164925/ze/F164925-468378767

Please share more details about the issue you faced and if possible modify the above sample to replicate the issue.

Please contact us if you require any further assistance.

Regards,

Monisha.

Roy Sunga · Answer

Hi,Thank you for responding to my query. I'll try all the samples you have provided for queries 1 and 3 and I'll get back to you if I encounter any issues with them.For query 2, I have some additional information. I found out that the component doesn't like passing variables with name such as Id and Name. I tried renaming them to TaskId and TaskName and it now reflects on the pop-up. However, the main issue still stands that I can't access the Description property. I suspect that your code only accepts data that are relevant to the Gantt chart like Task ID, Task Name, etc. But how about other properties that may not be needed by the Gantt chart but can provide more information to the user by displaying additional information on the Gantt chart tooltips, stuff like URLs and event descriptions.UPDATE: Now that I think about, we should also be able to use variable names Id and Name when passing values to the component and have their respective data reflect on the tooltip because you can do that with Duration and Progress.Hope you can shed some light on this issue.Many thanks!

Roy Sunga · Answer

Hi,So I've tried testing out the sample you give me that will solve my first query which is to persist a tooltip after hovering a taskbar.Sadly, this is not the solution that I was looking for. I believe I failed to communicate my requirements clearly. What I actually wanted was for the user to be able to hover over the taskbar tooltip in order to click a button that may be inside that tooltip. Currently, with my continued debugging and your sample, I still can't get that behavior to work. The tooltip will always disappear whenever I wanted to hover over that tooltip.I have provided a simple update on your Index.razor file that will demonstrate the current behavior of Gantt chart tooltips. I have added a button inside that tooltip that can supposedly download a certain event's ICS file. But the current behavior of Gantt chart tooltips doesn't allow me to click that button inside that tooltip because as soon as I try to hover over that the tooltip, the tooltip will disappear. (Also please notice that the Description property value also does not display on your attached sample.)Hope you can help me out on this one.Thanks!Attachment: Index.razor_a48c6082.zip

Monisha Sivanthilingam · Answer

Hi Denzel, 
 
We have validated the issue you reported and have confirmed it as a bug from our end. We have logged a bug report for it and you can track its status from the below feedback link. 
 
Feedback: https://www.syncfusion.com/feedback/24863/issue-when-rendering-custom-fields-using-tooltip-template 
 
The fix will be provided in the patch release scheduled for May 5, 2021. 
 
We appreciate your patience until then. 
 
Regards, 
Monisha.

Roy Sunga · Answer

Thank you Monisha!Hope you can help me with the other concern that I have also raised yesterday regarding the ability to hover over the Gantt tooltips to access buttons that may be found inside the tooltip. Thanks!

Roy Sunga · Answer

Hi,Any updates on the other query that I have reported 2 days ago? The one regarding the ability to hover over a tooltip?Thanks!

Monisha Sivanthilingam · Answer

Hi Denzel, 
  
Currently, we are working on your query. We will provide you with an update within two business days(May 5, 2021). 
  
We appreciate your patience until then. 
  
Regards, 
Monisha.

Monisha Sivanthilingam · Answer

Hi Denzel, 
  
We have analyzed your query and would like to inform you after further analysis, your requirement is not feasible to achieve in Gantt Chart. We can neither delay the closing of the tooltip nor provide the ability to hover over the tooltip in Gantt Chart. 
  
We regret the inconvenience caused. 
  
Please contact us if you require any further assistance. 
  
Regards, 
Monisha.

Monisha Sivanthilingam · Answer

Hi Denzel, 
 
Thank you for your patience. 
 
The issue “Issue in rendering custom fields using tooltip template” has been fixed in version v19.1.63. Please find the release notes from the below link. 
 
Release Notes: https://blazor.syncfusion.com/documentation/release-notes/19.1.63/?type=all#gantt-chart 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha.