Gantt chart custom property not being displayed on custom tooltips for Gantt charts

[Roy Sunga]

Hi,

Custom Gantt chart properties are not working for this type of tooltip implementation.

I have also attached the code for this for your testing and verification.

With the current version release, I know the issue about custom properties not being displayed on Gantt chart tooltips are already addressed. Unfortunately, our requirements needs us to implement a custom tooltip and we decided to use the above approach instead. However, the above implementation also does not recognize the custom fields that I was planning to display.

Is there a workaround to get to this to work for the meantime until your next patch release? We have a very tight development deadline for a proof of concept and I don't think we can afford to wait for another patch release next month to achieve the fix here. Many thanks!

Best regards,

Attachment: GanttChart_7c8edc30.zip

[Monisha Sivanthilingam]

Hi Denzel, 

 

Greetings from Syncfusion support. 

 

We were able to replicate the issue you reported. However, we need some time to analyze it. We will analyze and provide you with further details in one business day(May 18, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[Monisha Sivanthilingam]

Hi Denzel, 

  

The issue you reported is related to one of our dependent components and we have forwarded your query to them. We will provide you with further details within two business days(May 20, 2021). 

  

We appreciate your patience until then. 

  

Regards, 

Monisha. 

                                                                                         

[Monisha Sivanthilingam]

Hi Denzel, 

  

Thank you for your patience. 

  

We have modified the sample you shared to display the description in the tooltip. We have entered the content of the tooltip field in the tooltip definition to render it in the tooltip. The following code snippet demonstrates the solution. 

  

Index.razor 

  

<SfTooltip Target=".e-gantt-child-taskbar" 

                           CloseDelay="100"> 

                <TooltipTemplates> 

                    <Content> 

                        <div id="demo-content" class="demo-content"> 

                            <div class="info"> 

                                <h3 class="tooltip-title">Header <hr style="margin-top: 10px;"></h3> 

                                <p>@context.TaskName</p> 

                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis lorem, semper eu interdum a, viverra et magna.</p> 

                                <p>@context.StartDate</p> 

                                <p>@context.EndDate</p> 

                                <button>Download ICS</button> 

                            </div> 

                        </div> 

                    </Content> 

                </TooltipTemplates> 

                <div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style="height:22px;border-radius:5px; background-color: #60A3D9;"></div> 

            </SfTooltip> 

  

  

We have also prepared a sample for your reference. 

  

Regards, 

Monisha. 

[Roy Sunga]

Hi Monisha,

Sorry for the late response.

This solution is not acceptable, as we need to call the @context.Description dynamically to display the value that is inside it. You simply typed the content which simply does not work since the Description field is not a static field. We expect to have variation with the Description values.

Again, the problem is that the SfTooltip component that sits inside the SfGantt component doesn't read the custom properties in my TaskData class. It only reads properties that are directly related to SfGantt like TaskId, TaskName, etc.

Kindly provide an acceptable solution that will work with the requirements that I have mentioned.

If this will be part of the bug fix, I hope you can schedule it on an immediate release as we really need this feature in your Gantt chart.

Best regards,

[Monisha Sivanthilingam]

Hi Denzel, 

 

We apologize for the inconvenience caused. 

 

We have made use of the Notes field in the Taskfields to display the description in the tooltip. The notes field can also be used as a description field in the Gantt Chart. Hence, we suggest using it instead of the description field. The following code snippets demonstrate the solution. 

 

Index.razor 

 

new TaskData() { 

                TaskId = 1, 

                TaskName = "Task 1", 

                StartDate = new DateTime(2021, 04, 12, 08, 00, 00), 

                EndDate = new DateTime(2021, 04, 13, 17, 00, 00), 

                Progress = 0, 

                Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis lorem, semper eu interdum a, viverra et magna.", 

                Notes = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed turpis lorem, semper eu interdum a, viverra et magna." 

            } 

 

 

 

public class TaskData 

    { 

        public int TaskId { get; set; } 

        public string TaskName { get; set; } 

        public string Description { get; set; } 

        public DateTime StartDate { get; set; } 

        public DateTime EndDate { get; set; } 

        public string Duration { get; set; } 

        public string Predecessor { get; set; } 

        public int Progress { get; set; } 

        public int? ParentId { get; set; } 

        public string Notes { get; set; } 

    } 

 

 

 

<GanttTaskFields Id="TaskId" 

                     Name="TaskName" 

                     StartDate="StartDate" 

                     EndDate="EndDate" 

                     Duration="Duration" 

                     Progress="Progress" 

                     Dependency="Predecessor" 

                     Notes="Notes" 

                     ParentID="ParentId"></GanttTaskFields> 

 

 

 

<SfTooltip Target=".e-gantt-child-taskbar" 

                           CloseDelay="100"> 

                <TooltipTemplates> 

                    <Content> 

                        <div id="demo-content" class="demo-content"> 

                            <div class="info"> 

                                <h3 class="tooltip-title">Header <hr style="margin-top: 10px;"></h3> 

                                <p>@context.TaskName</p> 

                                <p>@context.Notes</p> 

                                <p>@context.StartDate</p> 

                                <p>@context.EndDate</p> 

                                <button>Download ICS</button> 

                            </div> 

                        </div> 

                    </Content> 

                </TooltipTemplates> 

                <div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style="height:22px;border-radius:5px; background-color: #60A3D9;"></div> 

            </SfTooltip> 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Roy Sunga]

The provided solution worked perfectly. Thank you for that.

One more thing before we close this. It just doesn't feel right that I can't use my custom property name when I map the properties into the Gantt Chart fields. Based on my testing, in order for custom properties to work, I have to rename to the appropriate property name equivalent of Gantt chart in order for it to work. For example, using Description instead of Notes does not work and I have mapped the Description property to the Notes Gantt Chart field As a user of your product, which is awesome by the way, I want to know why do you prevent the usage of custom property names when being mapped to the Gantt chart fields.

Hope my question made sense.

[Monisha Sivanthilingam]

Hi Denzel, 

 

Thank you for your patience. 

 

We are glad that the provided solution works for you. After analyzing in depth, we have confirmed that the custom properties not displaying in the taskbar template as a bug from our side. We have also logged a bug report for it. You can track its status from the below feedback link. 

 

Feedback: https://www.syncfusion.com/feedback/25999/custom-properties-are-null-when-trying-to-read-then-in-taskbar-template 

 

The fix will be provided in the Volume 2 release scheduled for the end of June, 2021. 

 

We appreciate your patience until then. 

 

Regards, 

Monisha.